I have an issue with calling ajax request with jquery. The order that I'm doing this in is:
- click the button
- do ajax post
- when the ajax request is finished I call a function that is out side the scope.
For some reason and supecting that it has to do with the fact that i am in the on click callback that the load function is out of scope. But I don't even see the console.log message either. But I do see the ajax call.
Any ideas? Maybe I'm doing this the wrong way???
Here's the prototype code that resembles what I'm trying to do:
$(document).ready(function(){
$('#button').on('click',function(evt){
var data = {};
ajax('index.html', data).done(function(){
console.log('Fire Please'); // this does not fire after the ajax call!!!
load(); // this does not fire after the ajax call!!!
});
});
function load(){
// do another ajax call and add to the dom
}
function ajax(url, data){
return $.ajax({
url: url,
type: 'post',
dataType: 'json',
data: data
});
}
});
And Here's the Actual Code I'm trying to use
$(document).ready(function(){
// add onclick event to the Add Unit Button
addUnitButt.on('click', function(evt){
var data = {
id: id,
dept_no: dept_no.val(),
dept: dept.val()
};
evt.preventDefault();
dept.val('');
dept_no.val('');
$(this).prop('disabled', true);
ajax('index.html', data).done(function(){
load();
});
});
function load(){
var data = {
id: 575
};
// show loading
showLoading();
// reset the table dom
$("#listTable").find("tr:gt(0)").remove();
// do initial load of the list data
ajax('index.html', data)
.done(function(units){
var data = toJSONObject(units);
for(var x = 0; x < data.length; x++){
if((x & 1) == 0){
addRow(data[x], data.length, 'odd');
}else{
addRow(data[x], data.length, 'even');
}
}
// hide loading
hideLoading();
});
}
// ajax function to call for data
function ajax(url, data){
return $.ajax({
type: 'POST',
data: data,
dataType: 'json',
url: url
});
}
});
Thanks in advance!