2011-03-12 25 views
8

Ésta puede ser una fácil respuesta-Javascript - Confirmar cuadros de diálogo personalizados - la sustitución de JS confirmar

En mis JS He reemplazado la función de JS confirmar con la mía. Que se parece, básicamente, y simplemente así:

function confirm(i){ 
    var options = '<br/><br/><input class="button1" value="Yes" type="button" onclick="return true"> <input class="button1" value="No" type="button" onclick="return false">'; 
    $('#text').html(i+options); 
    $('#confirmDiv').fadeIn('fast'); 
} 

Obviamente el retorno verdadero/falso no funcionó, si no, no estaría pidiendo!

En otra función que tengo (Así se obtiene la imagen):

var con = confirm("Are you sure you'd like to remove this course?"); 
    if(!con){return;} 

¿Cómo puedo confirmar que devolver el valor directamente? Asumo que es return {this.value} más o menos?

Gracias!

+0

¿Cuáles son los contenidos de confirmDiv? – Kon

+1

No es posible. Normalmente, un 'confirmar' espera hasta que el usuario haya proporcionado una respuesta. Como Javascript no tiene una espera/inactividad, debe solucionar este problema utilizando una devolución de llamada. – Wolph

+0

posible duplicado de [¿Puedes esperar la devolución de llamada de javascript?] (Http://stackoverflow.com/questions/436608/can-you-wait-for-javascript-callback) – Wolph

Respuesta

9

Su problema es que su confirmación personalizada no es modal. Eso significa que cuando se muestra su confirmación, el código se ejecuta. No hay ninguna posibilidad de que espere la elección del usuario dentro del confirm() y lo devuelva desde allí.

Por lo que yo sé, no hay manera de emular el comportamiento de un diálogo de confirmación modal en Javascript (a excepción de la no-estándar ShowModalDialog().)

La forma habitual de hacer esto es la adición de una devolución de llamada function() { ... } al evento click de cada botón, y hacer lo que se supone que debe hacer el clic "ok" allí.

5

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 de confirmación (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(); 
     } 
    }); 
} 
1

encontré otro hackeado solución a emule el diálogo modal como se menciona en Pekka 웃 antes. Si rompe la ejecución de JS, no es necesario repetir el ciclo (verdadero). Después de recuperar la entrada de los usuarios (clic), podemos continuar con la ejecución de JS mientras volvemos a llamar al método de origen con eval y volviendo a la elección de los usuarios como booleana. he creado una pequeña jsFiddle con jQuery y notyjs simplemente para mostrar mi solución: jsfiddle: Overriding native modal confirm alert

Aquí de nuevo el código importante:

/** confirm as noty.JS **/ 
var calleeMethod2 = null; 
var returnValueOfConfirm = null; 
var args = null; 
var calleeMethod = null; 
var refreshAfterClose = null; 
var savedConfirm = window.confirm; 
window.confirm = function(obj) { 
    // check if the callee is a real method 
    if (arguments.callee.caller) { 
     args = arguments.callee.caller.arguments; 
     calleeMethod = arguments.callee.caller.name; 
    } else { 
     // if confirm is called as if/else - rewrite orig js confirm box 
     window.confirm = savedConfirm; 
     return confirm(obj); 
    } 
    if (calleeMethod != null && calleeMethod == calleeMethod2) { 
     calleeMethod2 = null; 
     return returnValueOfConfirm; 
    } 
    noty({ 
     text: obj, 
     buttons: [{ 
      text: 'Yes', 
      onClick: function($noty) { 
      $noty.close(); 
      noty({ 
       text: 'YES', 
       type: 'success' 
      }); 
      } 
     }, { 
      text: 'No', 
      onClick: function($noty) { 
      $noty.close(); 
      noty({ 
       text: 'NO', 
       type: 'error' 
      }); 
      } 
     }] 
    }); 
    throw new FatalError("!! Stop JavaScript Execution !!"); 
} 

function runConfirmAgain() { 
    calleeMethod2 = calleeMethod; 
    // is a method 
    if (calleeMethod != null) { 
    var argsString = $(args).toArray().join("','"); 
    eval(calleeMethod2 + "('" + argsString + "')"); 
    } else { 
    // is a if else confirm call 
    alert('confirm error'); 
    } 
} 
Cuestiones relacionadas