0

モーダルウィンドウに複数のフォームがあります。誰かが送信ボタンを押すと、データはサーバーに正しく送信されます。わかりやすくするために、送信ボタンをクリックすると読み込み中の画像に変更し、データを送信すると「送信」や「成功」などのテキストに戻したいと思います。または何でも。問題は、私のフォームが動的に生成され、古い方法で送信されることです。

つまり、成功関数を作成して、データが送信されたときに読み込み中の画像をいくつかの成功テキストに戻すことができるようにするにはどうすればよいですか。

私のスクリプト：

          $.each(data.product.variants, function(index, variant){     

        contentHtml = contentHtml +
          '<div id="form">' +
          '<form class="formProduct" id="formProduct'+variant.id+'" action="{{ 'cart/add/' }}'+variant.id+'" >' + //method="post" delete this cause it needs to be GET
          '<div class="variants">' +
          '<div class="pop_variantTitle"><label><input type="hidden" id="variantId" value="' + variant.id + '" />' + variant.title + '</label></div>' +
          '<div class="pop_variantQuantity"><label">{{ 'Quantity' | t }}: <input type="text" name="quantity" id="formProductQuantity" value="1" /></label></div>' +
          '<div class="pop_variantAdd"><input type="submit" class="submit button green" id="submitter" value="In winkelwagen"/></div>' +
          '<div id="divMsg" style="display:none;"><img src="https://webshop.com/ajax-loader.gif" alt="Even geduld..." /></div>' +
          '</div>' +
          '</form>' +
          '</div>';
      });     
      $('.formProductContent').html(contentHtml);
    });     
    $().ready(function(){

      var form = $('form').attr('id');

      $(form).submit(function() {
        return false;
      });

       $('form').live('submit', function(){      

        $(this).replaceWith("<img src='https://webshop.com/ajax-loader.gif'>");
        $.get($(this).attr('action'), $(this).serialize(), function(response){

          // if succes

        },'json');
        return false;
      });
    });
   }
 });
return false;
 })
 </script>
4

3 に答える 3

1

IDやクラスを使ってみませんか？

これを試して：

$('form').live('submit', function(){      

        $(this).replaceWith("<img id=loading src='https://webshop.com/ajax-loader.gif'>");
        $.get($(this).attr('action'), $(this).serialize(), function(response){

          // if succes
         $('#loading').replaceWith("<img  src='https://webshop.com/success.jpg'>");  
        },'json');
        return false;
于 2012-08-11T22:32:56.140 に答える
1

これらの「非標準」の場合には標準のjquery-uiウィジェットを使用しないことをお勧めします。そうしないと、すぐに複雑すぎる方法で仕事をする多くのハックなコードになってしまいます。

代わりに、「保存」ボタンが実際にはフォームの「送信」ボタンなどである、独自のフォーム送信ダイアログ ウィジェットを作成することをお勧めします。

やなど.draggable()のjquery.ui 機能を使用すると、ダイアログを簡単に作成できます。.resizable().position()

ダイアログフォーム送信の処理

つまり、ダイアログを作成したら、次のようなことができます。

// $your_dialog is the main container for the whole dialog thing..
$('form', $your_dialog).submit(function(event){
    event.preventDefault();
    var dialog = this;

    // load data from the form to "data"

    $("button[type=submit]", this).html("Submitting...");

    $.ajax('/submission/url', {
        type:"POST",
        data:data,
    })
    .success(function(data){
        $("button[type=submit]", dialog).html("Success");
    })
    .error(function(data){
        $("button[type=submit]", dialog).html("Failure");
    });
});

コードに関するその他の注意事項

  var form = $('form').attr('id');
  $(form).submit(function() {
    return false;
  });

このコードが行うことは<form>、ページの (最初の) ID を取得することです。幸いなことに、実際にformは であり、2 回目の jQuery 呼び出しは ..$('form')

代わりにこれを使用しませんか？

  $('form').submit(function() {
    return false;
  });

.preventDefault()また、ハンドラーが false を返すようにする代わりに、デフォルトのイベント処理を防ぐために使用することが多くの理由で推奨されます。そう：

  $('form').submit(function(event) {
    event..preventDefault();
    // .. rest of your code ..
  });
于 2012-08-11T22:46:13.353 に答える
0

フォームを送信するとポストバックが発生するため、.ready（）イベントに何かを追加するか、ajaxを使用して成功のコールバックを提供する必要があります。

于 2012-08-11T22:33:21.543 に答える