Part of the EllisLab Network
CodeIgniter  >   Forum Home  >  CodeIgniter Development Forums  >  Code!  >  Thread
   
 
jQuery Delete Confirmation
 
Kemik
Posted: 31 January 2008 03:11 PM   [ Ignore ]  
Lab Assistant
RankRank
Total Posts:  255
Joined  08-05-2007

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
Profile
 
 
Alex007
Posted: 31 January 2008 03:25 PM   [ Ignore ]   [ # 1 ]  
Grad Student
Rank
Total Posts:  54
Joined  08-09-2007

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.
Profile
 
 
xwero
Posted: 31 January 2008 03:26 PM   [ Ignore ]   [ # 2 ]  
Sr. Research Associate
RankRankRankRankRank
Total Posts:  4785
Joined  07-14-2006

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
Profile
 
 
Kemik
Posted: 31 January 2008 04:03 PM   [ Ignore ]   [ # 3 ]  
Lab Assistant
RankRank
Total Posts:  255
Joined  08-05-2007

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
Profile
 
 
Alex 2008
Posted: 02 June 2008 02:27 PM   [ Ignore ]   [ # 4 ]  
Summer Student
Total Posts:  1
Joined  06-02-2008

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>"; 
Profile
 
 
Dave Rau
Posted: 19 November 2008 06:15 PM   [ Ignore ]   [ # 5 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  121
Joined  11-16-2007

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?
Profile
 
 
cahva
Posted: 19 November 2008 08:28 PM   [ Ignore ]   [ # 6 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  672
Joined  07-16-2008

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;  
} 
Profile
 
 
Dave Rau
Posted: 19 November 2008 08:36 PM   [ Ignore ]   [ # 7 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  121
Joined  11-16-2007

Right on, thanks cahva!
Profile
 
 
cahva
Posted: 20 November 2008 05:32 PM   [ Ignore ]   [ # 8 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  672
Joined  07-16-2008

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
Profile
 
 
Dillu
Posted: 01 July 2011 02:17 AM   [ Ignore ]   [ # 9 ]  
Summer Student
Avatar
Total Posts:  1
Joined  07-01-2011

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
Profile
 
 
lefoup
Posted: 01 July 2011 02:53 AM   [ Ignore ]   [ # 10 ]  
Summer Student
Avatar
Total Posts:  14
Joined  05-27-2011
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 wimdu

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.”
Profile
 
 
skunkbad
Posted: 01 July 2011 03:00 AM   [ Ignore ]   [ # 11 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1054
Joined  05-17-2009

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,
                id: tr_id,
                path: path,
                standAlone: 1
            },
            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 i = 0; i < length; i++) {
        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
Profile
 
 
CodeIgniteMe
Posted: 01 July 2011 04:07 AM   [ Ignore ]   [ # 12 ]  
Lab Assistant
RankRank
Total Posts:  162
Joined  12-23-2010

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 instructions. cool grin
Profile
 
 
Amitabh Roy
Posted: 01 July 2011 11:36 AM   [ Ignore ]   [ # 13 ]  
Grad Student
Avatar
Rank
Total Posts:  66
Joined  12-09-2010
OOP-MVC addict - 01 July 2011 08: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
Profile
 
 
   
 
 
‹‹ Migrating your App to 1.6      XMLRPC ...help!!! ››
Powered By ExpressionEngine
ExpressionEngine Discussion Forum - Version 3.1.5 (20110621)
Script Executed in 0.7168 seconds
Atom Feed   RSS 2.0