ビュー内に 2 つのダイアログ ボックスがあります。これらの各ダイアログ ボックスには ajax コマンドが含まれていPOSTますLOAD。
問題は、ダイアログ ボックス 1 のチェックボックス リストから選択して [UpdatePage] ボタンをクリックすると、モデルが正常に更新されることです。ただし、別の checbobox リスト/ノードを含むツリー ビューを含む 2 番目のダイアログ ボックスはまったく切り替わりません。ただし、以前の状態は保持されます。以前に選択されたチェックボックスはチェックされていますが、まったく切り替わりません。
次の関数は、ダイアログ ボックス 1 を作成し、このダイアログ ボックスで post コマンドが正常に完了すると、2 番目のダイアログ ボックスとその中のツリービューは切り替わりません。
function initDailog() {
RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: true,
modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:',
width: 600, height: 500, position: 'center',
open: function (type, data) {
},
buttons: { UpdatePage: function () {
//storing the value of treeview selections in dialog box 2
var originalContent = $("#treeview").html();
$.post(runDatesUrl,
$("#form").serialize(),
function (data) {
$("#runDatestreeview").remove();
//removing the div which contains the treeview
$("#treeview").remove();
$("#testExceptiontreeview").remove();
$("#main").html(data);
//setting back the value of the div which contains the treeview
$("#treeview").html(originalContent);
}, "html");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RunDialog.closest("div.ui-dialog").appendTo("#form");
}
別の JS ファイルで、ダイアログ ボックス 2 で定義されたツリービュー:
$("#errorCodes ul").treeview({
collapsed: true,
prerendered: false
});
ツリー ビューを含む div の HTML:
<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<div id="errorCodes">
@Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
</div>
<div id="inputReps" style="display: none;">
</div>
</div