Home/ Questions/Q 956811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T00:35:54+00:00

I am loading content with jquery.load() (1.4.2), which includes a form that I turn

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you create a dialog it’s moving it to the end of the <body> (more important, outside #content, so it escapes death when #content is re-loaded). So what happens is your .load() gets that content, but the dialog is left around, and you’re pulling content with duplicate IDs after the first load.

    Make sure to destroy that dialog/original content first to avoid the duplicate issue, like this: 

    $("#testForm, #test").remove();
$("#content").load("test.html");

    Note that .remove() cleans up the event handlers that would otherwise be left around as well.

    With this, there’s no need for the .live() handler either, since you’ll now correctly have one button and one dialog at a time, instead of multiple sharing the same IDs.

    • 0