Why does my back-end function loops, thus making my GET ajax call fail?

Question

This was tested on Internet Explorer 10, but set in in a way that runs like IE8

I have two ajax calls. The first one asynchronous and the second one is synchronous. In the first one, I get data from the days of a month. On success, it fires the synchronous ajax call in order to get the holidays.

$(function () {
    /*some code*/
    Load();
}

function Load() {
        /* Some irrelevant code */
        var today = new Date();
        var selectedDate = (today.getMonth() + 1) + "/" + today.getFullYear();
        //PopUp that appears when the Ajax calls are made.
        var $waitDialog = $('<div id="waitingPopUp"></div>'); //I shortened the content of this variable.

        $waitDialog.dialog({
            zIndex: 3000, 
            title: 'Processing...',
            dialogClass: "no-close",
            resizable: false,
            draggable: false,
            modal: true,
            closeOnEscape: false
        });
        ajaxGetMonthRecord(selectedDate);            
    }
function ajaxGetMonthRecord(selectedDate) {

        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: url + "/GetMonthData",
            data: { 'monthRecord': selectedDate },
            dataType: "json",
            success: function (data) {
                var holidays = ajaxGetHolidays(selectedDate);
                createCalendar(data, selectedDate, holidays);
                }
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("ERROR ON AJAX CALL N°1");
            }
        });
    }

[Back-end function] (this works perfectly):

[OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)]
    public List<MonthData> GetMonthData(string monthRecord)
    {
        var date = monthRecord.Split('/');
        var list = (new MonthData()).GetAll(Convert.ToInt32(date[0]), Convert.ToInt32(date[1])).ToList();
        return list;
    }

And here is when it fails:

function ajaxGetHolidays(selectedDate) {
        var holidays;
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: url + "/GetHolidays",
            data: { 'monthRecord': selectedDate },
            dataType: "json",
            async: false,
            success: function (data) {
                holidays = data;                    
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("ERROR ON AJAX CALL N°2");
            }

        });
        return holidays;
    }

[The Back-end function for the 2nd AJAX call]:

[OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)]
//This function starts running in a loop and never returns the List to the Ajax Call N°2
    public List<Holiday> GetHolidays(string monthRecord)
    {
        var date = monthRecord.Split('/');
        var list = (new Holiday()).GetAll(Convert.ToInt32(date[0]), Convert.ToInt32(date[1])).ToList();
        return list;
    }

When the second ajax call is set as async: false, the back-end function fires and returns the data. But when it reaches the end of the back-end function, it's fired again, and again, on a continuous loop until the ajax call throws an error. This is the error information that returns the AJAX call.

    readyState: 0
    textStatus: "error"
    errorThrown:
                    ABORT_ERR    20
                    code     19  
                    DATA_CLONE_ERR  25   
                    DOMSTRING_SIZE_ERR  2    
                    HIERARCHY_REQUEST_ERR    3   
                    INDEX_SIZE_ERR  1    
                    INUSE_ATTRIBUTE_ERR  10  
                    INVALID_ACCESS_ERR   15  
                    INVALID_CHARACTER_ERR    5   
                    INVALID_MODIFICATION_ERR     13  
                    INVALID_NODE_TYPE_ERR    24  
                    INVALID_STATE_ERR    11  
                    message "NetworkError"  
                    name    "NetworkError"  
                    NAMESPACE_ERR   14   
                    NETWORK_ERR  19  
                    NO_DATA_ALLOWED_ERR  6   
                    NO_MODIFICATION_ALLOWED_ERR     7    
                    NOT_FOUND_ERR    8   
                    NOT_SUPPORTED_ERR    9   
                    PARSE_ERR    81  
                    QUOTA_EXCEEDED_ERR   22  
                    SECURITY_ERR    18   
                    SERIALIZE_ERR   82   
                    SYNTAX_ERR  12   
                    TIMEOUT_ERR 23   
                    TYPE_MISMATCH_ERR   17   
                    URL_MISMATCH_ERR    21   
                    VALIDATION_ERR  16   
                    WRONG_DOCUMENT_ERR  4

But when I set async: true, it either does the back-end function loop and throws an error with responseText:"" and errorThrown:"", and also the console throws the following:

XMLHttpRequest: Network Error 0x2f78, Could not complete the operation due to error 00002f78.

Or the back-end function is never fired and returns null on success (though this may be because the asynchronous call haven't finished yet) and the console doesn't catch anything funny.

I tried to set the troubling ajax call before the one that works, but the issue persists. What am I doing wrong and what can I do to fix this?

By the way, I found this on my google search, saying that two Ajax calls can't be made in IE because one aborts the other (from what I understood). Does anyone know about this issue?

Thanks in advance.

Why bother even making an ajax call for the days in the month can't you just grab them out in javascript? — johnny 5, Nov 13 '15 at 15:11
Because I don't want the days alone, but data from the server that involves those days. For example: Day 1 has a flag at X hour and a description about it, and a flag at Y hour, with also a description. Don't know if I made myself clear. — Mayer M, Nov 13 '15 at 15:29
why not create a single function on the server the combines the results of both of these actions? It would be more efficient then making two ajax calls. — johnny 5, Nov 13 '15 at 16:55

score 2 · Answer 1 · answered Nov 12 '15 at 21:20

2

try to use a different approach, using a callback. something like this:

$(function () {
/*some code*/
  Load();
});


function Load() {
var today = new Date();
var selectedDate = (today.getMonth() + 1) + "/" + today.getFullYear();
//PopUp that appears when the Ajax calls are made.
var $waitDialog = $('<div id="waitingPopUp"></div>'); //I shortened the       

$waitDialog.dialog({
    zIndex: 3000,
    title: 'Processing...',
    dialogClass: "no-close",
    resizable: false,
    draggable: false,
    modal: true,
    closeOnEscape: false
});

ajaxGetMonthRecord(selectedDate, function (result) {

    var holidays = ajaxGetHolidays(selectedDate);
    createCalendar(result, selectedDate, holidays);
  });
}

function ajaxGetMonthRecord(selectedDate, callback) {

$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: url + "/GetMonthData",
    data: { 'monthRecord': selectedDate },
    dataType: "json",
    success: function (data) {
        if ($.isFunction(callback)) {
            callback(data);
        }
    }
    , error: function (jqXhr, textStatus, errorThrown) {
        alert("ERROR ON AJAX CALL N°1");
    }
  });
  }

answered Nov 12 '15 at 21:20

Sandcar

892
1
9
21

Sadly, it didn't work for me. Now, the ajaxGetMonthRecord() function never goes to its back-end function, and always return "null" (and doesn't throw error in the console). – Mayer M Nov 13 '15 at 14:02
Thanks to your approach, I decided to attack it in a different way; to let the first AJAX call finish before the second ajax call starts. This made the back-end function behave as expected (no loop made), but it returned an error. Then it hit me that it could be something inside the Holiday class (I had an issue, where I found out that setters needed to be declared, even if empty, in order for the AJAX call to work). But that wasn't the case. Turns out that AJAX doesn't like [DateTime?](http://stackoverflow.com/questions/109859/what-does-datetime-mean-in-c). – Mayer M Nov 13 '15 at 15:20
1

@Mayer M. in most cases i Always pass datetimes from javascript as a string. Them in the backend i tryparse the string to datetime. In the past i had some problems to. Só with this way i solve this kind of issues – Sandcar Nov 13 '15 at 18:57
Yes, but the problem was in the Holiday.cs I was passing the date as string and then I split the string into two integers (the back-end method used integer vars for month and year, instead of a single DateTime var in order to bring data from the DB). However, as one of the attrs of the Holiday.cs was a `DateTime?` attr, returning the List wouldn't be possible since I'm parsing the DateTime attr to a string (unless I change from the Holiday.cs the DateTime type to a string, or I return a JSON-string, or etc), I decided to omit the attr, since it's less work & I don't actually need it. – Mayer M Nov 13 '15 at 19:46

score 0 · Accepted Answer · edited May 23 '17 at 12:24

After trying different approaches (thank you @Sandcar), I decided to attack it in a different way; to let the first AJAX call finish before the second AJAX call starts. This made the back-end function behave as expected (no loop made), but the AJAX call returned an error (the same one I posted in the question).

Then it hit me that it could be something inside the Holiday class (I had an issue before, where I found out that setters needed to be declared, even if empty, in order for the AJAX call to work).

Turns out an attribute from the Holiday class (the one I was trying to get data from) was the issue:

[DataMember]
public DateTime? Date
    {
        get
        {
            string date = string.Concat(this.Day, "/", this.Month, "/", this.Year);
            return Convert.ToDateTime(date);
        }
    }
  /*code for getters and setters for day, month, year and description about the holiday */

Apparently, AJAX doesn't like DateTime? types. This may be resolved by parsing the Date to a string (If anyone thinks there's a proper way to resolve this, please feel free to reply and correct me). I ended up removing the [DataMember] line, since that attribute is unnecesary for me (adding a setter didn't resolved the issue, BTW).

Why does my back-end function loops, thus making my GET ajax call fail?

2 Answers2