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

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

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

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

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

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>');
    }
}
于 2012-10-30T22:59:47.717 回答
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 回答