Custom confirm pop

Question

I'm trying to customize confirm message using plugins. I have php tables records that has delete button every row. How I can customize the confirm pop up just like in jquery plugins below?

<?php echo'
<tr class="record"> 
    <td align="center"><a href="#" id="'.$row["counter"].'" class="delbutton"><img src="images/del.png"></a></td></tr>';
?>
    <script>
        $(function() {
        $(".delbutton").click(function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
         if(confirm("Are you want to continue ?"))
                  {
         $.ajax({
           type: "GET",
           url: "delete.php",
           data: info,
           success: function(){
           }
         });
                 $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow");
         }
        return false;
        });
        });
    </script>

Jquery Plugins

<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>
</head>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Check http://stackoverflow.com/questions/43955/changing-the-default-title-of-confirm-in-javascript bottomline you can do it without using plugins, you can use tha same plugin in your php if you want — Raunak Kathuria, Jan 08 '14 at 01:56

score 0 · Answer 1 · answered Jan 08 '14 at 02:12

0

If you need more help, just ask.

"Delete all items": function() {
// insert your ajax here
$( this ).dialog( "close" );
},

Reference: .dialog()

answered Jan 08 '14 at 02:12

manta

1,663
12
12

score 0 · Accepted Answer · answered Jan 08 '14 at 02:14

Hope this helps:

  <?php echo'
  <tr class="record"> 
      <td align="center"><a href="#" id="'.$row["counter"].'" class="delbutton"><img src="images/del.png"></a></td></tr>';
  ?>
  <script>
      $(function() {
        $(".delbutton").click(function(){
            var element = $(this);
            var del_id = element.attr("id");
            var info = 'id=' + del_id;
            $( "#dialog-confirm" ).dialog({
                  resizable: false,
                  height:140,
                  modal: true,
                  buttons: {
                    "Delete all items": function() {                           
                       $.ajax({
                         type: "GET",
                         url: "delete.php",
                         data: info,
                         success: function(){
                            $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
                         }
                       }); 
                       $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                      $( this ).dialog( "close" );
                      return false;
                    }
                  }
                }); // end Dialog         
            return false;
        }); // end .delbtn
    }); // end jquery load
  </script>

the item deleted but the animation of deleting records is lost. — user3097736, Jan 08 '14 at 02:52
You can try the following `$(this).parents(".record").fadeOut('slow')` instead of `$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");`. Hope this help — Anunay, Jan 22 '14 at 06:58

Custom confirm pop

2 Answers2