When I click on the Positive or Negative buttons, a jQuery event handler function is triggered. Each button passes different data objects to the handler. However, within the AJAX POST handler, I am unable to access the data from the click event.
$('#Positive').on("click", {agree:true}, handlerFunc);
$('#Negative').on("click", {agree:false}, handlerFunc);
function handlerFunc(e){
e.preventDefault();
//e.data is valid here
if (e.data.agree === true){
//Valid condition
startTimer();
}
$.post(url_, postData, function(data){
//console.log(e.data);
//Data is undefined at this point
if (e.data.agree === false){
return true;
}
//Other actions
});
}
Why does the data become undefined within the AJAX POST?
To work around this issue, I created a new variable to store the value of e.data.agree and it worked correctly.
$('#Positive').on("click", {agree:true}, handlerFunc);
$('#Negative').on("click", {agree:false}, handlerFunc);
function handlerFunc(e){
e.preventDefault();
//e.data is valid here
var agree_data = e.data.agree;
if (e.data.agree === true){
//Valid condition
startTimer();
}
$.post(url_, postData, function(data){
//console.log(agree_data);
//Value remains accessible
if (agree_data === false){
return true;
}
//Other actions
});
}
Why does the data become undefined in the first case - within the AJAX POST? Could it be getting overwritten somehow?
NOTE: I have noticed that this issue occurs in my production environment but not in testing.