FireFox textarea issue in modal dialog

Question

I've got a textarea inside a jQuery UI modal dialog. I tried changing the textbox value like this:

1) $('#textarea').val('test value');
2) $('#textarea').text('test value');

Both of these work in all browsers. Except in Firefox it only works ONCE.

When calling to either of these once again with a new value, the textarea value remains unchanged. No matter if this is while the modal dialog is open or prior to opening it (it opens with the textarea id="textarea" as part of the content - so changing the value of it prior to opening, SHOULD leave the value when opening the textbox).

As suggested in an other thread, I tried doing

$('#textarea').css('display', 'block');

both prior and after setting the value of the textarea.

Any clues?

I can't figure out why this issue occurs just in FireFox - usually everythings functions in Firefox but not in other browsers.

Thank you.

Answer 1

I ran into this issue with Firefox 5.0.1 and jQuery UI 1.8.14

I've somehow hacked around this by moving the .dialog() call inside a click event handler instead of creating the dialog onload. This means that each click to open the dialog recreates the whole dialog (I think), and that may be what's fixing the textarea issue.

Your mileage may vary.

Answer 2

Since it works once, its not completely broken. Since you are developing with Firefox I assume you are also using Firebug. You should try simple debugging by writing

console.log($('#textarea'));

before and after you have first time tried to set the value. It would be interesting to see will jQuery be able to select it after first time set.

Answer 3

It's not the issue with setting the value, but with the dialog('open') method resetting those textarea values on each call. It's seems to be some bug between FF and jqueryUI dialog, as it started happening a few months ago, it worked fine before.

Solution is simple, just fill the values of textareas after you show the dialog, not before.