Question

所以我有一个与jQuery Form plugin相关联的基本评论表（只有会员可以发帖，所以没有姓名/电子邮件字段）：

<!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

更新 Here's a video，其中涵盖了我正在尝试的基础知识。我之前在EE的早期版本上已经成功完成了它，所以我想知道他们最近是否改变了一些东西以使它不再起作用了？

Answer 1

文档https://github.com/malsup/form提到ajaxForm只准备提交表单但不提交。当你运行这个时会发生什么？：

$('.member-review').on('submit', function(e) {
    e.preventDefault(); 
    $(this).ajaxSubmit({
        target: '.alert-box'
    })
});

Answer 2

我还没有使用jQuery表单插件，但看起来它并不像你期望的那样工作（如果发布表单，EE似乎没有返回成功页面的内容通过AJAX）。

但是，对于这样一个简单的成功消息，真的不需要一个完整的单独模板。您可以在返回函数中执行此操作：

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

或者，如果您绝对必须使用单独的模板（为了与非JS浏览器或其他任何一致），您可以使用jQuery load()函数来获取其内容：

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

第二个选项会导致对您的服务器再进行一次AJAX调用，但在这个方案中它并不是什么大不了的事。如果您想获得最佳性能，请选择第一个选项。

更新：如果您的成功函数也会返回错误，那么这个怎么样？

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

Answer 3

是否确认这是一个错误？我有类似的问题。我有一个开发站点，我正在测试更新的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版本的开发站点测试。

Ajax注释表单不返回ExpressionEngine成功模板内容

3 个答案: