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

Question

I have here a delete record via ajax. I add confirm message if I want to delete the record or not. What I need is change the confirm message into modal dialog http://jqueryui.com/dialog/#modal-confirmation .

I want to change this javascript code

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

into this jquery modal dialog. Any help?

<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 delete

<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

You will override confirm method of javascript in your html code as follow

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

and then use it , But be careful don't use html submit button on it, Use html normal button

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>