Question

I have a simple like this:

<textarea id="ind_comment" rows="4" cols="32"></textarea>

Then I have the following:
There is a hidden field and a button which has the class “showComment”. If there is a value in the hidden field the textarea should be populated with that value.

$(".showComment").click(function(){
    var rowid       = $(this).attr("rowid");
    var hiddenid    = "line_" + rowid + "_new_cmt";

    $("#ind_comment").val($("#line_" + rowid + "_new_cmt").val();

    var x = $(this).position().left + ($(this).outerWidth() -350);
    var y = $(this).position().top - $(document).scrollTop();

    $("#dialog").dialog({ 
        bgiframe: true,
        position: [x,y],
        width: 400,
        height: 200,
        title: "Comments specific to this entry",
        modal: true,
        buttons: { "Close": function() { 
            $("#line_" + rowid + "_new_cmt").val($("#ind_comment").val());
            $("#ind_comment").val("");
            $(this).dialog("destroy"); 
        }}
    });
});

$(“#ind_comment”).val(“”); clears the value as it should.

In FF4 (Windows or OS X)

$("#ind_comment").val(document.getElementById(hiddenid).value);

does not work but it works just fine in IE (tested with 8) and FF 3.x

I’ve also tried:

$("#ind_comment").val($("#line_" + rowid + "_new_cmt").val();

with no luck.

This is with jQuery 1.5.2

Am I missing something or is there an issue with FF4?

Here’s a jsFiddle Demo…It works the first time, but not the second time either of the buttons is clicked.

Answer 1

Seems that all the other examples left out the jquery dialog part…maybe that’s where the issue is…?

While the jquery is a bit of a rat’s nest why go through all the extra hoops?

1. Change the hidden input to a textarea
2. Wrap that textarea in it’s own div
3. When the button is clicked turn that wrapped textarea into the dialog instead of using the one div as the text area

That way you avoid the need to swap the text in and out and such…

Might make it easier in the long run…