En confirm.js hay un código como esta página (http: // www .developphp.com / view.php? tid = 1385 (dialog.js))

Quiero hacer algunas operaciones en PHP (como eliminar registros de la base de datos y enviar un formulario) después de hacer clic en el botón Sí y después de no, debería devolver falso

¿es posible?

<script type="text/javascript" src="confirm.js"></script>
<script type="text/javascript">
function validation()
{
    if(document.getElementById('tbox').value=='')
    {
        alert('enter value');
        return false;
    }
    else
    {
        confirm.render('','','sub_btn');
    }
}
</script>
<form method="get">
    <table width="100%" height="500px" z-index="500000" style="background:yellow;">
        <tr>
            <td>
                <input type="text" id="tbox">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" id="sub_btn" value="Submit" onclick="return validation()">
            </td>
        </tr>
    </table>
</form>
1
user3337667 4 sep. 2014 a las 19:09

3 respuestas

La mejor respuesta

No.

No hay forma de crear un diálogo en el DOM que bloquee el bucle de eventos de JavaScript.

Debe detener lo que estaba haciendo cuando lo mostró, y luego hacer que las opciones en el diálogo reinicien el proceso donde lo dejó.

1
Quentin 4 sep. 2014 a las 15:11

Hola, mis siguientes comentarios fueron eliminados. Entonces, ahora que he encontrado una solución, se la daré a todos ustedes debajo de los comentarios:

He creado un código de cuadro de confirmación personalizado en JavaScript puro que se ve y funciona muy bien. Es muy fácil Pero el problema es que si tengo que tomar 2 confirmaciones del usuario en la misma página web, entonces tengo que escribir un conjunto separado de funciones (2 para cada conjunto con diferentes nombres de funciones).

No veo cómo la devolución de llamada puede ayudarme a resolver mi problema. La función de devolución de llamada también se ejecuta inmediatamente sin esperar a verificar si el usuario hizo clic en el botón Confirmar o Cancelar.

¿Puedo pasar el nombre de la función de devolución de llamada a otra función que use setTimeOut () y espere unos 15 minutos para que el usuario haga clic en Confirmar o Cancelar? Al hacer clic en los botones, puedo registrar la elección del usuario en una variable global y clearTimeOut () para ejecutar la siguiente parte de inmediato. Después de 15 minutos, si no se obtiene una respuesta del usuario, deje que se trate como Cancelar respuesta, lo que debería ser seguro. ¿Alguien quiere intentar resolver esto?

No toco ni leo jQuery, Angular, etc. Por favor, déjenme fuera de esas discusiones.

OK AQUÍ ESTÁ LA SOLUCIÓN. El archivo principal es customConfirm.htm: -

<html>
<head>
<style>
/* ~~~~~~~~~~~~~~~ Style for the pop box with blackener ~~~~~~~~~~~~~~~~~~~ */
.popBoxStyle { position: absolute; text-align: center;

visibility:hidden;
z-index: 2000;                                                              /* Nairit: Set high so that shows over page contents */
cursor: default;

background-color: #FFFFFF;
border:2px solid;
border-color: #6F7072;
border-radius:6px;                              /* More gives rounder edges */
box-shadow: 10px 10px 5px #606060;              /* Shadow can be used when black overlay is not used on the rest of the page. Or black has low opacity */

filter:alpha(opacity=100);                                          /* Works in IE */
opacity:1.0;                                                        /* Works in others. This is for the opacity of the box's background */

padding:3px;
}

.liner { clear:both; height:1px; background-color:#cccccc; }
.spacer { clear:both; height:5px; }

.black { position:absolute; z-index:1999; }

button.close { float:right; margin:5px; cursor:pointer; background-color:#d9534f !important; border-radius:4px !important; color:#fff !important; font-size:21px; font-weight:bold; line-height:1; color:#000000; }
/* ~~~~~~~~~~~~~ Style for the pop box with blackener ends ~~~~~~~~~~~~~~~~~~ */
</style>

<script language="javascript" src="PopBox.js"></script>
<script language="javascript">
var affirm = false; tm_ref=null, cb_func_name=null;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function customConfirm(func,msg)
{
initializePopBox();

popBox.innerHTML = "<table width='100%' cellspacing='0' cellpadding='5' border='0'>" +
"<tr><td>CONFIRM</td>" +
    "<td><button type='button' class='close' style='float:right;margin:5px;' onClick='setUserResponse(false);'>x</button></td></tr>" +
"<tr><td colspan='2'><div class='liner'></div></td></tr>" +
"<tr><td colspan='2'>"+msg+"</td></tr>" +
"<tr align='right'>" +
    "<td><input type='button' name='b_cancel' value='Cancel' onClick='setUserResponse(false);'></td>" +
    "<td><input type='button' name='b_confirm' value='Confirm' onClick='setUserResponse(true);'></td></tr>" +
"</table>";

aWidth = 300; aHeight = 150;
finalizePopBox(50);
cb_func_name = func;                        // Storing the callback function's name globally
tm_ref = setTimeout(func, 30000);           // 60000 milli seconds = 1 minute. 600000 milli seconds = 10 minutes. 900000 milli seconds = 15 minutes
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function handleConfirmResponse()
{
hidePop();
    if( affirm )
    {
    alert("He said Yes");       // Do your work here
    }

    else
    {
    alert("He said No");        // Do nothing
    }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function setUserResponse(respo)
{
affirm = respo;
clearTimeout(tm_ref);
cb_func_name();                 // Gets the function name from global and calls it
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</script>
</head>

<body>
<div id="blackener" class="black"></div>
<div id="popContainer" class="popBoxStyle"></div>                   <!-- NK: The pop-up appears in this div -->

<input type="button" name="b1" value="Delete" onClick="customConfirm(handleConfirmResponse,'Are you sure?');">

</body>
</html>

EL ARCHIVO DE APOYO ES PopBox.js: -

var popBox, popBoxStyl, BlackRef, aWidth, aHeight;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initializePopBox()
{
popBox = document.getElementById("popContainer");
popBoxStyl = document.getElementById("popContainer").style;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function finalizePopBox(tp)     // Height from page top
{
popBoxStyl.width = aWidth + "px";
popBoxStyl.height = aHeight + "px";
popBoxStyl.left = parseInt(  ( (document.body.clientWidth - aWidth)/2 )  ) + "px";
    if(tp)
    popBoxStyl.top = tp;
    else
    popBoxStyl.top = parseInt(  ( (document.body.clientHeight - aHeight)/2 )  ) + "px";

popBoxStyl.visibility = "visible";          // Nairit: So they are using .style.visibility = . Not .style.display = which I use normally. Learn this way.
blacken();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function blacken()
{
BlackRef = document.getElementById("blackener");

var ht = document.body.scrollHeight;                // document.body.scrollHeight > document.body.offsetHeight > document.body.clientHeight
var wd = document.body.offsetWidth;                 //alert(ht); alert(wd);

BlackRef.style.left = "0px";
BlackRef.style.top = "0px";
BlackRef.style.height = ht + "px";
BlackRef.style.width = wd + "px";

BlackRef.style.backgroundColor = "#000000";
BlackRef.style.opacity = "0.5";
BlackRef.style.filter = 'alpha(opacity=50)';

BlackRef.style.display = "block";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function hidePop()
{
popBoxStyl.visibility = "hidden";

BlackRef.style.backgroundColor = "#ffffff";
BlackRef.style.opacity = "1.0";
BlackRef.style.filter = 'alpha(opacity=100)';

BlackRef.style.display = "none";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Llamé con éxito a customConfirm () desde 2 lugares diferentes en la misma página web. Tuve que pasar 2 nombres de función de devolución de llamada de controlador de respuesta diferentes. Antes de llamar a customConfirm (), tuve que hacer global cualquier variable cuyo valor se requerirá en la función de devolución de llamada respectiva. Pero vale la pena el esfuerzo ;-)

1
Nairit 27 jul. 2018 a las 13:22

No no puede replicar exactamente las solicitudes de confirmación / alerta / solicitud predeterminadas. Esto impide que JavaScript se ejecute más allá de esa línea hasta que se devuelva algo, lo que no es posible hacer desde JavaScript.

Hay muchos cuadros de diálogo modales personalizados, y para evitar el hecho de que no puede bloquear el javascript para esperar una respuesta, en su lugar usan devoluciones de llamada . Pasa una función a la llamada para una ventana de diálogo, y esta función se ejecutará una vez que la ventana de diálogo haya finalizado.

Algunos ejemplos por ahí son:

http://bootboxjs.com/

http://jqueryui.com/dialog/

Un google rápido te dará toneladas más. Realicé uno yo solo desde JavaScript ya que no quería tener archivos css. No es tan completo como otros, pero es puramente javascript, así que aquí hay un enlace: http://heuuuth.com/applications/JamModal.html

2
James 4 sep. 2014 a las 15:28