Недавно я столкнулся с ситуацией, когда я немного не понимал, какую технику мне следует использовать при работе с модальным диалогом JQueryUI.
У меня есть функция: ClearDay ( weekID, ltDayID) . В настоящее время он отвечает за создание диалогового окна с двумя кнопками: ok и cancel.
ok запускает вызов ajax, передавая на сервер weekID и ltDayID.
cancel очистит div диалогового окна и вызовет .dialog ('destroy')
в целевом div.
Мой вопрос: какой из следующих подходов мне следует использовать?
Уничтожить / повторно создать диалог при каждом вызове - чтобы я мог передавать параметры в вызов ajax и иметь только один div для всех диалогов в разметке
function ClearDay(weekID, ltDayID) {
$('#modalDialog').dialog({
autoOpen: true,
width: 300,
title: 'Confirm Delete',
modal: true,
buttons: [{
text: 'ok',
click: function (e) {
$(this).dialog('close');
$.ajax({
url: '/Shift/ClearDay',
type: 'POST',
cache: false,
data: { shiftWeekID: weekID, shiftLtDayID: ltDayID },
success: function (result) {
LoadShiftPattern(function (result) {
$('#weekContainer').html(result);
SelectLastUsedField();
});
}
});
}
},
{
text: 'cancel',
click: function (e) {
$('#errorList').empty();
$(this).dialog('close');
}
}],
open: function (e) {
$(this).html("Clicking ok will cause this day to be deleted.");
},
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
}
});
}
Создавать диалог только один раз , но имея по одному div для каждого диалогового окна в разметке, используя Close и передавая значения напрямую с помощью Jquery Selectors
$(function() {
$('#confirmDeleteDialog').dialog({
autoOpen: false,
width: 300,
title: 'Confirm Delete',
modal: true,
buttons: [{
text: 'ok',
click: function (e) {
$(this).dialog('close');
$.ajax({
url: '/Shift/ClearDay',
type: 'POST',
cache: false,
data: { shiftWeekID: $('#weekIDInput').val(), shiftLtDayID: $('#dayIDInput').val()},
success: function (result) {
LoadShiftPattern(function (result) {
$('#weekContainer').html(result);
SelectLastUsedField();
});
}
});
}
},
{
text: 'cancel',
click: function (e) {
$('#errorList').empty();
$(this).dialog('close');
}
}],
open: function (e) {
$(this).html("Clicking ok will cause this day to be deleted.");
}
});
}
function ClearDay() {
$('#confirmDeleteDialog').dialog('open');
}
Cheers,
James