jQuery UI aquí y el diálogo - Cómo confirmar cambiar de pestaña con confirmar basado en el plugin de diálogo?
-
26-09-2019 - |
Pregunta
Por lo tanto, el objetivo es confirmar la conmutación a otra pestaña interfaz de usuario mediante la interfaz de usuario de diálogo plugin. Utilizando el método confirman común es simple:
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
return confirm("Some confirmation message...");
}
});
pero la forma de lograr mismo comportamiento utilizando el cuadro de diálogo modal?
Creo que tengo que llamar a:
jQuery("#tabsContainer").tabs("select", ui.index);
en la "devolución de llamada ok" pero esto no está funcionando como esperaba. También - no se informa de ningún error ...
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
jQuery("#dialogContainer").dialog({
buttons: {
'Ok': function() {
jQuery("#tabsContainer").tabs("select", ui.index);
},
Cancel: function() { return; }
}
});
return false;
}
});
Solución
El origen del problema es que window.confirm
está bloqueando y de diálogo de interfaz de usuario jQuery no lo es. Se puede evitar esto mediante la estructuración de su código de manera diferente. Aquí está uno de los muchos enfoques posibles:
$(function() {
jQuery('#tabsContainer').tabs({
select: function(event, ui) {
// only allow a new tab to be selected if the
// confirmation dialog is currently open. if it's
// not currently open, cancel the switch and show
// the confirmation dialog.
if (!jQuery('#dialogContainer').dialog('isOpen')) {
$('#dialogContainer')
.data('tabId', ui.index)
.dialog('open');
return false;
}
}
});
jQuery('#dialogContainer').dialog({
autoOpen: false,
buttons: {
'Ok': function() {
// a new tab must be selected before
// the confirmation dialog is closed
var tabId = $(this).data('tabId');
$('#tabsContainer').tabs('select', tabId);
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow