完全に機能するトグルボタンがあります。JavaScript とビューは次のとおりです。
jQuery:
$('.list-delist-link').delegate("a", "click", function (e) {
var obj = $(this);
if ($(this).hasClass('delist-property')) {
// Post to controller
e.preventDefault();
} else {
// Post to controller
e.preventDefault();
}
});
意見：
<div class="list-delist-link">
@if(item.IsPropertyDisabled) {
@Html.ActionLink("List", "Enable", "Property", new { id = item.PropertyId }, new { @class="list-property other-button" })
} else {
@Html.ActionLink("Delist", "Disable", "Property", new { id = item.PropertyId }, new { @class="delist-property other-button" })
}
</div>
しかし、今は ajax アクションの前に確認ダイアログ ボックスを追加したいと考えています。しかし、それをやろうとすると、すべてが壊れてしまいます...理由はわかりません。レイアウト ページに jQuery ファイルと css ファイルがあります。
私が行った変更は以下のとおりです。
jQuery への変更:
var obj;
$('.list-delist-link').delegate("a", "click", function (e) {
obj = $(this);
$("#dialog-confirm").dialog(open):
e.preventDefault();
});
モーダル確認のための追加の jQuery:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false, height:140, modal: true,
buttons: {
"Delete all items": function() {
if (obj.hasClass('delist-property')) {
// Post to controller
} else {
// Post to controller
}
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
ビューの追加の div:
<div id="dialog-confirm" title="Are you sure?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
何が悪いのか教えてください。