title: jQuery modal dialog using loading a form page that already contain jQuery code (Autocomplete) content?
body: <p>I have a form in a web page dynamically generated and I would like to display it using a the jQuery UI modal dialog. </p>
  
  <p>The solution I was proposed in a previous post works when my form does not embedded jQuery UI itself : <a href="https://stackoverflow.com/questions/3338586/jquery-ui-modal-dialog-form-using-remote-content">jQuery UI modal dialog form using remote content</a>.</p>
  
  <p>The way the remote form already contains jQuery functions : Autocomplete.</p>
  
  <p>How to solve that problem?</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;software &lt;/th&gt;
                      &lt;th&gt;script&lt;/th&gt;
                      &lt;th&gt;exec_type&lt;/th&gt;
                      &lt;th&gt;run_status&lt;/th&gt;
                      &lt;th&gt;test_result&lt;/th&gt;
                      &lt;th&gt;review_status&lt;/th&gt;
                      &lt;th&gt;priority&lt;/th&gt;
                      &lt;th&gt;author&lt;/th&gt;
                      &lt;th&gt;creation date&lt;/th&gt;
                      &lt;th&gt;update date&lt;/th&gt;
                      &lt;th&gt;edit&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;th&gt;software &lt;/th&gt;
                      &lt;th&gt;script&lt;/th&gt;
                      &lt;th&gt;exec_type&lt;/th&gt;
                      &lt;th&gt;run_status&lt;/th&gt;
                      &lt;th&gt;test_result&lt;/th&gt;
                      &lt;th&gt;review_status&lt;/th&gt;
                      &lt;th&gt;priority&lt;/th&gt;
                      &lt;th&gt;author&lt;/th&gt;
                      &lt;th&gt;creation date&lt;/th&gt;
                      &lt;th&gt;update date&lt;/th&gt;
                      &lt;th&gt;edit&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
  
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
  
  
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  
  
      &lt;script type="text/javascript" charset="utf-8"&gt;
  
          $('td').click( function(){$("#formContainer").load("myform.html", function() {
                  var container = $(this);
                  container.dialog({
                      modal: true
                  })
                  .find("form").submit(function() {
                      container.dialog("close");
                      return false;
                  });
              });
  
          })
          ;
      &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>form.html looks like that:</strong></p>
  
  <pre><code>    &lt;script type="text/javascript" charset="utf-8"&gt;
  
          (function($) {
              $.widget("ui.combobox", {
                  _create: function() {
                      var self = this;
                      var select = this.element.hide();
                      var input = $("&lt;input&gt;")
                      .insertAfter(select)
                      .autocomplete({
                          source: function(request, response) {
                              var matcher = new RegExp(request.term, "i");
                              response(select.children("option").map(function() {
                                  var text = $(this).text();
                                  if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                                      return {
                                          id: this.value,
                                          label: text.replace(new RegExp("(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"), "&lt;strong&gt;$1&lt;/strong&gt;"),
                                          value: text
                                      };
                              }));
                          },
                          delay: 0,
                          change: function(event, ui) {
                              if (!ui.item) {
                                  // remove invalid value, as it didn't match anything
                                  $(this).val("");
                                  return false;
                              }
                              select.val(ui.item.id);
                              self._trigger("selected", event, {
                                  item: select.find("[value='" + ui.item.id + "']")
                              });
  
                          },
                          minLength: 0
                      })
                      .addClass("ui-widget ui-widget-content ui-corner-left");
  
                      // This line added to set default value of the combobox
                      input.val(jQuery("#"+select.attr("id")+" :selected").text() )
  
                      $("&lt;button&gt;&amp;nbsp;&lt;/button&gt;")
                      .attr("tabIndex", -1)
                      .attr("title", "Show All Items")
                      .insertAfter(input)
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      }).removeClass("ui-corner-all")
                      .addClass("ui-corner-right ui-button-icon")
                      .click(function() {
                          // close if already visible
                          if (input.autocomplete("widget").is(":visible")) {
                              input.autocomplete("close");
                              return false;
                          }
                          // pass empty string as value to search for, displaying all results
                          input.autocomplete("search", "");
                          input.focus();
                          return false
                      });
                  }
              });
  
      })(jQuery);
  
      $(function() {
              $("#id_software").combobox();
              $("#id_script").combobox();
  
      });
  
  
  
  &lt;/script&gt;
  
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;form action="/followup/forms/runs/8/" method="post"&gt;
              &lt;p&gt;&lt;label for="id_software"&gt;Software:&lt;/label&gt; &lt;select name="software" id="id_software"&gt;
  
                      &lt;option value=""&gt;---------&lt;/option&gt;
                      &lt;option value="1" selected="selected"&gt;AS_1500_211&lt;/option&gt;
                      &lt;option value="2"&gt;AS_1500_212&lt;/option&gt;
                      &lt;option value="3"&gt;AS_1500_213&lt;/option&gt;
                      &lt;option value="4"&gt;AS_1500_214&lt;/option&gt;
                  &lt;/select&gt;&lt;/p&gt;
              &lt;p&gt;&lt;label for="id_script"&gt;Script:&lt;/label&gt; &lt;select name="script" id="id_script"&gt;
                      &lt;option value=""&gt;---------&lt;/option&gt;
                      &lt;option value="1"&gt;OBJECT__1_TC1&lt;/option&gt;
  
                      &lt;option value="2"&gt;OBJECT__2_TC1&lt;/option&gt;
                      &lt;option value="3"&gt;OBJECT__2_TC2&lt;/option&gt;
                      &lt;option value="4"&gt;OBJECT__3_TC1&lt;/option&gt;
                      &lt;option value="5"&gt;OBJECT__3_TC2&lt;/option&gt;
                      &lt;option value="6"&gt;OBJECT__4_TC1&lt;/option&gt;
                      &lt;option value="7"&gt;OBJECT__4_TC2&lt;/option&gt;
                  &lt;/select&gt;&lt;/p&gt;
              &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>