locked
Asp.Net Core 2.0 MVC - JQquery AJAX call working for one call not second RRS feed

  • Question

  • User-800224740 posted

    I am working on an Asp.Net core 2.0 MVC project. I'm working on a "company" page with multiple bootstrap tabs. On each tab there are various functions available to the user. 

    I have consolidated the majority of my JS code for all the tabs into one JS script file. I have also an application wide utility JS file for common functions. In this case my JQuery AJAX POST function (AjaxPost) is in this common helper JS file. 

    On the "company" page I invoke the AjaxPost function for two different tabs. On the "address" tab I call the AjaxPost function and it works perfectly! I get back the boolean return. On the "notes" tab, when the user enters a note and I call the AjaxPost function it will not return the boolean value back to my JS calling code?

    Here is the Ajax call that does NOT get back the boolean value:

                var _noteId = $("#hdnID").val();
                var _sendData = { Note: _note, NoteID: _noteId };
                debugger
                var ok = AjaxPost(saveNoteUrl, _sendData);
                if (ok) {
                    $("#Notes").val("");
                    $('.m_datatable').mDatatable('reload');
                    return true;           
                }

    Here is the Ajax call that does get back the boolean value:

        function CreateCompanyAddress(addressID) {
            var _sendData = { companyId: $("#id").val(), addressId: addressID };
            var ok = AjaxPost(createCompanyAddressUrl, _sendData);
            if (ok) {
                localStorage.setItem("newAddressId", "");
                //reload address tiles
            }        
        }

    Here is my common shared AjaxPost function:

    function AjaxPost(_Url, _Data) {
        debugger
        if (_Data == null) {
            console.log("Ajax data not provided for Url: " + _Url);
            return false;
        }
    
        if (_Url == null) {
            console.log("Ajax POST Url not provided.");
            return false;
        }
    
        var mvcMessage = "";
        $.ajax({
            type: 'post',
            url: _Url,
            data: _Data,
            beforeSend: function () {
                mApp.blockPage({
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'success',
                    size: 'lg',
                    message: "Processing..."
                });
            },
        }).done(function (result) {
            //Error
            if (!result.success) {
                mvcMessage = result.responseText;
                ShowToastr("error", mvcMessage);
                return false;
            } else {
                //Success            
                mvcMessage = result.responseText;
                ShowToastr("success", mvcMessage);
                return true;
            }
        }).fail(function (result) {
            mvcMessage = result.responseText;
            ShowToastr("error", mvcMessage);
            return false;
        }).always(function () {
            mApp.unblockPage();
        });
     
    
    }

    If I remove the AjaxPost function call on the notes section and use the JQuery Ajax code directly, all works just fine. I cannot figure out WTH is going on here. Can anyone shed any light on this issue? 

    Saturday, May 19, 2018 10:19 PM

Answers

  • User-800224740 posted

    I fixed my issue! Today I was coding on my laptop and the both calls to the AjaxPost function broke! Now I had a consistent issue that I could dig into further. I did some research and came across these two major threads that led me to my answer.

    Stackoverflow 1

    Stackoverflow 2

    The answer and code on the first thread really helped me understand the issue and gave me my final solution. Since the JQuery AJAX call is an Async call that was the root cause of my issue. The Ajax call was causing the caller function to always get back an "undefined" value. I updated my code, as shown below, and all was working just fine!

    function AjaxPost(_Url, _Data, cb) {
    
    .....
    .....
    
        var mvcMessage = "";
        $.ajax({
            type: 'post',
            url: _Url,
            data: _Data,
            beforeSend: function () {
                mApp.blockPage({
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'success',
                    size: 'lg',
                    message: "Processing..."
                });
            },
        }).done(function (result) {
            console.log("AjaxPost.done fired.");
            //Error
            if (!result.success) {
                console.log("AjaxPost.done NOT success fired.");
                cb(false);
            }
            else {
                //Success            
                console.log("AjaxPost.done success fired.");
                cb(true);
            }
        }).fail(function (result) {
            console.log("AjaxPost.fail fired.");
            cb(false);
        }).always(function () {
            mApp.unblockPage();
        });

    Then in the calling function, I used the below code.

           AjaxPost(createCompanyAddressUrl, _sendData, function (ok) {
                if (ok) {
                    localStorage.setItem("newAddressId", "");
                    //reload address tiles
                    getAddresses($("#hdnCmpID").val());
                }
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 23, 2018 5:40 AM

All replies

  • User1168443798 posted

    Hi BlueTSX,

    There are much code missing and I could not reproduce your issue with these code.

    If you add a breakpoint to the method for Notes in MVC Core, will the method be hit at controller?

    I suggest you check the network tab in web browser debugging to compare the differences between requests from AjaxPost and JQuery Ajax code.

    If you debug the AjaxPost line by line, will you receive any error?

    Best Regards,

    Edward

    Monday, May 21, 2018 7:53 AM
  • User-800224740 posted

    The issue is just with my AjaxPost JS function. When it returns the boolean value, it is not getting to the "notes" function where I call it. The underlying JQuery AJAX is working just fine.

    I just ran the code in debug and double checked, the note is getting inserted into my DB just fine with the Ajax call from AjaxPost function. The issue is simply the boolean value not coming back to the calling code for notes. Check out the linked image.

    Google Chome console

    Tuesday, May 22, 2018 4:16 AM
  • User1168443798 posted

    Based on your image, it seems the AjaxPost did not return any result.

    Could you share us the result for the questions in my above post?

    Tuesday, May 22, 2018 7:27 AM
  • User-800224740 posted

    I fixed my issue! Today I was coding on my laptop and the both calls to the AjaxPost function broke! Now I had a consistent issue that I could dig into further. I did some research and came across these two major threads that led me to my answer.

    Stackoverflow 1

    Stackoverflow 2

    The answer and code on the first thread really helped me understand the issue and gave me my final solution. Since the JQuery AJAX call is an Async call that was the root cause of my issue. The Ajax call was causing the caller function to always get back an "undefined" value. I updated my code, as shown below, and all was working just fine!

    function AjaxPost(_Url, _Data, cb) {
    
    .....
    .....
    
        var mvcMessage = "";
        $.ajax({
            type: 'post',
            url: _Url,
            data: _Data,
            beforeSend: function () {
                mApp.blockPage({
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'success',
                    size: 'lg',
                    message: "Processing..."
                });
            },
        }).done(function (result) {
            console.log("AjaxPost.done fired.");
            //Error
            if (!result.success) {
                console.log("AjaxPost.done NOT success fired.");
                cb(false);
            }
            else {
                //Success            
                console.log("AjaxPost.done success fired.");
                cb(true);
            }
        }).fail(function (result) {
            console.log("AjaxPost.fail fired.");
            cb(false);
        }).always(function () {
            mApp.unblockPage();
        });

    Then in the calling function, I used the below code.

           AjaxPost(createCompanyAddressUrl, _sendData, function (ok) {
                if (ok) {
                    localStorage.setItem("newAddressId", "");
                    //reload address tiles
                    getAddresses($("#hdnCmpID").val());
                }
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 23, 2018 5:40 AM