jquery UIでフォームを確認する

Question

Ruby on Railsを使用して作成された送信フォームを確認しようとしていますが、送信する前に、ユーザーが本当に実行したいかどうかを確認する確認ポップアップを開く条件があります。これはデフォルトのブラウザの確認ボックスで動作しています。しかし、今私はJqueryのUIでそれをしようとしているが、それは動作していない。 jQueryを使用してtrueまたはfalseを返すにはどうすればよいですか？

ユーザーのクリックは、「はい」フォームを提出する必要がある場合は、「NO」であれば、それべきちょうど近く

これは私のjqueryのUI機能である：

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(); 
     } 
    }); 
    } 

そして、私の機能を提出：

 $('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

この問題は、ブラウザが自身の警告、確認、プロンプト対自己生成ダイアログの処理方法にあります。 try/catchのようなシナリオを追加する必要があります。

私はこれに対処するために少し戻って、次の作成：https://jsfiddle.net/Twisty/7kp46r22/3/

これは、結果を返す、または任意のコールバックを実行する前に、選択を行うために、ユーザーを待つ$.Deferredと$when()を使用していますが。あなたのアプリケーションのために

、これは次のようになります。

の作業例：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."); 
     } 
    }); 
    }); 
});