Question 288452 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why does this jQuery AJAX post request throw an error despite the fact that the post is successful?

I have made a blogging application in Laravel 8.

I am currently working on submitting comments and comment replies via jQuery AJAX.

The comment form template (viewsthemescalvinpartialscomment-form.blade.php):

<div class="form-wrapper">
    <div class="alert-box-ajax alert-box alert-box--success">
        Your comment is pending
    </div>

    <div class="alert-box-ajax alert-box alert-box--error">
        Failed to add comment!
    </div>

    <form class="commentForm" method="post" action="{{ route('comment.submit') }}" autocomplete="off">
        @csrf
        <fieldset>
            <input type="hidden" name="article_id" value="{{ isset($article->id) ? $article->id : $article_id }}">
            <input type="hidden" name="parent_id" value="{{ $comment->id ?? '' }}">

            <div class="message form-field">
                <textarea name="msg" id="message" class="h-full-width" placeholder="Your Message" required></textarea>

                @error('msg')
                <p class="help-block text-danger">{{ $message }}</p>
                @enderror
            </div>
            <br>
            <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
        </fieldset>
    </form>
</div>

In the scripting file I have:

$(".commentForm").each(function () {
  var form = $(this);
  form.validate({
      errorElement: "p",
      errorClass: "help-block text-danger",

      submitHandler: function (_form, event) {
          event.preventDefault();
          var $fields = form.find("textarea"),
              url = form.attr("action"),
              data = form.serialize();
          $.ajax({
              dataType: "json",
              type: "post",
              url: url,
              data: data,
              cache: false,
              success: function () {
                form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
                      .slideDown(250)
                      .delay(2500)
                      .slideUp(250);
                $fields.val("");
              },
              error: function () {    
                form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
                      .slideDown(250)
                      .delay(2500)
                      .slideUp(250);
              },
          });
      },
  });
});

The jQuery version used is 3.5.0.

The problem

Even though the comments are successfully submitted, the alert made visible is <div class="alert-box-ajax alert-box alert-box--error">Failed to add comment!</div>, because the script executes error, not success.

The Network tab shows two statuses, in this order: 302 and 200.

What am I doing wrong?
Tags:

2

Answers


  1. 0

    It might be that you use a > 3 jQuery:

    Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

    Login or Signup to reply.
  2. 0

    seems like the issue lies in the way you’re handling the response in the success and error callbacks of the AJAX request. In your success callback, you’re not checking the response or its status to determine whether the submission was successful. Instead, you’re just sliding down the success alert

    success: function (response) {
    if (response.success) {
        form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250);
        $fields.val("");
    } else {
        form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250);
    }
},
error: function () {
    form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250);
},

    Don’t forget to return a response from your controller method so u can check and confirm here on your blade file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search