IE中通过ajax加载的部分视图中jquery未定义

发布于 2024-10-23 15:08:05 字数 1052 浏览 6 评论 0原文

我有一个包含 JQuery UI 选项卡小部件的网页。选项卡小部件通过 AJAX 加载选项卡。在其中一个选项卡页面（将其命名为 DescriptionPage）中，我有一个将通过 ajaxForm 插件提交的表单。

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

这是我的DescriptionPage的内容。

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

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

提交表单后，将返回相同的 DescriptionPage，包括表单和脚本。因此表单内容被服务器端的响应所替换。响应还包含验证消息。

问题是，整个场景在 Chrome 和 Firefox 中运行良好。但在 Internet Explorer 8 中，出现了一个奇怪的问题。

当选项卡首次加载时，JavaScript 会成功执行。当用户提交表单并放置响应时，IE 无法执行我的 javascript，并显示“JQuery 未定义”。

为什么 IE 在通过 ajax 加载的内容中调用 JQuery 失败？有解决方法吗？

PS：我想将脚本与 html 分开，但这根本不是一个选项:(

P.S2：由于愚蠢的 IE，我的 javascript 和 CSS 文件变得一团糟。

原文

I have a web page consisting a JQuery UI Tabs widget. Tab widget loads the tabs via AJAX. In one of the tab pages (name it DescriptionPage), I have a form which will be submitted via ajaxForm plugin.

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

This is content of my DescriptionPage.

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

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

After form is submitted, the same DescriptionPage is returned, both the form and script. So the form content is replaced with the response of the server side. The response also contains validation messages.

The problem is, The whole scenario works well in Chrome and Firefox. But in Internet Explorer 8, a strange issue happens.

When the tab is first loaded, the javascript is successfully executed. When user submits the form and the response is put, IE fails to execute my javascript, saying "JQuery is not defined".

Why IE fails to call JQuery inside the content loaded via ajax?
Is there a workaround?

P.S: I thought seperating the script from html, but it is not an option at all :(

P.S2: My javascript and CSS files became a mess because of stupid IE.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一念一轮回 2024-10-30 15:08:05

这似乎在 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>

This seems to work for me in 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 原文

花开半夏魅人心 2024-10-30 15:08:05

请参阅：jQuery 1.6.1、IE9 和 SCRIPT5009：' $' 未定义

用户 ID“Black”为我提供了正确的方向。

我是通过在对话框上使用 .AjaxForm 上传的。
之后，我用另一个 AjaxForm 替换该 Form。
然后我遇到了“$未定义”或“jQuery未定义”的错误
主要原因是我对第二个对话框应用了“render :layout => false”。这就是为什么所有 js 库（包括 jQuery ）都没有正确加载。

所以，对于第二次对话的部分内容，我必须补充一下。

回复收藏 0 原文

揽月 2024-10-30 15:08:05

尝试这样的操作，看看是否可以解决问题：

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

应该做的是将现有表单的内容替换为响应中返回的元素的内容。而不是替换整个表单元素并再次执行JS。它可能会解决您的问题。

Try something like this to see if it resolves the problem:

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

What this should do is replace the contents of the existing form with the contents of the element returned in the response. Instead of replacing the entire form element and executing JS again. It may work around your problem.

回复收藏 0 原文

无人问我粥可暖 2024-10-30 15:08:05

你可以尝试这样的事情：

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

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

用这种方法你可以将 $ 封装在函数中，并且它不会被其他 js 框架弄乱（如果你使用任何框架）。我不知道这是否适用于 IE，我无法测试它，但希望它会:)

You could try something like this:

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

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

with that approach you encapsulate the $ within the function and it can't be messed up from other js frameworks (should you use any). I don't know if that will work with IE and I can't test it but hopefully it will :)

回复收藏 0 原文