サーバーにAJAX投稿を行い、それに応じて結果を表示する2つのjsメソッドがあります。
1) 削除 - コールバック時に削除すると、削除された要素が「非表示」になり、ページが更新されません
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) 保存 - コールバック時に保存すると、ページを更新して、新しく追加された要素と既存の要素を表示する必要があります
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');
}
この保存関数を次のように呼び出します。
<button type="submit" onclick="javascript:Save()">
問題: Save のコールバック関数がまったく呼び出されず、ページが自動的に更新されます。AJAX 呼び出し中に、保存されるオブジェクトがデータベースに保存されます。ただし、コールバック関数内のコードは実行されません。
それを機能させるために次のハックが提案されました
<button type="submit" onclick="javascript:Save(); return false;">
「falseを返す」と言われました。ページの自動リロードを停止します。ただし、リロードされるべきではない私の削除には、リロードを停止するためのこのハックがないため、これは意味がありません。
FireBug を使用すると、Delete によって POST が成功し、JSON データが返されました。ただし、（ハックなしで）保存すると「中止」が表示されました