Javascript 确认更改为 jquery 模式对话框

Question

我在这里有一个通过 ajax 删除的记录。如果我想删除记录，我会添加确认消息。我需要的是将确认消息更改为模态对话框http://jqueryui.com/dialog/#modal-confirmation。

我想更改这个 javascript 代码

if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))

进入这个 jquery 模态对话框。有什么帮助吗？

<script>
$(function () {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete all items": function () {
        $(this).dialog("close");
      },
      Cancel: function () {
        $(this).dialog("close");
      }
    }
  });
});
</script>

Ajax 删除

<script>
$(function () {
  $(".delbutton").click(function () {
    //Save the link in a variable called element
    var element = $(this);
    //Find the id of the link that was clicked
    var del_id = element.attr("name");
    //Built a url to send
    var info = 'name=' + del_id;
    if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
      $.ajax({
        type: "GET",
        url: "delete.php",
        data: info,
        success: function () {}
      });
      $(this).parents(".record").animate({
        backgroundColor: "#fbc7c7"
      }, "fast")
        .animate({
          opacity: "hide"
        }, "slow");
    }
    return false;
  });
});
</script>

Answer 1

您将在您的 html 代码中覆盖 javascript 的确认方法，如下所示

 <script>
 function confirm(message) {
 var myTitle = 
        "<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
        $('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
        modal: true,
        width: 300,
        height: 'auto',
        bgiframe: false,
        //position: ['top', 5],
        draggable: true,
        closeOnEscape: true,
        minHeight:20,
        buttons: [{
            text: "Cancel",
            "style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
              click:function(){
                $(this).dialog('close');
                return false;
            }

        },{
        text: "Ok",
        "style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
          click:function(){
            $(this).dialog('close');
        }
        }
        ],
        close:function(){ $(this).dialog('destroy').remove(); }
    }).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
    //$("#dlgTest1").dialog("open").dialog("moveToTop");
};

然后使用它，但是注意不要在上面使用html提交按钮，使用html普通按钮

Answer 2

 //try this code   

 <script>
    var isConfirmed=false;
    $(function () {
      $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
          "Delete all items": function () {
             isConfirmed=true;
            $(this).dialog("close");
          },
          Cancel: function () {
            isConfirmed=false;
            $(this).dialog("close");
          }
        }
      });


    $(".delbutton").click(function () {
        //Save the link in a variable called element
        var element = $(this);
        //Find the id of the link that was clicked
        var del_id = element.attr("name");
        //Built a url to send
        var info = 'name=' + del_id;
        $("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
        if (isConfirmed) {
          $.ajax({
            type: "GET",
            url: "delete.php",
            data: info,
            success: function () {}
          });
          $(this).parents(".record").animate({
            backgroundColor: "#fbc7c7"
          }, "fast")
            .animate({
              opacity: "hide"
            }, "slow");
        }
        return false;
      });
    });
    </script>

Answer 3

//replace your script with this code and try

 <script>
    var isConfirmed=false;
    $(function () {
      $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
          "Delete all items": function () {
             isConfirmed=true;
            $(this).dialog("close");
          },
          Cancel: function () {
            isConfirmed=false;
            $(this).dialog("close");
          }
        }
      });


    $(".delbutton").click(function () {
        //Save the link in a variable called element
        var element = $(this);
        //Find the id of the link that was clicked
        var del_id = element.attr("name");
        //Built a url to send
        var info = 'name=' + del_id;
        $("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
$("#dialog-confirm").dialog();
        if (isConfirmed) {
          $.ajax({
            type: "GET",
            url: "delete.php",
            data: info,
            success: function () {}
          });
          $(this).parents(".record").animate({
            backgroundColor: "#fbc7c7"
          }, "fast")
            .animate({
              opacity: "hide"
            }, "slow");
        }
        return false;
      });
    });
    </script>