How to fire the ajax request on error? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to fire the ajax request on error? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have an ajax call using jquery.

$.ajax({
                type: "POST",
                url: "recorded-vigil.aspx/GetCameraTimeLineMinutes",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: data,
                error: function (xhr) {
                    $('.loader').hide();
                    alert('Error in fetching timeline. Please try again');
                    console.log(xhr);
                },
                success: function (results) {
                    $('.loader').hide();
                    $('#spnTimeSelect').html("Please select minute");
                    console.log('GetCameraTimeLineMinutes');

                    if (results != null && results.d != null && results.d.result != null) {
                        var HourSel = $("#MinuteSelect").empty();
                        for (var i = 0; i < results.d.result.length; i++) {
                            var Minute = i;
                            //if (results.d.result[i] == 1)
                            //    HourSel.append('<button class="dayClass activeCam minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
                            //else
                            //    HourSel.append('<button class="dayClass minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');

                            if (results.d.result[i] == 1)
                                HourSel.append('<div class="btn on minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
                            else
                                HourSel.append('<div class="btn minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');

                            //if (i == 16)
                            //    oSel.append('<hr style="visibility:hidden;"><div id="dayBreak">&nbsp;</div>');
                        }
                        breakMinutes();
                        $('.minuteClass').on('click', onMinuteClick);
                    }
                }
            });

This used to throw error because of server timeout. Is there any way to fire this again on error. If we try this say 3 times, then we can show the timeout error. Is it possible?

Answer

If I understand your situation correctly, then yes this is possible. There are many ways you can achieve this – consider the following adjustments to your code to show how this could be achieved:

var retries = 3; // Track the number of retries

function doRequest() {

    $.ajax({
        type: "POST",
        url: "recorded-vigil.aspx/GetCameraTimeLineMinutes",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        error: function (xhr) {
            $('.loader').hide();
            alert('Error in fetching timeline. Please try again');
            console.log(xhr);

            retries--; // Decrement the number of remaining retries

            if(retries >= 0) { // If more retries available, fire another request
                doRequest()
            }
        },
        success: function (results) {

            retries = 3; // Optional reset if you want to do this also

            $('.loader').hide();
            $('#spnTimeSelect').html("Please select minute");
            console.log('GetCameraTimeLineMinutes');

            if (results != null && results.d != null && results.d.result != null) {
                var HourSel = $("#MinuteSelect").empty();
                for (var i = 0; i < results.d.result.length; i++) {
                    var Minute = i;
                    //if (results.d.result[i] == 1)
                    //    HourSel.append('<button class="dayClass activeCam minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');
                    //else
                    //    HourSel.append('<button class="dayClass minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</button>');

                    if (results.d.result[i] == 1)
                        HourSel.append('<div class="btn on minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');
                    else
                        HourSel.append('<div class="btn minbutton minuteClass" data-minuteindex="' + Minute + '">' + Minute + '</div>');

                    //if (i == 16)
                    //    oSel.append('<hr style="visibility:hidden;"><div id="dayBreak">&nbsp;</div>');
                }
                breakMinutes();
                $('.minuteClass').on('click', onMinuteClick);
            }
        }
    });


}
We are here to answer your question about How to fire the ajax request on error? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji