2011-03-19 53 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