0

Jquery を使用してフォーム送信をインターセプトし、代わりに Ajax 送信を行うアプリケーションを開発しています。ここまでは順調ですね！クライアントで JS が有効になっていない場合、アプリは問題なく動作し続けます。

さて、今日新しいフォームを作成しましたが、JQuery は送信をインターセプトしません。私が少し変わったのは事実ですが、それでもなおです。それは働いているはずです。

フォーム、スパン、2 つのボタン (いいえ (ボタン) とはい (送信)) を持つ単純な PartialView があります。RenderPartial("MyPartial") を DIV に使用し、プラグイン FancyBox を使用してモーダルとして表示します。どのリンクをクリックしてモーダルを表示するかによって、フォームのアクション (スパムの報告またはアイテムの削除) と特定のメッセージのスパンを変更します。「派手な」確認メッセージのように!!

繰り返しますが、これまでのところとても良いです。フォーム アクションを変更すると機能します (alert(form.attr(action)) を使用して、適切なメッセージでスパンを変更すると機能しますが、ボタンをクリックしてフォームを送信すると (YES)、まっすぐ進みますそして、私はAjaxリクエストではなく、通常のリクエストを行いました。

これは次の形式です。

<form id="dialogForm" action="" method="post">
  <div class="form_item_button">
     <span id="dialogQuestion" style="color: Black;"></span>
     <button id="btDialogNo" type="button" value="button" class="btn">No</button>
     <button id="btDialogYes" type="submit" value="Submit" class="btn">Yes</button>
  </div>
</form>

そして、これはフォーム送信をインターセプトするスクリプトです:

    $(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(alert(theForm).attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();

             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });

アイデアはありますか？私はそれを修正しようとして一日を失いました!! :(

ありがとう

4

3 に答える 3

0

送信ボタンにの<button>代わりに を使用していることに気付きました。<input>

私の知る限り、これで問題ないはずですが、次のように、イベント ハンドラー関数が呼び出された直後にアラートを作成します。

    alert(e.attr("id"));

何も返されない場合、問題は、送信ボタンをクリックすると、リッスンされたイベントがトリガーされていることです。つまり、フォームが送信されています。

ただし、フォームではなくボタンのIDを返す場合、問題はおそらくフォームではpreventDefaultなくボタンで使用していることです（またはその逆）。return falseこれは、 を使用して を完全に削除するだけでおそらく修正できe.preventDefault()ます。

ただし、上記のいずれにも当てはまらず、submit を押したときにアラートが表示される場合は、スクリプトのタイミング (preventDefault を実行している場所) に問題がある可能性があります。

ちなみに、ajax はまったく発生していますが、フォームの送信も行われていますか、それとも関数全体が無視されていますか?

検証以外に検証機能に何かを追加しない限り、何があっても送信するフォームがありました。最終的には、間違ったイベントがトリガーされたことに関係していました。私が追加した余分な作業により、私が聞いていたイベントが最終的に追いつくようになりました。

于 2010-01-18T06:47:33.680 に答える
0

2 つの問題。

  1. アラートに使用している回線。
  2. ajax 呼び出しにいくつかの右中括弧がありません。

これがコードです...

$(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(theForm.attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();
            alert('here');
             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });
});​​​​

楽しみ。

于 2010-04-29T14:49:19.647 に答える
0

preventDefault()廃止されたようです。ドキュメントから削除されたかどうかはわかりませんが、これはsubmit()イベントハンドラーで同じ効果を得るための新しい方法です:

 theForm.submit(function(e) {
  blah blah blah
  .............
  return false;
  }

それがうまくいくかどうか教えてください。私は間違いなく興味があります。

于 2010-01-18T01:38:36.667 に答える