Incomplete Execution of Callbacks on jQuery POST
I have 2 js methods which do an AJAX post to the server and display results accordingly.
1) Delete - Delete upon callback 'hides' the deleted element and does not the refresh the page
function DeleteRule(ruleId) {
var deleteRuleAction = $('#delete-rule-action').val();
$.post(deleteRuleAction, { ruleId: ruleId }, function(data) {
if (data.Status == 'Success') {
alert(data.Messages[0]);
$('#rule-details-' + ruleId).fadeOut(500);
$('#div-rule-button-' + ruleId).fadeOut(500);
activeRuleId = null;
}
else
alert(data.Messages[0]);
}, 'json');
}
2) Save - Save upon callback needs to refresh the page to show the newly added element along with existing elements
function SaveRule() {
var ruleId = $('#rule-id').val();
var saveOrUpdateRuleAction = $('#add-or-edit-rule-action').val();
$.post(saveOrUpdateRuleAction, { ruleId: ruleId }, function(data) {
if (data.Status == 'Success') {
alert(data.Messages[0]);
location.reload(true);
// This is supposed to reload the page after saving the element.
// But the page gets reloaded without display the alert on the previous line.
}
else
alert(data.Messages[0]);
}, 'json');
}
I call this Save function as :
<button type="submit" onclick="javascript:Save()">
Problem: The c开发者_如何学编程allback function in Save does not get called at all and the page gets refreshed automatically. During the AJAX call, the object that was to be saved gets saved to the database. But, the code inside the callback function does not get executed.
I was suggested the following hack to make it work
<button type="submit" onclick="javascript:Save(); return false;">
I was told that 'return false;' stops the page from automatically reloading. However, this does not make sense since my Delete, which should not get reloaded, does not have this hack to stop it from reloading.
Upon using FireBug, Delete showed a successful POST and a return of JSON data. However Save (without the hack) showed an 'abort'
can you check with normal button...by change its type="button" ?
精彩评论