jQuery模式對話框使用加載已經包含jQuery代碼（Autocomplete）內容的表單頁面？

我在動態生成的網頁中有一個表單，我想使用jQuery UI模式對話框來顯示它。jQuery模式對話框使用加載已經包含jQuery代碼（Autocomplete）內容的表單頁面？

當我的表單沒有嵌入jQuery UI本身時，我在前一篇文章中提出的解決方案工作正常：jQuery UI modal dialog form using remote content。

遠程窗體已經包含jQuery函數的方式：自動完成。

如何解決這個問題？

<body> 
    <div> 
     <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
      <thead> 
       <tr> 
        <th>software </th> 
        <th>script</th> 
        <th>exec_type</th> 
        <th>run_status</th> 
        <th>test_result</th> 
        <th>review_status</th> 
        <th>priority</th> 
        <th>author</th> 
        <th>creation date</th> 
        <th>update date</th> 
        <th>edit</th> 
       </tr> 
      </thead> 

      <tfoot> 
       <tr> 
        <th>software </th> 
        <th>script</th> 
        <th>exec_type</th> 
        <th>run_status</th> 
        <th>test_result</th> 
        <th>review_status</th> 
        <th>priority</th> 
        <th>author</th> 
        <th>creation date</th> 
        <th>update date</th> 
        <th>edit</th> 
       </tr> 
      </tfoot> 

      <tbody> 

      </tbody> 



     </table> 

    </div> 


    <script type="text/javascript" charset="utf-8"> 

     $('td').click(function(){$("#formContainer").load("myform.html", function() { 
       var container = $(this); 
       container.dialog({ 
        modal: true 
       }) 
       .find("form").submit(function() { 
        container.dialog("close"); 
        return false; 
       }); 
      }); 

     }) 
     ; 
    </script> 



</body>

form.html看起來像這樣：

<script type="text/javascript" charset="utf-8"> 

     (function($) { 
      $.widget("ui.combobox", { 
       _create: function() { 
        var self = this; 
        var select = this.element.hide(); 
        var input = $("<input>") 
        .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 && (!request.term || matcher.test(text))) 
            return { 
             id: this.value, 
             label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
             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()) 

        $("<button>&nbsp;</button>") 
        .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(); 

    }); 



</script> 


<body> 
    <div> 
     <form action="/followup/forms/runs/8/" method="post"> 
      <p><label for="id_software">Software:</label> <select name="software" id="id_software"> 

        <option value="">---------</option> 
        <option value="1" selected="selected">AS_1500_211</option> 
        <option value="2">AS_1500_212</option> 
        <option value="3">AS_1500_213</option> 
        <option value="4">AS_1500_214</option> 
       </select></p> 
      <p><label for="id_script">Script:</label> <select name="script" id="id_script"> 
        <option value="">---------</option> 
        <option value="1">OBJECT__1_TC1</option> 

        <option value="2">OBJECT__2_TC1</option> 
        <option value="3">OBJECT__2_TC2</option> 
        <option value="4">OBJECT__3_TC1</option> 
        <option value="5">OBJECT__3_TC2</option> 
        <option value="6">OBJECT__4_TC1</option> 
        <option value="7">OBJECT__4_TC2</option> 
       </select></p> 
      <input type="submit" value="Submit" /> 
     </form> 

    </div> 
</body>

來源

2010-07-29 djondal

你能解釋一下這個問題比較好？你的html是什麼？你如何加載表單？ – Keyo 2010-07-29 04:12:39

我的問題是，我有身體標籤嵌套在父母的HTML。它更好，但合併標籤和內容後仍然看起來很糟糕 – djondal 2010-07-30 06:01:38

，所以我知道這是一個古老的職位，但我沒有在這裏看到一個答案。我相信你需要的東西就像一個叫做livequery的jquery插件。它將允許您將jquery-ui功能添加到通過等待它們存在於dom中而動態加載的表中。

電流：

$(function() { 
     $("#id_software").combobox(); 
     $("#id_script").combobox(); 
});

用的liveQuery：

$(function() { 
     $("#id_software").livequery(function() { $(this).combobox(); }); 
     $("#id_script").livequery(function() { $(this).combobox(); }); 
});

來源

2011-05-03 06:00:35 ryanmarc

jQuery模式對話框使用加載已經包含jQuery代碼（Autocomplete）內容的表單頁面？

回答

相關問題