2

したがって、 jQuery Form プラグインに接続された基本的なコメントフォームがあります(メンバーのみが投稿できるため、名前/電子メール フィールドはありません)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="/assets_site/js/jquery.form.min.js"></script>
  <script>
    $(document).ready(function(){

      function ajaxReturn(data) {
        var messageContainer = $('.alert-box');
        var messageBody = $(data);
        messageContainer.html(messageBody);
      }// ajaxReturn(data)

      $('.member-review').ajaxForm({
        success: ajaxReturn
      });
    });
  </script>

</head>
<body>
    {exp:channel:entries
      channel='products'
      limit='1'
      disable='categories|member_data|pagination'
    }
      {exp:comment:form
        channel='products'
        form_class='member-review'
        return='notifications/success'
      }
        <div class="alert-box">
          {!-- Ajax Form Errors --}
        </div><!--.alert-box-->

        <label for="comment">Tell others what you think</label>
        <textarea name="comment" rows="8" class="required" id="comment"></textarea>

        <input type="submit" value="Submit">
      {/exp:comment:form}
    {/exp:channel:entries}
</body>
</html>

そして、このデモの目的のために、私の成功テンプレートはこれ以上単純ではありません。

<p>Sumission Successful!</p>

残念ながら、完成したフォームを送信しても、データが返されません。console.log($(data));ajaxReturn 関数に追加すると、空の文字列が返されます。コメントはデータベースに正常に送信されました。それは、それを作成していないように見えるリターン テンプレートです。

なぜこれが起こっているのか本当にわかりません。成功テンプレートではなく、エラー メッセージを正しく返します。

EE v2.5.3

更新: これは、私がやろうとしていることの基本をカバーするビデオです。以前のバージョンの EE で以前に成功したことがあるので、最近何かを変更して機能しなくなったのではないかと思っています。

4

3 に答える 3

1

ドキュメントhttps://github.com/malsup/formには、ajaxForm は送信用のフォームを準備するだけで、送信はしないことが記載されています。これを実行するとどうなりますか?:

$('.member-review').on('submit', function(e) {
    e.preventDefault(); 
    $(this).ajaxSubmit({
        target: '.alert-box'
    })
});
于 2012-10-30T00:54:52.827 に答える
0

これがバグかどうかは確認されましたか？私は同様の問題を抱えています。新しい EE バージョンでテストしていた開発サイトがあり、ページを更新すると更新が表示されるため、実際に送信されても​​ ajax 投稿は成功メッセージを返しません。ライブ サイトで古いバージョンを実行している場合、成功と応答が得られます。この投稿を見つけるまで、サーバーに問題があると思っていました。

また、テンプレート ページの読み込みを使用して更新していますが、json 応答を使用できればいいので、別のページに余分な呼び出しを行う必要はありません。これは私がライブで使用しているもの (古い EE バージョン) であり、適切に動作します。

    var update_cart_form_options = { 
        success: update_cart,  
        dataType: 'json' 
    };
    function update_cart(data, statusText, xhr, $form)  {   

        if (data.success) {                                                   
            $("input[name=XID]").val(data.XID);
            $('#cart_total')        .html( data.cart_total );
            $('#cart_subtotal')     .html( data.cart_subtotal );
        }  
        return false; 
    }      

    $("#update_button").click(function(){
        $('#update_button').val('Processing...');
        var form = $(this).closest("form"); 
        $(form).ajaxForm(update_cart_form_options);
        $(form).submit();  

});

しかし、同じコードは、最新の EE バージョンでテストしている開発サイトでは機能しません。

于 2013-01-11T15:11:32.580 に答える
0

jQuery フォーム プラグインは使用していませんが、期待どおりに動作しないようです (AJAX 経由でフォームを投稿すると、EE は成功ページのコンテンツを返さないようです)。

ただし、このような単純な成功メッセージのために完全に別個のテンプレートを作成する必要はありません。return関数でこれを行うことができます：

function ajaxReturn(data) {
    $('.alert-box').html('<p>Sumission Successful!</p>');
}

別の方法として、絶対に別のテンプレートを使用する必要がある場合 (非 JS ブラウザーなどとの一貫性のため)、jQueryload()関数を使用してそのコンテンツを取得できます。

function ajaxReturn(data) {
    $('.alert-box').load('/notifications/success');
}

2 番目のオプションを使用すると、サーバーへの AJAX 呼び出しがもう 1 回発生しますが、実際には大したことではありません。最高のパフォーマンスが必要な場合は、最初のオプションを使用してください。

更新:成功関数でもエラーが返される場合、これはどうですか?

function ajaxReturn(data) {
    if (data) {
        $('.alert-box').html(data);
    } else {
        $('.alert-box').html('<p>Sumission Successful!</p>');
    }
}
于 2012-10-30T22:59:47.717 に答える