Error with Ajax jQuery

Question

I have an error in my code with Ajax function on $(".addClick"); When I click on trigger, it's alert me "Error saving click". I tried to find out what the error, but I could not. Poor knowledge of Ajax, but has long been working with PHP, HTML, MySQL and CSS.

Here is my code:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        var user_subid = "b5tl99gvutf4d6m02tnstr7lh3";
        var fileid = "2408";

        function checkSurvey() {
            return $.ajax({
                url: "checkSurvey.php",
                method: 'GET',
                data: "user_subid=" + user_subid + "&" + "fileid=" + fileid,
                statusCode: {404: function () {
                    $('.status').html("<p>File for cheking survey was not found.</p>");
                }},
                async: false,
                success: function (data) {
                    if (data == 0) {
                        setInterval(function () {
                            checkSurvey();
                        }, 5000);
                        $('.status').html("<p><img src='preloader.GIF' /> Please check survey and don't close this Window...</p>");
                    }
                    if (data == 1) {
                        $('.status').html("<p>You can download your file. Please wait or <a href=\"http://www.filecash.net/downloader/survey.php?file=5342fa2b23f4b\">click here</a>.</p>");
                        $('.status').removeClass("alert-info");
                        $('.status').addClass("alert-success");
                        location.reload();
                    }
                    if (data != 1 && data != 0) {
                        $('.status').html("<p>" + data + "</p>");
                    }
                }
            });
        }

        //end function checkSurvey
        var clicked = 0;
        $('.addClick').bind('click', function (e) {
            $.ajax({
                url: "clickSave.php",
                method: 'POST',
                error: alert("Error saving click"),
                data: "user_subid=" + user_subid + "&" + "fileid=" + fileid,
                statusCode: {404: function () {
                    $('.status').html("<p>File not found.</p>");
                }},
                success: function (data) {
                    if (clicked == 0) {
                        clicked = 1;
                        $('.status').addClass("alert alert-info");
                        $('.status').html("<p><img src='preloader.GIF' /> Loading...</p>");
                        checkSurvey();
                    }
                }
            });
        });
    });
</script>

Thanks in advice.

Answer 1

Try this:

$.ajax({
    url:"clickSave.php",
    type:'POST ', // correct method: 'POST' is incorrect. Same goes for every other ajax calls
    error:  alert("Error saving click"),
    data:"user_subid="+user_subid+"&"+"fileid="+fileid,
            statusCode:{404: function(){
        $('.status ').html("<p>File not found.</p>");
                }},
    success:function(data){
        if(clicked==0){
            clicked=1;
            $('.status ').addClass("alert alert-info");
            $('.status ').html("<p><img src='preloader.GIF ' /> Loading...</p>");
            checkSurvey();
        }
    }
});

Answer 2

To diagnose the problem you can modify your error handling function to display more details:

instead of:

error:  alert("Error saving click"),

try:

error: function(jqXHR, textStatus, errorThrown) {
  alert(textStatus);
  alert(errorThrown);
},

You should check the request&response of your ajax call in Firebug/WebDev or similar web browser tools.

Answer 3

Try This

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var user_subid="b5tl99gvutf4d6m02tnstr7lh3", fileid="2408",clicked=0;
$(document).ready(function() {
    $('.addClick').bind('click', function(e) {
        $.ajax({
            url:"checkSurvey.php",
            method:'POST',
            error: function(){ alert("Error saving click")},
            data:"user_subid="+user_subid+"&"+"fileid="+fileid,
            statusCode:{404: function(){
            $('.status').html("<p>File not found.</p>");
            }},
            success:function(data){
                if(clicked==0){
                    clicked=1;
                    $('.status').addClass("alert alert-info");
                    $('.status').html("<p><img src='preloader.GIF' /> Loading...</p>");
                    checkSurvey();
                }
            }
        });
    });
});

function checkSurvey() {
    return $.ajax({
        url:"checkSurvey.php",
        method:'GET',
        data:"user_subid="+user_subid+"&"+"fileid="+fileid,
        statusCode:{404: function(){
            $('.status').html("<p>File for cheking survey was not found.</p>");
        }},
        async: false,
        success:function(data) {
            if(data==0) {   
                setInterval(function(){checkSurvey();}, 5000);
                $('.status').html("<p><img src='preloader.GIF' /> Please check survey and don't close this Window...</p>");
            }
            if(data==1){
                $('.status').html("<p>You can download your file. Please wait or <a href=\"http://www.filecash.net/downloader/survey.php?file=5342fa2b23f4b\">click here</a>.</p>");
                $('.status').removeClass("alert-info");
                $('.status').addClass("alert-success");
                location.reload();
            }
            if(data!=1 && data!=0) {
                $('.status').html("<p>"+data+"</p>");
            }
        }
    });
}
</script>

You did mistake at some places that i have corrected

1) Function in jQuery is defined outside the document ready.

2) In your Ajax call the error function was not defined properly

Note: And please make sure that "url" for "checkSurvey.php" that you have given in ajax call is correct (i.e file must be present at given URL) other wise it will give the error that you are talking about.

Happy Coding!!