bootstrap - mensaje de confirmacion javascript php
¿Es posible utilizar un cuadro de confirmación modal usando JQuery? (12)
¿ dialog en el sitio jQuery UI ?
Miró un poco y parece que no puede encontrar una solución JQuery ( tal vez es solo una limitación de JavaScript ) para esto:
<a href="somelink.php"
onclick="return confirm(''Go to somelink.php?'');">Click Here</a>
En el ejemplo anterior, cuando un usuario hace clic en el enlace, solo irá a su href si el usuario hace clic en Aceptar en el cuadro de confirmación.
Lo que intento hacer es obtener un aspecto más moderno usando un div emergente. Quizás algo como esto:
<a href="somelink.php"
onclick="return jq_confirm(''Go to somelink.php?'');">Click Here</a>
(Donde jq_confirm es una función de confirmación de JQuery personalizada que muestra un div agradable con un par de botones YES / NO u OK / CANCEL).
Sin embargo, parece que no puedo encontrar tal cosa.
He consultado algunas bibliotecas de widgets de JQuery, etc. que ofrecen una funcionalidad similar, pero ninguna esperará la respuesta del usuario ( al menos, no en el escenario descrito anteriormente ), sino que proceden y llevan al usuario al enlace ( o ejecutar cualquier JavaScript incrustado en la parte href = '''' del enlace ). Sospecho que esto se debe a que aunque puede adjuntar una función de devolución de llamada a muchos de estos widgets para devolver un valor verdadero / falso, el evento onclick no espera una respuesta (las devoluciones de llamada son asíncronas ), lo que hace que no sea válido.
Lo que necesito es el mismo tipo de funcionalidad de detención-todo-javascript (modal) que proporciona el comando predeterminado confirm () . ¿Es esto posible en JQuery ( o incluso en JavaScript )?
Como no soy un experto en JavaScript ni en JQuery, difiero a los gurús que hay. Cualquier solución JQuery ( o incluso JavaScript puro ) es bienvenida ( si es posible ).
Gracias -
Aprovechando la solución de Banu (¡muchas gracias!) Para convertirla en una solución de un solo toque en la parte superior de cada página. Pega este código dentro:
$(document).ready
Y agrega la clase "confirmLinkFollow" a todos los enlaces que quieras confirmar:
$(".confirmLinkFollow").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
var $dialog_link_follow_confirm = $(''<div></div>'').
html("<p>Are you sure?</p>").
dialog({autoOpen: false,
title: ''Please Confirm'',
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
},
modal: true,
minWidth: 250,
minHeight: 120
}
);
$dialog_link_follow_confirm.dialog("open");
});
Casi tres años después, estoy buscando algo similar. Como no he encontrado una solución "rápida" aceptable, escribí algo que se acerca mucho al criterio del OP. Me imagino que otros pueden encontrarlo útil en el futuro.
JavaScript está basado en eventos y eso significa que no admite ningún tipo de ciclo de "espera" o "suspensión" que podamos utilizar para pausar una función de confirmación de javascript puro. Las opciones implican grabar ciclos de procesador, usar un complemento de navegador o AJAX. En nuestro mundo cada vez más móvil, y con conexiones a Internet irregulares, ninguna de estas es una gran solución. Esto significa que tenemos que regresar de nuestra función "confirmar" de inmediato.
Sin embargo, dado que no existe una lógica "falsa" en el fragmento de código anterior (es decir, no se hace nada cuando el usuario hace clic en "Cancelar"), podemos activar el evento "hacer clic" o "enviar" nuevamente cuando el usuario hace clic en "Aceptar". " ¿Por qué no establecer una bandera y reaccionar en función de esa bandera dentro de nuestra función "confirmar"?
Para mi solución, opté por utilizar FastConfirm en lugar de un diálogo "modal". Puedes modificar fácilmente el código para usar cualquier cosa que quieras, pero mi ejemplo fue diseñado para usar esto:
https://github.com/pjparra/Fast-Confirm
Debido a la naturaleza de lo que hace, no veo una manera limpia de empaquetarlo. Si siente que tiene demasiados bordes ásperos, siéntase libre de suavizarlos o reescribir su código de la manera que todos los demás lo han recomendado:
/* This version of $.fn.hasEvent is slightly modified to provide support for
* the "onclick" or "onsubmit" tag attributes. I chose this because it was
* short, even if it is cryptic.
*
* Learn more about the code by Sven Eisenschmidt, which is licensed under
* the MIT and GPL at:
* http://github.com/fate/jquery-has-event
*/
(function($) {
$.fn.hasEvent = function(A, F, E) {
var L = 0;
var T = typeof A;
E = E ? E : this;
var V = (E.attr(''on''+A) != undefined);
A = (T == ''string'') ? $.trim(A) : A;
if (T == ''function'')
F = A, A = null;
if (F == E)
delete(F);
var S = E.data(''events'');
for (e in S)
if (S.hasOwnProperty(e))
L++;
if (L < 1)
return V; // = false;
if (A && !F) {
return V = S.hasOwnProperty(A);
} else if(A && S.hasOwnProperty(A) && F) {
$.each(S[A], function(i, r) {
if(V == false && r.handler == F) V = true;
});
return V;
} else if(!A && F) {
$.each(S, function(i, s) {
if (V == false) {
$.each(s, function(k, r) {
if (V == false && r.handler == F)
V = true;
});
}
});
}
return V;
}
$.extend($, {hasEvent: $.fn.hasEvent});
}) (jQuery);
/* Nearly a drop-in replacement for JavaScript''s confirm() dialog.
* Syntax:
* onclick="return jq_confirm(this, ''Are you sure that you want this?'', ''right'');"
*
* NOTE: Do not implement "false" logic when using this function. Find another way.
*/
var jq_confirm_bypass = false;
function jq_confirm(el, question, pos) {
var override = false;
var elem = $(el);
if ($.fn.fastConfirm == undefined) {
override = confirm(question);
} else if (!jq_confirm_bypass) {
if (pos == undefined) {
pos = ''right'';
}
elem.fastConfirm({
position: pos,
questionText: question,
onProceed: function(trigger) {
var elem = $(trigger);
elem.fastConfirm(''close'');
if (elem.hasEvent(''click'')) {
jq_confirm_bypass = true;
elem.click();
jq_confirm_bypass = false;
}
if (elem.hasEvent(''submit'')) {
jq_confirm_bypass = true;
elem.submit();
jq_confirm_bypass = false;
}
// TODO: ???
},
onCancel: function(trigger) {
$(trigger).fastConfirm(''close'');
}
});
}
return override ? override : jq_confirm_bypass;
}
Entonces ... onclick = "return confirm (''¿Quieres probar esto?'');" se volvería onclick = "return jq_confirm (esto, ''¿Quieres probar esto?'');" El parámetro pos / "right" es opcional y es específicamente para Fast-Confirm.
Al hacer clic, la función jq_confirm () generará el cuadro de diálogo jQuery y devolverá "false". Cuando el usuario hace clic en "Aceptar", jq_confirm () establece un indicador, llama al evento original de hacer clic (o enviar), devuelve "verdadero" y luego lo desactiva en caso de que quiera permanecer en la misma página.
Coloque la redirección dentro de la función como:
<script>
function confirmRedirect(url, desciption) {
if (confirmWindow(desciption)) {
window.location = url;
}
}
</script>
Y llámalo así:
<a href="javascript:confirmRedirect(''somlink.php'',''Are you sure?'')">Go!</a>
Consulte http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
Tienen una buena variedad de cajas-modal para JQuery.
Creo que deberías ver http://www.ericmmartin.com/simplemodal/
Una anulación de diálogo modal de la función de confirmación de JavaScript. Demuestra el uso de onShow y la forma de mostrar una confirmación de diálogo modal en lugar del cuadro de diálogo de confirmación de JavaScript predeterminado.
Dado que esta pregunta parece faltar a la respuesta canónica: no hay forma de pausar programáticamente (y reanudar) la ejecución de javascript como alert o confirm hacer .
Dicho esto, depender de este comportamiento hoy en día generalmente se considera una mala práctica dada la naturaleza de subprocesamiento único de javascript, y la razón por la cual las funciones mencionadas pausan la ejecución es probablemente porque fueron diseñadas cuando la web todavía estaba en una etapa muy temprana, y más tarde se dejó sin cambios para garantizar la compatibilidad. Dado que el enfoque actual es escribir tanto código js no bloqueante como sea posible, es poco probable que la funcionalidad para detener js programáticamente llegue a alguna especificación futura de ECMAScript, por lo que su mejor opción es volver a trabajar en su sitio para asegurarse de confirmar y los diálogos de alerta pueden coexistir con otro código JavaScript que se ejecuta en segundo plano.
Debería poder anular la función estándar window.confirm escribiendo el siguiente código.
window.confirm = modalConfirm
entonces necesitarás hacer una función como esta
function modalConfirm(message){
// put your code here and bind "return true/false" to the click event
// of the "Yes/No" buttons.
}
Esto debería funcionar, aunque todavía no lo he probado. Voy a hacer exactamente esto ahora y les dejaré saber cómo funcionó.
Editar: He probado mi ejemplo anterior y no fue posible, tendrá que pasar una función de devolución de llamada a su función de confirmación sobrescrita de la siguiente manera:
function modalConfirm(message, callback){
...
$("button.yes").click(function(){
callback(result);
});
...
}
..haciendo que su llamada a la función se vea así:
confirm("Are you sure?", function(result){
alert(result);
});
En otras palabras, no es posible anular completamente la función window.confirm predeterminada sin causar un desagradable bucle que hace que el navegador se cuelgue. Creo que tendrá que modificar sus llamadas de confirmación como se indicó anteriormente.
El siguiente enlace tiene un plugin jQuery para cuadros de confirmación similares a construir como confirm ("algo") en JavaScript
Escribí sobre la solución a este problema aquí: http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog/
Aunque el artículo está orientado a ASP.Net, se puede adaptar fácilmente a php. Se basa en evitar el clic con un retorno falso y cuando el usuario hace clic en "Aceptar" o "SÍ" o lo que sea que tenga; el enlace o botón simplemente se vuelve a hacer clic.
var confirmed = false;
function confirmDialog(obj)
{
if(!confirmed)
{
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function()
{
$( this ).dialog( "close" );
confirmed = true; obj.click();
},
"No": function()
{
$( this ).dialog( "close" );
}
}
});
}
return confirmed;
}
Pruébalo y cuéntame lo que piensas. Espero que esto resuelva tu problema.
Mi manera de solucionar este problema fue agregar algunos datos arbitrarios al objeto y verificar esos datos al hacer clic. Si existió, proceda con la función como siempre, de lo contrario confirme con un sí / no (en mi caso usando una superposición jqtools). Si el usuario hace clic en sí, inserte los datos en el objeto, simule otro clic y limpie los datos. Si hacen clic en no, simplemente cierre la superposición.
Aquí está mi ejemplo:
$(''button'').click(function(){
if ($(this).data(''confirmed'')) {
// Do stuff
} else {
confirm($(this));
}
});
Y esto es lo que hice para anular la función confirmar (usando una superposición de herramientas jquery):
window.confirm = function(obj){
$(''#dialog'').html(''/
<div>/
<h2>Confirm</h2>/
<p>Are you sure?</p>/
<p>/
<button name="confirm" value="yes" class="facebox-btn close">Yes</button>/
<button name="confirm" value="no" class="facebox-btn close">No</button>/
</p>/
</div>'').overlay().load();
$(''button[name=confirm]'').click(function(){
if ($(this).val() == ''yes'') {
$(''#dialog'').overlay().close();
obj.data(''confirmed'', true).click().removeData(''confirmed'');
} else {
$(''#dialog'').overlay().close();
}
});
}
Solo tuve que resolver el mismo problema. Terminé usando el widget de dialog de JQuery UI . Pude implementar esto sin utilizar devoluciones de llamada con la advertencia de que el dialog debe inicializarse parcialmente en el controlador de eventos click para el enlace con el que desea usar la funcionalidad de confirmación (si desea usar esto para más de un enlace). Esto se debe a que la URL de destino del enlace se debe inyectar en el controlador de eventos para que haga clic en el botón de confirmación.
Aquí está mi solución, abstraída para ser adecuada para un ejemplo. Uso una clase de CSS para indicar qué enlaces deben tener el comportamiento de confirmación.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
}); // end of $(document).ready
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
Tengo una solución que se puede usar para reemplazar la función window.confirm predeterminada. No requiere que anule la ventana. Confirme que eso no es completamente posible.
Mi solución te permite tener una clase general como yo, digamos ''confirmar-acción'' que colocas en cualquier elemento que requiera confirmación antes de ser procesada. El script es muy simple y utiliza jQuery, jQuery UI Dialog y ningún otro complemento.
Puede encontrar la demostración completa de la implementación en jsFiddle, http://jsfiddle.net/74NDD/39/ .
Uso:
Agregue este código de JavaScript en su cabezal html o antes de cualquier otro enlace de clic que tenga en su javascript.
$("#dialog:ui-dialog").dialog("destroy"); $(''.confirm-action'').live(''click'', function(e) { $self = $(this); if (e && e.stopImmediatePropagation && $self.data(''confirmed'') !== true) { e.stopImmediatePropagation(); $(''#confirm-action-dialog'').dialog({ height: 110, modal: true, resizable: false, draggable: false, buttons: { ''Yes'': function() { $(this).dialog(''close''); $self.data(''confirmed'', true); $self.click(); }, ''No'': function() { $self.data(''confirmed'', false); $(this).dialog(''close''); } } }); } else if ($self.data(''confirmed'') === true) { e = window.event; e.cancelBubble = false; $self.data(''confirmed'', false); } return false; });Coloque este html en algún lugar del cuerpo (está oculto por defecto).
<div style="display:none;" id="confirm-action-dialog" title="Confirm Action?"> <p> <span class="ui-icon ui-icon-alert"></span> Are you sure you want to continue? </p> </div>
Ponga la clase ''confirmar-acción'' en cualquier elemento que requiera confirmación.
confirm-action
Esta solución funciona perfectamente, ya que no altera el burbujeo del evento jQuery, simplemente hace una pausa (detiene) todos los demás eventos hasta que el usuario decida qué es lo que quiere hacer.
Espero que esto sea útil para otra persona, ya que no pude encontrar ninguna otra solución que no requiera la instalación de otro complemento jQuery o algún otro hackeo.