0

Ajax.ActionLink を介してパーシャルをロードする MVC ページがあり、これが機能し、ロードされたパーシャルには Ajax.BeginForm を持つフォームが含まれています。このフォームは目立たない ajax に接続されておらず、代わりにページの更新を実行しています (送信をクリックするとイニシエーターが jquery ではなくブラウザーであることを示すブラウザーのネットワークログでこれを確認しました)。

問題は、ページが読み込まれたときにフォームが存在しなかったため (後で Ajax.ActionLink を介して追加された)、目立たない ajax が新しく追加されたフォームの data-ajax 属性を認識しなかったことです。必要なイベントを接続します。これは document.ready でのみ発生すると想定しており、その時点では ajax フォームは存在しませんでした。

「邪魔にならない Ajax さん、data-ajax でマークされた新しい要素がいくつかあるので、私のページをもう一度見てください」と言うためにできることはありますか?

ありがとう。

目立たない ajax ソースを見ると、次のようになっています。

$("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
...

生成されたフォーム タグは次のようになります。

<form action="/Path/Create" class="form-horizontal" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#ParentContainer" id="PathForm" method="post" novalidate="novalidate">

私が知る限り、.live イベントのセレクターは、ページに読み込まれたときに新しいフォームを取得する必要があります。ただし、フォームはブートストラップモーダル内にあるため、イベントが何らかの形で発生するのを妨げているかどうかはわかりません。

これを Chrome コンソールで実行することもできます。

 $("form[data-ajax=true]").live("submit", function (evt) {
            var clickInfo = $(this).data(data_click) || [];
            evt.preventDefault(); });

フォーム要素は正常に返されますが、送信をクリックすると、ページ全体が更新されます。preventDefault に配線したので、少なくとも何もしないと思います。

4

1 に答える 1

0

目立たない ajax と動的に読み込まれるコンテンツに関する私自身の質問に答えるには、そのままで問題なく動作するはずです。.live(deprecated, still works currently ) を使用してイベントに接続する方法は、ページに動的に読み込まれるフォームを検出する必要があります。 したがって、目立たない検証と同じ問題に悩まされることはないようです。

私たちの問題はそれとは無関係でした。フォーム内からモーダル div を生成するブートストラップ モーダルを使用していました。次に、モーダルがフォームを含む別のページをロードしたので、フォーム内にフォームがあることに気付きました (他のフォームがモーダルにあったため、実際にはそのようには見えませんでしたが)。

これを解決するために、最初のフォームのモーダル div の宣言をフォームの外に移動しました。モーダルを参照して表示するリンクを作成することはできますが、モーダルの内部フォームが最初のフォームにネストされないわけではありません。

これにより、.live メソッドと .on メソッドの両方がイベントをキャッチできなかった理由は、ドキュメントにバブルアップするイベントに依存しているためであり、Ajax フォームではない外部フォームまでしかバブルアップしなかったためだと思います。 、したがって、セレクターと一致しませんでした。

別の解決策は、イベントが最初に外部フォームに到達するドキュメントに範囲を限定するのではなく、イベントが内部フォームのコンテナーにバブルアップしたときにイベントがキャッチされるように、このように .on を記述することでした。

$('#innerModalId').on("submit", "form[data-ajax=true]", function (evt) {
   evt.preventDefault(); 
   ...
   return false 
});

ただし、これはライブラリの一部であるため、コードを繰り返す必要があったため、理想的なソリューションではありません。目立たない ajax の更新までには至りませんでした: http://nuget.org/packages/jQuery.Ajax.Unobtrusive

しかし、ページ構造の問題のために .on を使用してもまだ機能しなかったため、まだ問題があったと思います。

于 2012-11-08T18:54:54.507 に答える