jQuery Dialog and Setting a Textbox Value

Question

so I have a modal dialog i use with jQuery in my asp .net page. I am trying to set a textbox value using jquery. here is some sample code:

<div class="popup-template popup1">
    <div class="content">     
      <input type="text" id="tbX" value="asdf" />
      <input type="button" onclick="$('#tbX').val('TEST VALUE');" value="Input Test" />
      <input type="button" onclick="alert($('#tbX').val());" value="Output Test" />
   </div>
</div>

• If I click "Output Test" the alert shows "asdf"
• Then I click "Input Test" and the textbox value doesn't change
• I click "Output Test" once again and the alert shows "TEST VALUE"
• If I change the text in the textbox manually the alert still show "TEST VALUE"

I already have, in place, the code to move my dialog back within the form tag so this isn't the issue.

If I move the inputs outside of the modal div then everything works fine.

Thanks for your help

-Russ

Answer 1

Try using Firefox with Firebug ("view generated source") and see if the modal dialog is recreating your DOM for you and renaming the inputs. This would mean that you are accessing the original, now hidden input from the click handler and the new input when typing. If so, you could change how you are getting the text box element to use something like:

$(this).parent('div').find('input[type=text]:first').val(...)