Custom product delete with confirmation dialogue box

Question

I had changed some default opencart admin product list filter functions, thats as follows: if I need to delete product from list I replace instead of check box with single click each product delete icon, screenshot attached here...

Its working fine, but how can I set a jquery function with dialogue box Confirm delete?, like our default opencart product delete confirmation... when click delete button ask confirm delete? with confirm and cancel button dialogue box... any ideas?

My product delete button with list in html:

<?php if ($products) { ?>
<?php foreach ($products as $result) { ?>    
<div class="product">      
    <a href="<?php echo $result['delete']; ?>"><img src="delete.png" title="<?php echo $button_delete; ?>" /></a>
    <img src="<?php echo $result['image']; ?>" alt="<?php echo $result['name']; ?>"/>
    <a href="<?php echo $result['view']; ?>"><?php echo $result['name']; ?></a>         
</div>
<?php } ?>
<div class="pagination"></div>
<?php } else { ?>
<div class="empty"><?php echo $text_empty; ?></div>
<?php } ?>

From above code delete button:

<a href="<?php echo $result['delete']; ?>"><img src="delete.png" title="<?php echo $button_delete; ?>" /></a>

Any ideas?

Answer 1

NON jQuery

The HTML:

<a href="#" onclick='confirm_delete("<?php echo $result['delete']; ?>", "<?php echo $result['name']; ?>"); return false;'>
  <img src="delete.png" title="<?php echo $button_delete; ?>" />
</a>

The Javascript:

<script>
function confirm_delete(link_to_delete, product_name) {
  var msg=confirm("Are you sure you want to delete " + product_name + " ?");
  if (msg==true)
  {
    window.location.href = link_to_delete;
  }
}
</script>

jQuery

The HTML:

<a class="delete_button" href="<?php echo $result['delete']; ?>">
  <img src="delete.png" title="<?php echo $button_delete; ?>" />
</a>

The javascript (jQuery):

<script>
jQuery(".delete_button").on("click", function(e) {
  e.preventDefault();
  var clicked = jQuery(this);
  var clicked_url = clicked.attr("href");
  var product_name = clicked.siblings("img").attr("alt");
  var msg=confirm("Are you sure you want to delete " + product_name + " ?");
  if (msg==true)
  {
    window.location.href = clicked_url;
  }
});
</script>

Answer 2

You could leverage jQuery a little using:-

$('div.product a img[src="delete.png"]').on('click', function(event){
    if( ! confirm('Delete?')) {
        event.preventDefault();
        return false;
    }
    return true;
});

Answer 3

Here's how I did it on a row of items, each of which is called an "offer." This is the template code:

<a href="<?php echo $offer['delete']; ?>" data-toggle="tooltip" title="<?php echo $button_delete; ?>" class="btn btn-primary" onclick="confirm('<?php echo $text_confirm; ?>') ? $('#form-discount_chooser').submit() : false;"><i class="fa fa-trash-o"></i></a>

Prior to calling the template, your controller would set $offer['delete'] as follows:

       $data['offers'][] = array(
           ... 
            'delete' => $this->url->link('extension/module/discount_chooser/delete', 'token=' . $this->session->data['token'] . '&offer=' . $discount['id'] . $url, true)
        );

Then in the controller's delete() method, be sure to handle the fact that this is a single item, not one or more checkboxes:

// Handle onesies
if (!isset($this->request->post['selected'])) {
   if (isset($this->request->get['offer'])) {
     $this->request->post['selected'] = array($this->request->get['offer']);
   }
}