thoại jquery: khẳng định nhấp chuột vào một nút gửi

Question

Tôi đang cố gắng để làm một hộp thoại xác nhận sử dụng jquery, nhưng hình thức không được gửi ở tất cả, đây là những gì tôi nhận:

<script type="text/javascript"> 
    var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        currentForm.submit(); 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

    function ask() { 
     currentForm = $(this).closest('form'); 
     $("#dialog-confirm").dialog('open'); 
    } 
</script> 
<form ... > 
    <input type="submit" value="delete" onclick="ask();return false;" /> 
</form> 

Answer 1

bạn cần có nút thoại của bạn nộp <form>, như thế này:

   'Delete all items': function() { 
        $(this).dialog('close'); 
        $("#myForm").submit(); 
       } 

Phần còn lại của mã của bạn là chính xác, nhưng hiện tại nó chỉ đóng hộp thoại và quay lại, bạn cần phải thực sự gửi biểu mẫu. Ngoài ra, nó tốt hơn để làm điều này như một handler nhấp chuột, thay vì onclick, như thế này (cập nhật để lấy ý kiến ​​):

var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        $(this).dialog('close'); 
        currentForm.submit(); 
       }, 
       'Cancel': function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $(".delete").click(function() { 
      currentForm = $(this).closest('form'); 
      $("#dialog-confirm").dialog('open'); 
      return false; 
     }); 
    }); 

Sau đó chỉ cần cung cấp cho <input> của bạn một lớp của delete, như thế này:

<input class="delete" type="submit" value="delete" /> 

Answer 2

Nếu bạn đang sử dụng jQuery, sau đó làm điều đó đúng và tránh inline Javascript:

$(function(){ 
    $("form").submit(function(){ 
    // return false if you don't want this to be submitted 
    // maybe do a 
    // return ask(); 
    // but with the code provided it doesn't seem 
    // to work like that - ask() is not returning anything at all! 
    }); 
}); 

Answer 3

này đã làm việc cho tôi:

$(function() { 
    $("#accordion").accordion({ 
     heightStyle: "content" 
    }); 

    function confirmDialog(title, message, success) { 
     var confirmdialog = $('<div></div>').appendTo('body') 
      .html('<div><h6>' + message + '</h6></div>') 
      .dialog({ 
       modal: true, 
       title: title, 
       zIndex: 10000, 
       autoOpen: false, 
       width: 'auto', 
       resizable: false, 
       buttons: { 
        Yes: function() { 
         success(); 
         $(this).dialog("close"); 
        }, 
        No: function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close: function() { 
        $(this).remove(); 
       } 
      }); 

     return confirmdialog.dialog("open"); 
    } 

    $('form').on('submit', function (e) { 
     e.preventDefault(); 
     var form = this; 

     confirmDialog('Confirm', 'Are you sure?', function() { 
      form.submit(); 
     }); 
    }); 
}); 

tham khảo: http://jsfiddle.net/pmw57/67Ge2/