1

jqModal の実験を始めたばかりで、奇妙な問題が発生しています。

モーダル ウィンドウは正しく表示されますが、ウィンドウ内の任意の場所をクリックすると JavaScript エラーが発生します。問題のあるコード行を見ると、jqModal がページ全体を 1 つの大きな 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 に (たとえば jqModal.js に) 含まれているかどうかを確認する必要が$()あります。jQuery 1.4.x とは併用できません。問題を修正するには、 に置き換えます。{$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);}$()$(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 は見つかりません。MVC コントロールを使用せずに、jQuery のみに関してダイアログを作成することをお勧めします。

これが主なエラーですが、コードには他にもいくつかの小さな問題があります。たとえば、次のコード フラグメントから「}」の前のカンマを削除する必要があります。

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

次の問題は、コードに id="jqmWindowContainer" を持つ 2 つの要素があることです。

あなたのコードには行があります

<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">さらに、1 つのページにとのコードを<script src=".../jqModal.js"></script> 2 回含めますが、これも非常に悪いことです。同じページに jqModal.js を 2 回ロードしないでください。コードを に移動すると、<head>一度だけ配置できます。

あなたが使用しているXHTML 1.0 Strictを保持するために、重要度の低いエラーを続けることができます。たとえば、<fieldset>要素を内側<form>や<ul>上<li>に配置する必要があります。http://validator.w3.org/でページを検証することをお勧めします。

于 2010-10-28T23:58:34.720 に答える
0

Chromeでも非常によく似たエラーが発生します...

$()jqmodalがjquery1.4.xファミリで動作するように更新されたことはないため、jquery1.4.2での処理方法の重大な変更と関係があります。

このリンクを確認してくださいhttp://jquery14.com/day-01/jquery-14#backwards（リストの4番目の項目）

この問題を軽減するためにできること:(以下のすべてのオプションは相互に排他的です）

  • jquery1.4.2をjquery1.3.1または同様のものに置き換えます
  • アップグレードの問題を緩和するために、jqueryチームによってリリースされたこの互換性プラグインを使用してください
  • jqmodal.jsのソースを手動で調べて、重大な非互換性を修正します。$()（置換$(document)など）
于 2010-10-30T01:43:28.063 に答える
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 functionFirefoxに入っています。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 に答える