set focus after replaceWith

Question

I'm working on an invoice system and I've come to the part of line items.

For this, I have a table, that will eventually have a button to add another line item dynamically to the DOM.

Until that point, I am trying to work the kinks out of a single line item. In my case, it is the notes section.

For the input of notes, I have a P tag with some text and onclick of that element replaces it with a textarea.

<h2>line items</h2><hr>
    <table id='lineitems'>
        <tr>
            <th>Order #</th>
            <th>Style #</th>
            <th>Item Name/Description</th>
            <th>Quantity</th>
            <th>Cost</th>
        </tr>
        <tr>
            <td><input type='text' name='ladingnum' /></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' style='width:300px;'/></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' /></td>    
        </tr><tr><td colspan=4>
            <div id='thenotes'>
                <input type='hidden' class='comments' name='notes'/>
                <textarea class='comments'></textarea>
                <p class='edit'>[ click here to add notes ]</p>
            </div>
        </td></tr>

    </table>

This is the jQuery I am using.

$(document).on('click', '.edit', function() {
    var odata = $(this).closest("input:hidden").val();
    if( odata == undefined ) odata = '';
    $(this).closest("textarea.comments").val(odata).focus();
});

$(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if( idata == '' ) idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>"+idata+"</p>");
});

Using that, I get this effect.

Page loads... the P tag has default content of click here to add notes. On click it turns into a textarea that contains whatever is in the hidden field. It is also supposed to focus on this newly created textarea....it is not focusing!

On top of that. I can't seem to get the value of the textarea to go into the hidden input field... What am I doing wrong?

Answer 1

The selector .closest('input:hidden') will only select it's closest parent, not siblings. You have to use .siblings('input:hidden') or .closest('div').find('input:hidden') to select the input and textarea.

Something like this:

Demo here

$(function () {
    $(document).on('click', '.edit', function () {
        var odata = $(this).closest("div").find("input:hidden").val();
        if (odata == undefined) odata = '';
        $(this).closest("div").find("textarea.comments").val(odata).focus();
    });

    $(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if (idata == '') idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>" + idata + "</p>");
    });
});

Answer 2

use siblings instead of closest.Try this:

 $(document).on('click', '.edit', function() {
var odata = $(this).siblings("input[type='hidden']").val();
if( odata == undefined ) odata = '';
$(this).siblings("textarea.comments").val(odata).focus();
});

Answer 3

The hidden <input> and the <p> tag are siblings so you should the siblings() selector instead. closest() is used to traverse through the ancestor of the element until it finds the match selector. You are also not creating any <textarea> on your code but I suppose that's what '.liveedit' is for:

$(document).on('click', '.edit', function () {
    var odata = $(this).siblings("input:hidden").val();
    if (odata == undefined) odata = '';
    var textarea = $('<textarea class="liveedit">' + odata + '</textarea>');
    $(this).replaceWith(textarea);
    textarea.focus();
});

$(document).on('focusout', '.liveedit', function () {
    var idata = $(this).val();
    if (idata == '') idata = "[ click here to add notes ]";
    $(this).siblings("input:hidden").val(idata);
    $(this).replaceWith("<p class='edit'>" + idata + "</p>");
});

See this jsfiddle: http://jsfiddle.net/yKym7/1/