Formular bestätigen mit jquery UI senden

Question

Ich versuche ein Formular zu bestätigen, das mit Ruby auf Schienen erstellt wird, aber vor dem Einreichen habe ich eine Bedingung, die ein Bestätigungs-Popup öffnet und fragt, ob der Benutzer es wirklich möchte. Dies funktioniert mit der Standard-Bestätigungsbox. Aber jetzt versuche ich es mit Jquery UI zu tun, aber es funktioniert nicht. Wie kann ich wahr oder falsch mit jquery ui zurückgeben?

Wenn der Benutzer klicken Sie auf „Ja“ sollte das Formular abgeschickt werden, wenn „Nein“ sollte es nur in der Nähe

das ist meine jQuery UI-Funktion:

function confirm(message, callback) { 
    $('body').append('<div id="confirm" style="display:none">'+message+'</div>'); 
    $("#confirm").dialog({ 
     resizable: false, 
     title: 'Confirm', 
     zIndex: 99999999, 
     modal: true, 
     buttons: [ 
     { 
      text: "Yes", 
      click: function() { 
      $(this).dialog("close"); 
      if ($.isFunction(callback)) { 
       callback.apply(); 
      } 

      } 
     },{ 
      text: "No", 
      click: function() { $(this).dialog("close");} 
     } 
     ], 
     close: function(event, ui) { 
     $('#confirm').remove(); 
     } 
    }); 
    } 

Und meine einreichen Funktion:

 $('form').submit(function(){ 

      <% @meetings.each do |mt| %> 

     ... 

      <%# cvalue_starthour.value %> 

      $meeting_dates = []; 

    ... 

      $.each($meeting_dates, function (index, value) { 
      $.each($test, function (index2, value2) { 
); 

       if (value.priority == "<%= l(:default_priority_trivial) %>" || "<%= l(:default_priority_minor) %>" || "<%= l(:default_priority_major) %>") { 

       if ((value.date == value2.date) && (value.time == value2.time)) { 
        message = confirm("Are you sure?"); 


       } 
       } 
      }); 
      }); 


      <%  end %> 


      <% end %> 

      if (message) { 
      return true; 
      } else { 
      return false; 
      } 
     }); 


     }); 

Answer 1

Das Problem besteht in der Art und Weise, in der der Browser seine eigenen Warn-, Bestätigungs- und Prompt-Meldungen im Vergleich zu selbst erstellten Dialogen verarbeitet. Sie müssen ein Szenario für den Versuch/Fang hinzufügen.

Ich habe die folgenden ein wenig an diese Adresse zurück: https://jsfiddle.net/Twisty/7kp46r22/3/

für den Benutzer warten Dies verwendet $.Deferred und $when() eine Auswahl zu treffen, bevor die Ergebnisse oder die Ausführung alle Rückrufe zurück.

Für Ihre Anwendung könnte dies wie folgt aussehen:

Arbeitsbeispiel: https://jsfiddle.net/Twisty/wtogu9cu/

HTML

<form id="myForm"> 
    Submit Form: 
    <button type="submit">Go</button> 
</form> 

jQuery

function ui_confirm(message, callback) { 
    var dfd = $.Deferred(); 
    var dialog = $("<div>", { 
     id: "confirm" 
    }) 
    .html(message) 
    .appendTo($("body")) 
    .data("selection", false) 
    .dialog({ 
     autoOpen: false, 
     resizable: false, 
     title: 'Confirm', 
     zIndex: 99999999, 
     modal: true, 
     buttons: [{ 
     text: "Yes", 
     click: function() { 
      $(this).dialog("close"); 
      dfd.resolve(true); 
      if ($.isFunction(callback)) { 
      callback.apply(); 
      } 
     } 
     }, { 
     text: "No", 
     click: function() { 
      $(this).dialog("close"); 
      dfd.resolve(false); 
     } 
     }], 
     close: function(event, ui) { 
     $('#confirm').remove(); 
     } 
    }); 
    dialog.dialog("open"); 
    return dfd.promise(); 
} 
$(function() { 
    $('#myForm').submit(function(e) { 
    e.preventDefault(); 

    // your code 

    $.when(ui_confirm("Are you sure?")).done(function(val) { 
     if (val) { 
     console.log("Submit the form."); 
     $('#myForm')[0].submit(); 
     } else { 
     console.log("Do not submit the form."); 
     } 
    }); 
    }); 
});