EllisLab text mark
Advanced Search
     
jQuery Delete Confirmation
Posted: 31 January 2008 03:11 PM
Joined: 2007-08-05
251 posts

Hello,

I have a user list and want to create a pop-up asking the admin to confirm if they want to delete the user when they click on a link.

It seems jQuery is a popular Javascript library so I’m looking for something based on that. I’ve looked around google and the jQuery site for some sample code but haven’t had much luck.

If anyone knows any good resources I’d appreciate it.

Thanks.

 Signature 

CI Base - CodeIgniter Repository

 
Posted: 31 January 2008 03:25 PM   [ # 1 ]   [ Rating: 0 ]
Joined: 2007-08-09
52 posts

Why not just a simple Javascript Confirm() ?

My “delete” link looks like this:

<a href="#" onclick="return deletechecked();">Delete checked messages</a

Which points to this javascript function:

function deletechecked()
{
    
var answer confirm("Delete selected messages ?")
    if (
answer){
        document
.messages.submit();
    
}
    
    
return false;  

Which submits the form, and the messages are deleted.

 
Posted: 31 January 2008 03:26 PM   [ # 2 ]   [ Rating: 0 ]
Joined: 2006-07-14
4237 posts

do you want the common modal window. The only thing you need is a class

$('.delete').click(function(){
  
var answer confirm('Delete user');
  return 
answer // answer is a boolean
}); 

If you want a full javascripted modal window check the modal plugins like blockUI

 
Posted: 31 January 2008 04:03 PM   [ # 3 ]   [ Rating: 0 ]
Joined: 2007-08-05
251 posts

Thanks guys.

To pass a variable could I just do:

<a href="#" onclick="return deletechecked('Are you sure you want to delete <?=$row->username ?>');">Delete checked messages</a

Javascript

function deletechecked(message)
{
    
var answer confirm(message)
    if (
answer){
        document
.messages.submit();
    
}
    
    
return false;  
 Signature 

CI Base - CodeIgniter Repository

 
Posted: 02 June 2008 03:27 PM   [ # 4 ]   [ Rating: 0 ]
Joined: 2008-06-02
1 posts

Hi,

I’m new to CodeIgniter and I like it a lot.

xwero - 31 January 2008 08:26 PM

do you want the common modal window. The only thing you need is a class

$('[b].delete[/b]').click(function(){
  
var answer confirm('Delete user');
  return 
answer // answer is a boolean
}); 

 

Thank you xwero.
Using jQuery, I added in CI a class to anchor and it worked.

echo "<td>"anchor('controller/delete/'.$row->id,'Delete',array('class' => 'delete')) ."</td>"

The drawback is that is doesn’t show witch record removes.Maybe adding a ‘title’ to the anchor then showing this in javascript code could do it.

The good is that jQuery is unobtrusive.

PS: I figured out how to get with jQuery anchor attributes

jQuery function

$(document).ready(function(){
        
$('.delete').click(function(){
            
var answer confirm('Delete '+jQuery(this).attr('title'));
                        
// jQuery(this).attr('title') gets anchor title attribute
            
return answer// answer is a boolean
            
}); 
    
}); 

anchor in ci view file

echo "<td>"anchor('controller/delete/'.$row->id,'Delete',array('class' => 'delete''title'=>"$row->username")) ."</td>"
 
Posted: 19 November 2008 06:15 PM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2007-11-16
113 posts

Hey guys, I’m doing something similar but I’d like to use better URLs instead of just href=”#”, anyone have any advice on that?

I tried jquery confirm, but I can’t get my parent TR to hide after I OK the delete:

$('a.delete').click(function(event{

    
$.post($(this).attr('href'), function(data){
        
$(this).parent('tr').fadeOut('fast');
    
});

}).confirm(); 

anyone have any thoughts?

 
Posted: 19 November 2008 08:28 PM   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2008-07-16
664 posts

You can use any href as you wish. You just have to return false always. Taken from example earlier:

function deletechecked(message)
{
    
var answer confirm(message)
    if (
answer){
        document
.messages.submit();
        return 
false// This line added
    
}
    
    
return false;  
 
Posted: 19 November 2008 08:36 PM   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2007-11-16
113 posts

Right on, thanks cahva!

 
Posted: 20 November 2008 05:32 PM   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2008-07-16
664 posts

Actually that line is not needed in that particular example because that indeed returns false always even if the confirm was cancelled(return false is outside the if). My bad. But anyways, the return always false was the point smile

 
Posted: 01 July 2011 03:17 AM   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2011-07-01
1 posts

Hi Guys i’m New to this CodeIgniter that delete conformation is not working for me it is firing before i delete any record(i gave a simple alert in it).i wrote that code in the same view page is that correct please reply fast

this is my code

[removed]
alert(
"hai");
$(
document).ready(function(){
        
$('.delete').click(function(){
            
var answer confirm('Delete '+jQuery(this).attr('title'));
                        
// jQuery(this).attr('title') gets anchor title attribute
            
return answer// answer is a boolean
            
}); 
    
});
[removed] 
echo "<td >".anchor('all/delete/'.$row->newsid'Delete', array('class' => 'delete''title'=>"$row->newsid"))."</td>"
 Signature 

Dilluky

 
Posted: 01 July 2011 03:53 AM   [ # 10 ]   [ Rating: 0 ]
Avatar
Joined: 2011-05-27
13 posts
Kemik - 31 January 2008 09:03 PM

Thanks guys.

To pass a variable could I just do:

<a href="#" onclick="return deletechecked('Are you sure you want to delete <?=$row->username ?>');">Delete checked messages</a

Javascript

function deletechecked(message)
{
    
var answer confirm(message)
    if (
answer){
        document
.messages.submit();
    
}
    
    
return false;  

I’ll add my appreciation too. Very helpful, thanks a lot!

 Signature 

After twelve years of therapy my psychiatrist said something that brought tears to my eyes. He said, “No hablo ingles.”

 
Posted: 01 July 2011 04:00 AM   [ # 11 ]   [ Rating: 0 ]
Avatar
Joined: 2009-05-17
1444 posts

I can’t really take the time to explain how this works, but my javascript uses ajax to connect to another method in my controller, and that method calls a delete method in a model. If the delete method was successful, then it passes a confirmation back to the controller, which sends it back as the ajax response. I can then mark the row as deleted:

$('.delete-img').live('click', function(){
    
var answer confirm('Delete: ' + $(this).parent().next().next().next().html() + '?');
    if(
answer){
        
var rand_chars randomString(16);
        $.
cookie('csrf_token'rand_chars{path'/'domain'<?php echo $_SERVER['HTTP_HOST']; ?>'});
        
tr_id = $(this).parent().parent().attr('id');
        
path = $(this).parent().next().next().next().html();
        $.
post(
            
'/<?php echo $delete_method; ?>/',
            
{
                csrf_token
rand_chars,
                
idtr_id,
                
pathpath,
                
standAlone1
            }
,
            function(
data){
                
if(data.test == 'success'){
                    
$('#' tr_id).addClass('pink');
                    $(
'#delete-confirmation p')
                        .
css('display''block')
                        .
html('MARKED ROWS HAVE BEEN DELETED')
                        .
delay(2500)
                        .
fadeOut('slow');
                
}
            }
,
            
'json'
        
);
    
}else{
        alert(
$(this).parent().next().next().next().html() + ' was not deleted');
    
}
}
);
function 
randomString(length){
    
var chars '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
    if (! 
length{
        length 
Math.floor(Math.random() * chars.length);
    
}
    
var str '';
    for (var 
0lengthi++) {
        str 
+= chars[Math.floor(Math.random() * chars.length)];
    
}
    
return str;

The nice thing with this code is that I can adapt it to any type of user, photo, file, or anything else that I want may want to delete.

 Signature 

Brian
Brian’s Web Design - Temecula
Community Auth - CodeIgniter Authentication Application

 
Posted: 01 July 2011 05:07 AM   [ # 12 ]   [ Rating: 0 ]
Joined: 2010-12-23
254 posts

You can use the jQuery UI Library. (http://jqueryui.com)
It has a dialog box that is totally customizable. You can have your own title and message (html/css formatted) and your own custom buttons and button texts. Cool!

 Signature 

Half the battle is won by following The User Guide. cool grin

 
Posted: 01 July 2011 12:36 PM   [ # 13 ]   [ Rating: 0 ]
Avatar
Joined: 2010-12-09
65 posts
OOP-MVC addict - 01 July 2011 09:07 AM

You can use the jQuery UI Library. (http://jqueryui.com)
It has a dialog box that is totally customizable. You can have your own title and message (html/css formatted) and your own custom buttons and button texts. Cool!


+1 for jquery UI