Question

我刚开始尝试使用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错误：对象不支持这个属性或方法

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

alt text

我不知道会导致这种行为的原因。如果我继续错误，则窗口正常工作，单击“保存”时将调用我的操作方法。救命啊！

谢谢！

瑞克

Answer 1

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

如果您使用jQuery 1.4.x，则应验证jqModal.js是否包含$()（例如jqModal.js中的{$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);}）。这不能与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项目中的MicrosoftMvcAjax.js（可能是MVC 2.0）会很容易，因为在Microsoft Ajax CDN上您找不到MVC 2.0。更好的方法是在没有任何MVC控件的情况下创建关于jQuery的对话框。

这是主要错误，但您的代码中还存在其他一些小问题。例如，您应该从以下代码片段

中删除'}'之前的逗号

<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>和<ul>内<li>上，依此类推。我建议您在http://validator.w3.org/。

中验证您的网页

Answer 2

我认为你的代码：

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

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

之外来移动方法全局

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

码

Answer 3

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

Answer 4

我在Chrome中也遇到了类似的错误......

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

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

您可以采取的措施来缓解此问题：（以下所有选项均为互斥）

用jquery 1.3.1或类似的
使用jquery团队发布的Compatibility plugin来缓解升级问题
手动浏览jqmodal.js的源代码并修复任何破坏的不兼容性。（例如将$()替换为$(document)等）

jqModal试图运行我的整个页面！

4 个答案: