Question

take a look to the example:

example.jsp:

<script type="text/javascript">
  $(document).ready(function() {
    $('#Button1').button().click(function() {
      $("#mainContent").load("example_1.jsp");
    });
  });
</script>

<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>

example_1.jsp:

<script type="text/javascript">
  $(document).ready(function() {
    $("#a").button().click(function() {
      $("#a_form").dialog("open");
    });

    $("#a_form").dialog({
      autoOpen: false,
      height: 480,
      width: 625,
      modal: true
    });
  });
</script>

<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
  Hello!
</div>

I load example.jsp and I press the button “RELOAD”.
Then, in “mainContent”, appears the button “MODAL”, that open a modal dialog.

But if I press again “RELOAD” button and then “MODAL” the MODAL DIALOG doesn’t appear anymore!
why?
where am i doing wrong?

Answer 1

That is because :

<input id="a" type="button" value="MODAL" />

Is using an ID.

When you run load again you are creating another input with the id=a which is not allowed.

Try using a class identifier instead of an id