Jquery Ajax error handling fail

Question

I'm trying to handle errors sent from php script. Here is my code:

<script>
$(document).ready(function() {
    $('#signUpForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: "process.php",
            data: $("#signUpForm").serialize(),
            success: function(data) {
                if ((data == "Incorect email format.") || (data == "Username must be between 6-32 signs and only include 0-9, A-Z   characters.") || (data == "Password must be between 8-32 signs and only include 0-9, A-Z characters.") || (data == "Passwords do not match.") || (data == "Username is taken, please try another one.")) {
                    $('#errors').show();
                    $('#errors').html(data);
                } else {
                    window.location.href = "http://localhost:8888";
                }
            }
        });
        return false;
    });
});
 </script>

Firebug shows that response is sent but errors aren't displayed. Where could be a problem? Thanks.

Try console.log(data) after success and see on firebug what it's actually coming for you. — RaphaelDDL
– RaphaelDDL, Commented Aug 13, 2013 at 20:31
when you say you are getting back data, did you try it from within the success function? please follow @RaphaelDDL's instructions and update on what you see. Also it will help if you can post the exact response you are sending back from your server. — Shaunak
– Shaunak, Commented Aug 13, 2013 at 20:32
@Shaunak Ok, I'll try to explain it. So if user input doesn't meet one of conditions I echo a message what's wrong. So a response from php would be "echo "Incorrect email format."" etc. I thought if sent response equals to given name in ajax script when I could separate errors and other messages e.g. "Your account was created". I'm quite noobie at ajax/jquery and if you could suggest me any smarter way to seperate php echoed messages, that would be welcome. — Saulius s
– Saulius s, Commented Aug 13, 2013 at 20:54
Yes actually there is a better way to handle this by sending back JSON response @Jeremy T has suggested. But lets try to figure out why yours is not working. Add a error:function(data){console.log(data)} callback after success and see what you get on console. That should tell you if your success is even getting called in the first place. — Shaunak
– Shaunak, Commented Aug 13, 2013 at 21:00

Shaunak · Accepted Answer · 2013-08-15 11:48:45Z

1

So according to our discussion in comments and you having new response sent back from server in JSON format, here is how you can render those errors:

Assuming following is your response (always validate your JSON response on site like this):

[{"status":"1","data":"Incorrect email format."},{"status":"2","data":"Username must be min 6 signs and only include 0-9, A-Z characters."},{"status":"3","data":"Password must be min 8 signs and only include 0-9, A-Z characters."}]

Now if you are getting this response in success function here is how you can render them on html:

success: function (data) {
    if (data) {
        $.each(data, function (index, obj) {
            $('#error').append('<div>' + obj.data + '</div>');
        });
    }
}

Here is a jsfiddle showing this in action

answered Aug 15, 2013 at 11:48

Shaunak

18.2k5 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy T · Accepted Answer · 2013-08-13 20:35:15Z

1

With code like that, I'd say the most likely reason is a string being a character or two off. Try putting a console.log(data) right before your if statement to see exactly what you're comparing against.

I'd suggest returning your errors in a slightly different format so problems like that can be more easily avoided. For example, if you had the server return some JSON, like:

{
    "status": 1,
    "errorMessage": "Incorrect email format."
}

then you could just test for a non-zero status code instead of having to make sure your entire string is exactly right.

answered Aug 13, 2013 at 20:35

Jeremy T

1,2931 gold badge10 silver badges16 bronze badges

Comments

Nick · Accepted Answer · 2013-08-13 20:47:36Z

0

Either use alert (data) to show which data you exactly get back and see if you made a typo or, like Jemery suggested, use json! That's way easier than comparing all the strings.

An example:

  $('#signUpForm').submit(function() {
    $.ajax({
    type: 'POST',
    url: "process.php",
    data: $("#signUpForm").serialize(),
    dataType: 'json',
    success: function (errorstatus) {
      if (errorstatus.status >= 1) {
       $('#errors').html(errorstatus.data);
      }
      else {
           window.location.href = "http://localhost:8888";
      }
    }
    });
  }

In PHP simply do:

$errorstatus = array(
  'status' => $status,
  'data' => $data
);

echo json_encode($errorstatus);

answered Aug 13, 2013 at 20:47

Nick

1691 gold badge6 silver badges16 bronze badges

Comments

viarnes · Accepted Answer · 2013-08-13 20:46:52Z

As @RaphaelDDL said, try a console.log(data) to see what's comming from your php script. But if you are able to edit process.php, I suggest returning an error code and storing the messages in your js code instead of returning a whole string. I mean:

success: function(data) {
    if (data) {
        var error = "";
        switch (data) {
            case 1 : error = "Custom error msg 1"; break;
            case 2 : error = "Custom error msg 2"; break;
            case 3 : error = "Custom error msg 3"; break;
            ...
        }
        $('#errors').show();
        $('#errors').html(error);
    } else {
        ...
    }
}

And your php script:

$error_code = 0;
...
if ($some_value !== $valid_value) {
    $error_code = 1; 
}
...
die($error_code);

Using die() to do this is the only way you ensure that you are not sending any other character to your js script.

Collectives™ on Stack Overflow

Jquery Ajax error handling fail

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related