Cannot read jQuery Ajax Error

Question

I have a script that is supposed to send form data to a PHP script via ajax. Unfortunately it is not working I know that $.ajax is having an error, but I have no clue how to view that error, at the moment i have it set so error just alerts 'fail'. Without being able to find the source of the error, solving this issue is proving very tricky, how can I view this error? I have no experience debugging ajax :S Thanks!

        $('.jSubmit').click(function() {

        var form_data = $(this).closest('form').serialize();
        var form_id   = $(this).closest('form').attr("id");

        function text_success(return_data) {

            if(form_id == "page_form") {
            $('#trans_div').append('<div id="pop_up"><div>Thank you, we will be in touch shortly.</div></div>');
            $('#trans_div').css('display','block').animate({opacity: 0.9}, 800, function() {

                $('#trans_div').delay(1500).animate({opacity: 0.0}, 800, function() {

                        $(this).css('display','none');

                });

            });

            $(this).closest('form').find("input[type=text], textarea").val("");
            }
            else
            {
            //$('.form_bottom_text').html(return_data);
            alert('no');
            }

        }


        function text_failure() {

            if(form_id == "page_form") {
            //$('#trans_div').css('display','block').animate({opacity: 0.9});
            //$('#trans_div').append('<div id="pop_up"><div>Failed to send message.</div></div>');
            //$(this).closest('form').find("input[type=text], textarea").val("");
            alert('failed');
            }
            else
            {
            $('.form_bottom_text').html('Error Occurred');
            }

        }


            $.ajax ({
            url:"form.php",
            type:'POST',
            data: form_data,
            success: function(return_data) {
                text_success(return_data);
                },
            error: function() {
                //text_failure();
                alert('fail');
                }               
            });


        });

possible duplicate of [How to get the jQuery $.ajax error response text?](http://stackoverflow.com/questions/1637019/how-to-get-the-jquery-ajax-error-response-text) — Nix, Feb 13 '13 at 04:13

rockerest · Answer 1 · 2013-02-13T04:20:43.980

0

Why don't you fully utilize the callbacks you're implementing and pass the appropriate parameters into "error"?

From the .ajax documentation:

Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred.

So this:

error: function() {
    //text_failure();
    alert('fail');
}

Should be this:

error: function( x, stat, msg ) {
    //text_failure();
    console.error( x.responseText );
    console.error( x.status );
    console.info( x.statusText );
    console.log( msg );
}

You'll probably find out pretty fast what's happening.

edited Feb 13 '13 at 04:20

answered Feb 13 '13 at 04:15

rockerest

10,412
3
37
67

Tried, the alert comes up empty/blank – Melbourne2991 Feb 13 '13 at 04:17
do I check the browser console? – Melbourne2991 Feb 13 '13 at 04:39
if so, im still getting nothing arrgghh this is driving me up the wall – Melbourne2991 Feb 13 '13 at 04:40

score 0 · Answer 2 · answered Feb 13 '13 at 04:18

you can do something like this for all AJAX requests

$(function() {
    $.ajaxSetup({
        error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
    });
});

Also you can use the parameters for the error callback like this

 $.ajax ({
            url:"form.php",
            type:'POST',
            data: form_data,
            success: function(return_data) {
                text_success(return_data);
                },
error: function(e, status, txt ) {


}
});

Check this article

score 0 · Answer 3 · answered Feb 13 '13 at 07:35

0

Oddly the problem behind the entire issue was that by tag for my submit button had a type="submit" , altering that fixed the issue.

answered Feb 13 '13 at 07:35

Melbourne2991

11,707
12
44
82

Cannot read jQuery Ajax Error

3 Answers3