1

我刚开始尝试 jqModal 并且遇到了一个奇怪的问题。

模态窗口正确显示，但是当我单击其中的任何位置时出现 javascript 错误。当我查看有问题的代码行时，发现 jqModal 试图运行我的整个页面，就好像它是一大段 javascript。

自从我写了这篇文章后，我发现代码在 FireFox 中运行良好。问题当然是IE。

我的标记：

<script type="text/javascript">

    $(document).ready(function () {

        $('#jqmWindowContainer').jqm({ 
            modal: true,
            ajax: '<%: Url.Action("Save", "AssetSearch") %>',
            onHide: myAddClose
        });

        function myAddClose(hash) {
            hash.w.fadeOut('300', function () { hash.o.remove(); });
        }

    }); 

    </script> 


<a href="#" class="jqModal display-field-right">Save this search</a>  
<span id="jqmWindowContainer" class="jqmWindow">  
</span>

模态窗口标记：

<div id="modalWindow" class="jqmWindow">  

    <% using (Ajax.BeginForm("Save", "AssetSearch", new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "modalWindow" }))
                {%>

                <!-- Validation summary -->
                <div class="validation-summary">
                    <%=ViewData["Message"]%>
                </div>

                    <%=Html.LabelFor(x => x.Name)%> 
                    <%=Html.TextBoxFor(x => x.Name)%> 


                <!-- Submit button -->
                <div class="submit-form">
                    <input type="submit" value="Save" /> 
                </div>
                <%
                }%>

</div>

<a class="jqmClose" href="#">Close</a>

单击“保存此搜索”链接正确显示模式窗口。单击模式中的任意位置会导致此错误：

行：5 错误：对象不支持此属性或方法

当我查看它试图执行的代码时，结果是我的整个页面当然会触发错误：

替代文字

我不知道什么会导致这种行为。如果我继续跳过错误，则窗口可以正常工作，并且当我单击“保存”时会调用我的操作方法。帮助！

谢谢！

瑞克

4

4 回答 4

1

您使用哪个版本的 jQuery 和 jqModal？

如果您使用 jQuery 1.4.x，您应该验证 jqModal.js 是否包含$()（例如{$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);}在jqModal.js中）。这不能与 jQuery 1.4.x 一起使用。要解决问题，请替换$()为$(document).

更新：在您发布有问题的网站的链接后，我可以分析问题。如果单击“保存此搜索”，它将从http://camp.matrix6.com/matrix6studios/AssetSearch/Save?randomId=332557加载 div 。结果将用作 jqModal 的对话框 div。目前 div 如下所示：

<div class="jqmPopupForm" id="jqmPopupForm">
    <div id="loadingMessage" style="display: none;">
        Saving...
    </div>
    <form action="/matrix6studios/AssetSearch/Save"
          method="post"
          onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
          onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: &#39;Post&#39;, loadingElementId: &#39;loadingMessage&#39;, updateTargetId: &#39;jqmPopupForm&#39; });">
    <div class="sign-in-validation-summary">
    </div>
    <fieldset>
        <legend>Save Your Search</legend>
        <ol>
            <li>
                <label for="Name">
                    Name</label>
                <input id="Text1" name="Name" type="text" value="" />
            </li>
        </ol>
    </fieldset>
    <fieldset class="submit">
        <input type="submit" value="Save" />
    </fieldset>
    </form>
</div>
<a class="jqmClose" href="#">Close</a>

如何查看表单元素的属性onclick和onsubmit最终产生错误的属性。如果单击表单内部，您会看到错误，因为“Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));” 无法调用。如何在http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js中看到（ http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js的未压缩版本您使用的）它有Sys.Mvc.AsyncForm.handleSubmit但没有 Sys.Mvc.AsyncForm.handleClick功能。如果您将使用当前 MVC 项目（可能是 MVC 2.0）中的 MicrosoftMvcAjax.js 会很容易，因为在Microsoft Ajax CDN上你不会找到 MVC 2.0。更好的是只创建关于 jQuery 的对话框，而不需要任何 MVC 控件。

这是主要错误，但您的代码中还有其他一些小问题。例如，您应该从以下代码片段中删除 '}' 之前的逗号

<script type="text/javascript">
    $(function () {
        $("#accordion").accordion({
            event: "mouseover",
            alwaysOpen: false,
            autoHeight:false,
            navigation: true,
        });
    });
</script>

下一个问题是：您的代码有两个具有 id="jqmWindowContainer" 的元素。

您的代码有行

<link rel="stylesheet" type="text/css" media="screen"
      href="http://camp.matrix6.com/content/css/jqModal.css" />
<script type="text/javascript"
        src="http://camp.matrix6.com/Content/js/jqModal.js"></script>

在 HTML 代码的中间。这个不允许。该<link>元素应移动到<head>. 此外，您在一页上包含两次<link href=".../jqModal.css">和<script src=".../jqModal.js"></script> 两次的代码，这也很糟糕。您不应在同一页面上两次加载 jqModal.js。如果将代码移动到 ，<head>则只能放置一次。

我可以继续处理不太重要的错误来保留您使用的 XHTML 1.0 Strict。例如，您应该将<fieldset>元素放在里面和<form>上面等等。我建议您在http://validator.w3.org/中验证您的页面。<ul><li>

于 2010-10-28T23:58:34.720 回答
0

我认为你的代码：

function myAddClose(hash) {
    hash.w.fadeOut('300', function () { hash.o.remove(); });
}

需要在错误的范围内。通过将该代码移出

 "$(document).ready(function (){})

代码

于 2010-10-29T23:58:55.320 回答
0

我正在Sys.Mvc.AsyncForm.handleClick is not a function使用 Firefox。我假设您使用 ASP.NET MVC 版本 2，但在您的页面中，您有对http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js的引用，它来自 MVC 版本 1 并且没有Sys.Mvc.AsyncForm.handleClick功能。如果您使用 MVC 2，您应该参考相应版本的 javascript 文件。

于 2010-10-30T00:41:20.143 回答
0

我在 Chrome 中也遇到了一个非常相似的错误......

这与 jquery 1.4.2 中处理方式的重大更改有关$()，因为 jqmodal 从未更新为与 jquery 1.4.x 系列一起使用。

检查此链接http://jquery14.com/day-01/jquery-14#backwards（列表中的第 4 项）

你可以做些什么来缓解这个问题：（以下所有选项都是互斥的）

  • 将 jquery 1.4.2 替换为 jquery 1.3.1 或类似版本
  • 使用 jquery 团队发布的这个兼容性插件来缓解升级问题
  • 手动检查 jqmodal.js 的源代码并修复任何破坏性的不兼容性。（如替换$()为$(document)等）
于 2010-10-30T01:43:28.063 回答