Okno dialogowe jquery ui jako potwierdzenie

Question

Próbuję zreplikować pole "potwierdzenia" javascript za pomocą okna dialogowego jquery. To jest mój kod,

Ale kiedy próbowałem ostrzec tę metodę, pokazuje ona "niezdefiniowany". Nie czeka na pojawienie się wyskakującego okienka. Jak mogę wykonać tę funkcję customConfirm, aby poczekać na dane wprowadzone przez użytkownika (ok/cancel) ?. Moja potrzeba polega na tym, że metoda customConfirm() zwróci wartość true of false zgodnie z danymi wprowadzonymi przez użytkownika.

Answer 1

Co trzeba zrobić, to użyć jQuery.deferred/obietnicy.

http://api.jquery.com/deferred.promise/

W tym przykładzie asyncEvent

1) tworzy jquery odroczone obiekt

2) ma logiczny dla determinacji/odrzucić swoją OK/Cancel

3) zwraca Obiekt deferred.promise(), który może być następnie użyty z $ .when w celu ustalenia, czy obiekt odroczony został rozwiązany lub odrzucony (ok/anuluj).

Co byś zrobił to

1) utworzyć jquery odroczone obiekt

2) Uruchom okno dialogowe, z ok/anulować ustawienie deferred.resolve/odrzucić

3) zwracają odroczony .promise() obiektu,

4) Użyj odroczony obiekt obietnica z $ .Przy http://api.jquery.com/jQuery.when/

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.reject(); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function() { 
    alert("things are going well"); 
}, 
function() { 
    alert("you fail this time"); 
}); 

Można też po prostu użyć determinację i określić, czy potwierdzić było prawdziwe lub fałszywe w $ .Przy,

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(true); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.resolve(false); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function(confirm) { 

    if(confirm){alert("things are going well");} 
    else{alert("you fail this time");} 
}); 

nadzieję, że pomoże.

Answer 2

Powinieneś załadować okno dialogowe funkcji gotowości dokumentu. Infolinia dialogowego na customConfirm funkcji

function customConfirm(customMessage) { 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog("open"); 
    } 

    $(document).ready(function(){ 
    $("#popUp").dialog({ 
     resizable: false, 
     autoOpen: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       return false; 
      } 
     } 
    }); 

    }); 

Answer 3

To jest to, co robię używając zepto z modułami odroczonymi i wywołania zwrotnego, działa jak urok. powinna być podobna do jQuery lub można po prostu zaimportować odraczane i Callbacki moduły do ​​swojego html

function customConfirm(customMessage) { 
    var d = new $.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 300, 
     modal: true, 
     buttons: { 
      "Yes": function() { 
       $(this).dialog("close"); 
       d.resolve() 
      }, 
      "No": function() { 
       $(this).dialog("close"); 
       d.reject(); 
      } 
     } 
    }); 
return d.promise(); 
} 

customConfirm("Do you Want to delete the File?") 
.then(function(){ 
    console.log("You Clicked Yes") 
}) 
.fail(function(){ 
    console.log("You Clicked No") 
});