ASP.net: AJAX Result Not Kicking Off

Question

I think this will be a weird one for you as I am at my wits end with this. On a screen I have in a table, I have a link being clicked that is setting off a javascript/ajax request. I have similar code in another screen that works perfectly as it heads down into the success part of the ajax call and runs code in the success portion of the call. For some reason though I can't seem to get this to work and when I debug it in chrome, I lose my breakpoints and it never seems to get into the success portion of the Ajax call.

@section scripts{
<script>

    // Get the bond ID Data from the row selected and return that to the program.
    function getIDData(el) {

        var ID = $(el).closest('tr').children('td:first').text();
        var iddata = {
            'ID': ID
        }

        console.log(iddata);
        return iddata;
    }

    // Submit the data to a function in the .cs portion of this razor page.
    $('.updatelink').click(function () {
        var bondid = JSON.stringify(getIDData(this));
        $.ajax({
            url: '/Maintenance/Bond_Maint?handler=UpdateandReloadData',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            type: 'POST',
            dataType: 'json',
            data: { bondid: bondid },
            success: function (result) {
                if (result.pass != undefined) {
                    document.forms[0].submit();
                }
            }, 
        });
    });
</script>
}

The ASP.net code behind that is calling does an update to the database and then passes back a variable containing Success as its message.

 //-------------------------------------------------------------------------------
    // Try to get and insert the data from a selected row and copy it 
    //-------------------------------------------------------------------------------     
    public ActionResult OnPostUpdateandReloadData(string bondid)
    {            
        return new JsonResult(new { pass = "Success" });
    }

I'm not sure how else to describe my issue other than when I debug my other code via the browser, it appears to take a different path than this code does and I cannot fathom why. For reference my other code looks like this:

@section scripts{
<script>

// Get the offender ID Data from the row selected and return that to the program.
function getIDData(el) {        

    var ID = $(el).closest('tr').children('td:first').text();
    var iddata = {
        'ID': ID
    }        

    console.log(iddata);
    return iddata;
}

// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
    var offenderid = JSON.stringify(getIDData(this));
    $.ajax({
        url: '/Copy_Old_Account?handler=CopyData',
        beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                },
        type: 'POST',
        dataType: 'json',            
        data: { offenderid: offenderid },    
        success: function (result) { 
            if (result.path != undefined) {
                window.location.replace(result.path);
            }
        }, 
    });
});
</script>
}

Any help would be appreciated.

If you set a break point in the ASP.NET code does it get reached when you click on the link? — MisterMystery, Aug 21 '18 at 17:44
So what is happening now ? Is it making the AJAX call at all ? Are you getting any error messages ? What is happening ? — Shyju, Aug 21 '18 at 17:48
Maybe create a `error: function (response) { console.log(response); }` and see what it is complaining about? — Frank Witte, Aug 21 '18 at 17:51
@MisterMystery yes the code does hit the asp.net code and that runs. When it comes back is where I am getting the issue. — Jestes, Aug 21 '18 at 17:53
@FrankWitte I added this: error: function (jqXHR, exception) { console.log(jqXHR); }, and now it just spins whenever I try to debug it. It states it is waiting on a breakpoint which I set on it. When I try to just pass over it then it freezes saying its stuck on a breakpoint again. — Jestes, Aug 21 '18 at 18:05
Delete all breakpoints? Hard to guess what is going on. Did anything get printed in the console? — Frank Witte, Aug 21 '18 at 18:09
To debug Ajax, I use the `Network` tab in Google Chrome. It shows if the Ajax call is properly formed and what response is received from the controller. — Alfred Wallace, Aug 21 '18 at 18:10
What's is the http status of the response from the MVC controller? — Frank Witte, Aug 21 '18 at 18:11

score 0 · Answer 1 · answered Aug 21 '18 at 18:38

Okay guys so first off, thank you everyone for responding to my question. Frank Writte and Alfred pointed me into the right direction by looking for the status in the network tab for my calls. I found out that I was getting cancellations for my requests. After looking into that I found this article What does status=canceled for a resource mean in Chrome Developer Tools? that has an answer from FUCO that gave me what I needed to do. Apparently I needed to add event.preventDefault(); in front of my ajax call and all of a sudden my code worked. I'm not sure I completely understand why this works but I can't complain about the results. Again thank you everyone for trying to help. This one has been boggling my mind all morning.

ASP.net: AJAX Result Not Kicking Off

1 Answers1