Ad

How To Prevent Asynchronous In Ajax Using JQuery

- 1 answer

I can't explain my questions in word, i'll post my code. Then, try to explain it there.

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also.

$.ajax({
    type:"GET",
    url: "phpfunction.php?getFromTo=all",
    dataType:"json",
    success: function(data){
        $('#slctfrom').find('option').remove().end();
        $('#slctto').find('option').remove().end();
        $('#slctyr').find('option').remove().end();
        $.each(data, function(index, item) {
            if (item.dt != "") {
                $('#slctfrom').append('<option value='+item.dt+'>'+item.dt+'</option>');
                $('#slctto').append('<option value='+item.dt+'>'+item.dt+'</option>');
                $('#slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>');
            }
        });
    }
});

var fyy = document.getElementById("slctfrom").value;
var tyy = document.getElementById("slctto").value;
var yr = document.getElementById("slctyr").value;
var type = document.getElementById("slcttype").value;
var graph;
if (document.getElementById("column").checked) {
    graph = "column";
} else if (document.getElementById("line").checked) {
    graph = "line";
} else if (document.getElementById("area").checked) {
    graph = "area";
} else {
    graph = "pie";
}
if (tyy < fyy) {
    document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value.";
} else {
    chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART.
}
});

I want to execute my ajax first and then it executes my onchange because sometimes my options get null, and then if I try to change the checked in radiobutton which is #bdo not included in my code since it is the same as #all, it will be nulled forever, it doesn't get the new value

Ad

Answer

Put your code in the success/error callback.

$('#all').on('change', function() { //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also.

    $.ajax({
        type: "GET",
        url: "phpfunction.php?getFromTo=all",
        dataType: "json",
        success: function(data) {

            ajaxCallback();

            $('#slctfrom').find('option').remove().end();
            $('#slctto').find('option').remove().end();
            $('#slctyr').find('option').remove().end();
            $.each(data, function(index, item) {
                if (item.dt != "") {
                    $('#slctfrom').append('<option value=' + item.dt + '>' + item.dt + '</option>');
                    $('#slctto').append('<option value=' + item.dt + '>' + item.dt + '</option>');
                    $('#slctyr').append('<option value=' + item.dt + '>' + item.dt + '</option>');
                }
            });
        },
        error: function() {
            ajaxCallback();
        }
    });


    function ajaxCallback() {
        var fyy = document.getElementById("slctfrom").value;
        var tyy = document.getElementById("slctto").value;
        var yr = document.getElementById("slctyr").value;
        var type = document.getElementById("slcttype").value;
        var graph;
        if (document.getElementById("column").checked) {
            graph = "column";
        } else if (document.getElementById("line").checked) {
            graph = "line";
        } else if (document.getElementById("area").checked) {
            graph = "area";
        } else {
            graph = "pie";
        }
        if (tyy < fyy) {
            document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value.";
        } else {
            chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART.
        }
    }
});
Ad
source: stackoverflow.com
Ad