Search code examples
jqueryajaxexpressionenginejquery-forms-plugin

Ajax Comment Form Not Returning ExpressionEngine Success Template Content

So I have a basic comment form hooked up with the jQuery Form plugin (only members can post so no name/email fields):

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

And, for the purposes of this demo, my success template could not be more simple:

<p>Sumission Successful!</p>

Unfortunately when I submit a completed form, no data is returned. If I add console.log($(data)); to the ajaxReturn function, I get an empty string. The comment is successfully submitted to the database, it’s just the return template that doesn't seem to make it.

Really not sure why this is happening. It returns error messages correctly, just not the success template.

EE v2.5.3

UPDATE: Here's a video that covers the basics of what I'm trying to do. I've successfully done it before on previous versions of EE, so I'm wondering if they changed something recently to make it not work anymore?

Solution

  • I haven't used the jQuery form plugin, but it looks like it doesn't work like you expect (EE doesn't seem to return the content of the success page if you post the form via AJAX).

    However, there's really no need for a whole separate template for such a simple success message. You could just do this in your return function:

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

    Alternatively, if you absolutely must use a separate template (for consistency with non-JS browsers or whatever), you could just use the jQuery load() function to get its contents:

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

    The second option would result in one more AJAX call to your server, but it's not really a big deal in the scheme of things. If you want the best performance, go with the first option.

    UPDATE: If errors are also returned for your success function, what about this?

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