JQuery boîte de Dialogue Modale - Détruire ou à Proximité?
J'ai récemment rencontré une situation où j'ai été un peu confus au sujet de la technique que je doit utiliser pour traiter avec JQueryUI Modal de la boîte de Dialogue.
J'ai une fonction: ClearDay(weekID, ltDayID). Actuellement, il est responsable de la création d'une boîte de dialogue avec deux boutons: ok et annuler.
ok va déclencher un appel ajax, en passant weekID et ltDayID pour le serveur.
annuler de vider la boîte de dialogue div et appel .dialog('destroy')
sur la cible div.
Ma question est: qui approche suivante dois-je utiliser?
Détruire/Re-Créer une boîte de Dialogue à chaque appel - pour que je puisse passer des paramètres à l'appel ajax et n'ont qu'un div pour l'ensemble de la boîte de dialogue dans le balisage
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');
}
});
}
Créer la boîte de dialogue qu'une seule fois, mais avoir un div pour chaque boîte de dialogue dans le balisage, à l'aide de Près, et en passant directement les valeurs à l'aide des Sélecteurs Jquery
$(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');
}
Acclamations,
James
Vous devez vous connecter pour publier un commentaire.
Pour être honnête, je ne suis pas sûr. Cependant, vous pouvez utiliser un javascript profiler pour mesurer le temps nécessaire à l'exécution de toute façon.
Voici un lien vers un mini-guide pour le profileur javascript de Google Chrome developer tools http://code.google.com/chrome/devtools/docs/profiles.html
Je proposerais que la 2ème option serait plus lent, comme j'imagine les sélecteurs dans "données" doivent être évalués et donc plus lent.
Cependant, cela va dépendre de combien de fois le dialogue va être ouvert /fermé. Comme j'imagine détruire et recréer sera lente (bien en un clin d'oeil - mais peut-être un peu plus lent).
La première semble être une simple mise en œuvre, de sorte que si les performances ne semble pas être un problème - peut-être il suffit de choisir la plus simple des deux.
Cela dépend du nombre d'éléments que vous utilisez la fonction ClearDay.
Si l'absence d'éléments est grande alors la deuxième approche, c'est à dire. (La création d'un dialogue et de le réutiliser) est une bonne approche, et vice-versa.