Javascript global variables used as flags

Question

I am trying to use global variables as flags and cant get it to work. I have two functions:

This function sets a flag to be false when it is done.

function buildYearsTable(btn) { //console.log ("At build years table") var fundCode = document.getElementById("fundCode").value buildYearsFlag = true; $.ajax({url: "/scholarship/scholarshipMaintenance/buildYearsTable", method: "POST", cache: false, data: {fundCode: fundCode}, complete: function(xhr, statusCode){ console.log("inside build years table") data = $.parseJSON(xhr.responseText) $('#myTable tbody').html(''); data = data.sort() data = data.reverse() for(var i = data.length - 1; i >= 0; i--) { moveYearOption(data[i]) addYearRow(data[i]) } buildYearsFlag = false; //$('#yearsTable').html(xhr.responseText) console.log("done in build years table") }}) }

This function is called when the first one is called, but i need it to perform its ajax call ONLY once the flag is set to false by the first function. I am not sure how to accomplish this. I was thinking a while loop (polling kind of idea) but not sure how to go about it.

function rebuildYearSelects(btn) { //console.log ("At rebuild selects") var fundCode = document.getElementById("fundCode").value while (buildYearsFlag == false) { $.ajax({url: "/scholarship/scholarshipMaintenance/rebuildYearSelects", method: "POST", cache: false, data: {fundCode: fundCode}, complete: function(xhr, statusCode){ console.log("got inside rebuild years select") data = $.parseJSON(xhr.responseText) selectedYears = data.sortedSelectedYears unselectedYears = data.sortedUnselectedYears $('#yearsModal').replaceWith(data.html) fixModals(); buildYearsFlag = true; console.log("done in rebuildYearSelects") }}) } }

Instead of changing flags, can't you call rebuildYearSelects() after the response of the first call? You don't need flags or loops for this. — jaapaurelio
– jaapaurelio, Commented Feb 26, 2015 at 17:39
They are all executed on the same onclick event. so its like this, onclick="buildYearsTable();rebuiltYearSelects(); etc.." I experience problems in IE because they aren't called in order or something. — connor moore
– connor moore, Commented Feb 26, 2015 at 17:42
in the onclick just call buildYearsTable(). Remove flags and while. Call the rebuildYearSelects() inside the complete function. Everything should work. — jaapaurelio
– jaapaurelio, Commented Feb 26, 2015 at 17:48

jaapaurelio · Accepted Answer · 2015-02-26 17:56:50Z

The best way to accomplish this is by using callbacks. You just need to call the second function after the response from the first.

You should use 'done' instead of 'complete'.

 function buildYearsTable(btn) { var fundCode = document.getElementById("fundCode").value $.ajax({url: "/scholarship/scholarshipMaintenance/buildYearsTable", method: "POST", cache: false, data: {fundCode: fundCode}, done: function( data ){ // Your code goes here // Call the function only after the response rebuildYearSelects(); }}) }

Html:

onclick="buildYearsTable();"

Remove the flags and the while loop, everything should work.

Collectives™ on Stack Overflow

Javascript global variables used as flags

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related