2011-03-19 76 views
7

我有一個網頁組成的JQuery UI標籤小部件。標籤小部件通過AJAX加載標籤。在其中一個標籤頁(將其命名爲DescriptionPage)中,我有一個將通過ajaxForm插件提交的表單。jQuery的部分視圖中未定義在IE中通過ajax加載

<div id="tabs"> 
    <ul> 
     <li> 
      <a href="DescriptionPage">Description Page</a> 
     </li> 
    </ul> 
</div> 

這是我說明頁面內容。

<form id="myForm"> 
    <!-- Form elements goes here --> 
</form> 

<script> 
    $(function(){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').parent().empty().append(response); 
    }); 
    }); 
</script> 

表單提交之後,同樣的說明頁面返回,無論是形式和腳本。所以表單內容被服務器端的響應所取代。該響應還包含驗證消息。

問題是,整個場景在Chrome和Firefox中運行良好。但在Internet Explorer 8中,會發生一個奇怪的問題。

當選項卡第一次加載時,javascript被成功執行。當用戶提交表單並將響應放入時,IE無法執行我的JavaScript,並說「JQuery未定義」。

爲什麼IE瀏覽器無法在通過ajax加載的內容中調用JQuery? 有沒有解決方法?

PS:我想從分隔條件HTML腳本,但它是不是在所有:(

P.S2一個選項:我的JavaScript和CSS文件變得愚蠢,因爲IE的混亂

+0

這不會解決問題,但可以使用'$('#myForm')。parent()。html(response);' – 2011-03-19 02:04:44

+0

有趣的是,錯誤顯示爲「jQuery」 '粘貼在這裏根本不使用變量「jQuery」。它是否告訴你哪些文件和行發生錯誤? – 2011-03-19 02:06:06

+0

感謝您的回覆。在IE中,有一些使用html(響應)prenvet的bug,這就是爲什麼我順序使用了empty()和append()的原因。 – SadullahCeran 2011-03-19 02:09:32

回答

1

這似乎我在Internet Explorer 6的工作:

的index.html:

<html><head></head><body> 

<div id="container"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="jquery.form.js"></script> 
<script> 
    jQuery('#container').load('DescriptionPage.html'); 
</script> 

</body></html> 

DescriptionPage.html:

<form id="myForm"> 
    <input type="submit" /> 
</form> 

<script> 
    $(function() { 
     $('#myForm').ajaxForm(function(response) { 
      $('#myForm').parent().empty().append(response); 
     }); 
    }); 
</script> 
0

嘗試這樣的事情,看它是否解決了問題:

<script> 
    $(function(){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').empty().append($(response).children('form').html()); 
    }); 
    }); 
</script> 

這是什麼應該做的是與元素的內容替換現有表單的內容在響應中返回。而不是替換整個表單元素並再次執行JS。它可能會解決您的問題。

+0

謝謝。但是我必須重新執行JS,使綁定等等。例如:表單需要綁定到每個響應的ajaxForm。 – SadullahCeran 2011-03-25 08:37:53

0

你可以嘗試這樣的事:

<form id="myForm"> 
    <!-- Form elements goes here --> 
</form> 

<script> 
    (function($){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').parent().empty().append(response); 
    }); 
    })(jQuery); 
</script> 

用這種方法你封裝函數內的$,它不能從其他JS框架搞砸了(你應該使用的話)。我不知道這是否會與IE瀏覽器,我不能測試,但希望它會:)

1

請參考:jQuery 1.6.1 , IE9 and SCRIPT5009: '$' is undefined

用戶ID「黑」提供了正確的方向我。

我在對話框上使用.AjaxForm上傳。之後,我用另一個AjaxForm替換該表單。 然後我有一個錯誤「$未定義」,或者「jQuery未定義」 主要原因是我爲第二個對話框應用了「render:layout => false」。這就是爲什麼所有的js庫(包括jQuery)都沒有正確加載。

因此,在部分第二個對話框中,我必須添加。

0

如果您使用的是IE,請確保您使用jQuery版本1的jQuery版本2不支持IE ....即使一切都在這個星球上的其他支持版本2 ....

http://jquery.com/download/

+0

歡迎來到StackOverflow。一些建議:考慮讓原始海報提供更多信息,例如他正在使用的jQuery版本。另外,請在答案中更加精確,以便對其他讀者有所幫助。 (並非所有IE版本都不支持jQuery 2,所有其他瀏覽器也不支持。)感謝您的貢獻。 – 2013-09-17 20:41:44

相關問題