Delete Confirmation Message

[hobbiton73]

Hi, I wonder whether someone may be able to help me please.

 

Firstly, my apologies if this isn't the right forum to add this post to. Because my problem relates to both JavaScript and AJAX I wasn't quite sure where to post it.

 

The extract of code below creates a table of 'Location' records, pertinent to the current user.

 

   
echo "<tr>\n"; 
$theID = $row['locationid']; 
echo " <td style='text-align: Center'>{$row['locationname']}</td>\n"; 
echo " <td style='text-align: Left'>{$row['returnedaddress']}</td>\n"; 
echo " <td style='text-align: Center'>{$row['totalfinds']}</td>\n"; 
echo " <form action= locationsaction.php  method= 'post'><input type='hidden' name='lid' value=$theID/>
<td><input type= 'submit' name= 'type' value= 'Details'/></td>
<td><input type= 'submit' name= 'type' value= 'Images'/></td>
<td><input type= 'submit' name= 'type' value= 'Add Finds'/></td>
<td><input type= 'submit' name= 'type' value= 'View Finds'/></td>
<td><input type= 'submit' name= 'type' value= 'Delete'  id= 'delete'/></td></form>\n"; 
echo "</tr>\n"; 

 

You'll see that of the code there are 5 buttons which appear on each row of the table. Clicking on any of these navigates the user to different screens, but all linked back to the main 'Location' record via a 'lid' variable.

 

The function of navigating the user to the correct page is fulfilled by the 'locationsaction.php' script which is shown below:

 

<?php 
session_start();
$_SESSION['lid'] = $_POST['lid'];
if (isset($_POST['type'])) {
    $urls = array(
        'Details' => 'viewlocation.php',
        'Add Finds' => 'addfinds.php',
        'Images' => 'addimages.php',
      'View Finds' => 'locationfinds.php',
      'Delete' => 'deletelocation.php'
    );
    $url = $urls[$_POST['type']];
    header("Location: " . $url);
}
?>

 

I'm now trying to add a 'Confirmation' message which will appear when the user selects 'Delete', the source of which can be found in the 'script.js' code from the link below.

 

http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

 

I admit that I am very new to JavaScript, but this is what I've managed to put together so far.

 

 <script type="text/javascript">
$('.item #delete').click(function () {

    var elem = $(this).closest('.item');

    $.confirm({
        'title': 'Delete Confirmation',
        'message': 'Delete?',
        'buttons': {
            'Yes': {
                'class': 'blue',
                'action': function () {
                    //elem.slideUp();
                    $.ajax({
                        url: 'locationsaction.php',
                        type: 'post',
                        data: {
                            lid: "VALUE",
                            type: 'Delete' //you need to add the type here!
                        },
                    });

                }
            },
            'No': {
                'class': 'gray',
                'action': function () {} // Nothing to do in this case. You can as well omit the action property.
            }
        }
    });
</script>

 

 

The problem I'm having is that I don't know how to tie up the button click with JavaScript code. At the moment upon clicking 'Delete' the record is deleted without the 'Confirmation' message.

 

I've run this through JavaScript console and there are no errors shown. I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.

 

Many thanks and kind regards

[Ryflex]

I'm no master in java (more noob than whatsoever) but I checked the page you gave and it seems your missing a part of the .js

(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);

[hobbiton73]

Hi @Ryflex, thank you for taking the time to reply to my post.

 

My apologies as I should have made this clear in my original post. All the other scripts, including the one you have highlighted are included in the header section of my page as external scripts

 

The script you refer to, and I'm happy to be proven wrong, deals with how the buttons on the confirmation message appear and behave, rather than using a button click to make the confirmation message appear.

 

Once again many thanks and kind regards

 

[Ryflex]

Hi,

 

What I noticed with the .js I used and also on you're example page is that sometimes you need to have the .js in the body.

Dunno why but it helped on my side

[hobbiton73]

Hi, thank your for your continued help with this.

 

I have tried incorporating the js , but unfortunately this doesn't solve  my problem. I think the issue lies with the link between the button and the JS function, I just need to try and figure how to link them together.

 

Many thanks and kind regards