Hi, I am loading content with jquery.load() (1.4.2), which includes a form that I turn into a model dialog. When I open the dialog, I dynamically populate a form select list.
It works the first time I load the content, but on subsequent loads it breaks and will only return the last selected item from the previous load. (I also think it doesn't reload the select list on subsequent loads, even though the alert on the dialog open function fires.)
I load the content as:
<script>
...
$("#content").load("test.html")
..
</.script>
...
<div id="content"></div>
And the test.html file:
<script type="text/javascript">
jQuery(document).ready(function(){
$("#testForm").dialog({
autoOpen: false,
height: 400,
width: 700,
modal: true,
buttons: {
'Alert': function() {
alert($("#testSelectList").val());
},
'Close': function() {
$(this).dialog('close');
}
},
close: function() {
},
open: function() {
alert("Open");
$("#testSelectList").html("<option value=\"one\">one</option><br/>"+
"<option value=\"two\">two</option><br/>"+
"<option value=\"three\">three</option><br/>"+
"<option value=\"four\">four</option><br/>");
}
});
$("#testButton").button().live('click', function() {$("#testForm").dialog('open');});
});
</script>
<div id="testForm" title="Test">
<form>
<fieldset>
<label for="testSelectList">Select List</label><br/>
<select id="testSelectList" class="ui-state-default ui-corner-all">
<option value="">-none-</option></select><br/>
</fieldset>
</form>
</div>
<div id="test">
<h1>Form Select List Test</h1>
<button id="testButton">Open Test Form</button>
</div>
In this example, on a second .load(), if I hit the alert button, it won't return the selected list item - it will only return the first item.
I've tried putting .live() around the button click opening the dialog... but that doesn't change anything.