jquery button doesn't work with the click, but it works when adding an alert box

Question

Hi,

Just as the title, I add a button on the html page to do some plotting, but the doesn't plot the figure right, but when I put a alert box inside the code when clicking the button, it just work well. What is the problem? I don't want to have the alert box all the time, how can I do?

Here is part of the code:

   // append to p container
pcontainer = $('<p></p>').append(button).appendTo('#plot');

//$('<input type="button" value="Plot Data" />').click(getData).appendTo('#plot'); // add all the variables}

/* * Download data for all the requested variables. */ function getData() { var baseUrl = document.getElementById('url').value; // get the url address var x1,x2;

var url = baseUrl + '.dods?';
for (var i=0; i < document.variablesX.vx.length; i++) {

     var selectedX = $('#variablesX :radio').filter(':checked'); // define the variables X that have been selected
     if (selectedX.length ==0) {alert("please choose ONE variable for axis X"); return;} 

     var selectedY = $('#variablesY :radio').filter(':checked'); // define the variables Y that have been selected
     if (selectedY.length ==0) {alert("please choose ONE variable for axis Y"); return;}

     var selectedType = $('#myplot :radio').filter(':checked'); // define the plot type that have been selected
     if (selectedType.length ==0) {alert("please choose ONE plot type"); return;}  

     if (document.variablesX.vx[i].checked) {
             // for each selected variable, get the data and pass to textarea.
           var url1 = url + document.variablesX.vx[i].id;
           loadData(url1, function(data) {
           x1 = toJsonString(data);
           //alert(x1);
            }, '/proxy/');  // load data from url1
     };
     if (document.variablesY.vy[i].checked) {
             // for each selected variable, get the data and pass to textarea.

           var url2 = url + document.variablesY.vy[i].id;
           loadData(url2, function(data) {
           x2 = toJsonString(data);
            }, '/proxy/');  // load data from url2

     };
};

//alert ("You have chosen to plot.");

plotData(x1,x2);

}

function plotData(x1,x2) {

var arr1, arr2;             // define 1 dimentional array to get splited strings
var d1 = [];               // define array to put the two variables together

arr1 = x1.split (",");

arr2 = x2.split (","); // convert string into array   

for (var i = 0; i < arr1.length; i += 1)
     d1.push([arr1[i], arr2[i]]);  // combine two variables into one array



// plot in flot
$(function () {
    $.plot($("#placeholder"),[d1]);
});

}

Could someone help to explain it? Thanks!

Mengfei

Answer 1

Please post the code fro your getData() routine that gets the data from the server.

Assuming you are using an Ajax $.get (or similar), this is an async call and statements that follow it will be executed before the call to get the data has actually finished. Either wrap the following statements in the success function for the ajax call, or get the data with async set to false.

Your alert is slowing the process down so that the get data has completed before proceeding to the next step.