Ajax 评论表单不返回 ExpressionEngine 成功模板内容答案

【问题标题】：Ajax Comment Form Not Returning ExpressionEngine Success Template ContentAjax 评论表单不返回 ExpressionEngine 成功模板内容
【发布时间】：2012-10-30 00:26:49
【问题描述】：

所以我有一个与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 版本上已经成功完成了，所以我想知道他们最近是否更改了某些内容以使其不再工作？

【问题讨论】：

您是否检查了 firebug/chrome 网络选项卡以查看向您的 ajax 调用返回的 HTTP 响应？截图会很有帮助。也可以试试console.log(data)，而不是用$()包装。
@AdrianMacneil 我对网络选项卡不是超级好，但是如果我在打开网络选项卡的情况下提交完整的表单，“响应”选项卡是空白的。 console.log(data) 不返回任何内容，而 console.log($(data)) 返回一对空括号 ([])。相反，如果我提交一个空白表单并强制出错，我将获得 EE 通知模板的完整 HTML。你具体想要什么截图？
实际上，现在我认为这可能正是您通过 AJAX 发布表单时 EE 的工作方式。请参阅下面的更详细的答案。

标签： jquery ajax expressionengine jquery-forms-plugin

【解决方案1】：

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

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

【讨论】：

我尝试了您的示例代码（您需要在alert-box 之前有一个句点，顺便说一句）并得到了完全相同的结果。错误返回正常，但成功提交返回完全空白。
该死的，你有一个网址我们可以看看？
很遗憾，它是 NDA 网站。您可以在 2.5.3 站点上复制该行为吗？这将帮助我了解这是 EE 问题还是我的特定设置有问题。

【解决方案2】：

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

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

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>');
    }
}

【讨论】：

该解决方案的问题是无法处理错误消息。基本思想是 ajax 加载从服务器返回的任何消息。我之前在以前的 EE 联系表上使用过该插件，并且效果很好。我想知道他们是否在导致此冲突的最新版本中更改了某些内容？
您已将 ajaxReturn 函数分配给 ajaxForm success 变量 - 如果提交不成功，它肯定不会运行？
据我了解，就Ajax而言，“成功”只是表示表单提交是否成功发送到服务器并收到响应。它无法知道它返回的响应是特定于 ExpressionEngine 的错误还是成功。话虽如此，我找到了一个旧论坛帖子Rob Sanchez points out，我可以在 EE 错误消息模板中搜索常见的 html，并根据该代码是否存在有条件地执行操作。
好吧，在这种情况下，EE 似乎在成功时不返回任何内容，并且在错误时返回错误消息。看看我上面的更新 - 这行得通吗？
关于 jQuery 加载的 FWIW 以及我喜欢分配的一个事实是，您实际上可以使用 id 拉入特定的 html，例如：$('.alert-box').load('/通知/成功#container');

【解决方案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 问题，而不是 EE 问题。不过，我鼓励你submit a bug report。
我为此向 Ellis 提交了一份错误报告，以便我们看看他们怎么说。