.Ajax（）调用并非始终有效

Question

So currently I have a page and if someone clicks "continue" then my javascript makes an Ajax call to the base controller to update the breadcrumb index to style the breadcrumb. The problem is that this ajax call is not made all the time. It seems completely random: could work 6 times in a row and then sometimes not work at all. By work I mean making the ajax call to base controller to update the breadcrumb index.

This is the code I have when you click the continue button.

$("#submitButton").click(function () {
    updateIndex();
});

This is the function:

function updateIndex() {
var PositionIndex = 5;

if (!($("#submitButton").attr("name") == "BreadCrumb") && !($("#submitButton").attr("name") == "BackButton")) {
    $("#bc_6").removeClass("enabled").addClass("a");
    $("#bc_7").removeClass("enabled").addClass("a");
    $("#navbar").css('background-color', '#fcfcfc');
    $.ajax({
        url: "BuildingCoverages/UpdateFurthestBreadcrumb",
        type: "POST",
        data: {
            index: PositionIndex
        }
    });
}

}

Let me know if there is any additional information you guys need!

Answer 1

wait for the ajax to succeed then submit:

$("#submitButton").click(function (e) {
    e.preventDefault();
    var PositionIndex = 5;

if (!($("#submitButton").attr("name") == "BreadCrumb") && !($("#submitButton").attr("name") == "BackButton")) {
    $("#bc_6").removeClass("enabled").addClass("a");
    $("#bc_7").removeClass("enabled").addClass("a");
    $("#navbar").css('background-color', '#fcfcfc');
    $.ajax({
        url: "BuildingCoverages/UpdateFurthestBreadcrumb",
        type: "POST",
        data: {
            index: PositionIndex
        },
        success: function(data) {
            //do your submit here. this will wait til after ajax call is complete and succeeds.
        }
    });
}
});