Overview

this is a best way to delete Records from your mysql datebase without loading the page .
this jquery code can Delete a any number of Records with animation fade-out effect using jQuery and Ajax.

online demo

How It work?

(function($) {
    $.fn.jooria_delete = function(settings) {
             settings = $.extend({
                 post: 'delete_id',        
                element: '',
                msg: 'Sure you want to delete this one?'    
            }, settings);   
            $(this).click(function() {
            
            var id = $(this).attr("id")    
            var parent = $(this).parent();    
            var body = settings.element+'#'+id;           

            if(confirm(settings.msg)) {
                $.ajax({
                    type: 'POST',
                    data: settings.post+'='+id,            
                    success: function(msg) {
                            if(settings.element){
                                $(body).remove();
                            }else{
                                parent.fadeOut(1000, function() {
                                    $(this).remove();
                                });
                            }                        
                    }
                });
            }
            return false;
        });
    };
})(jQuery);

• post : is the name of the post value to receive it by $_POST['post']
• element : this is the root html element that will be deleted when click delete
• msg : is the confirmation message that will appear when click delete

usage

how you can use the jQuery script to delete any thing

inline delete

this mean just one line or one html element will be deleted

        $(function() {
            $('a.delete').jooria_delete({
                post: 'user_id'   
            });
        });    

we said 'user_id' is the variable that will send it to the server then intval() it then use mysql jquery to delete the row

html

now you shold the delete word in the same tag that contain the user name. why? to delete the user name + delete word row you sould add it like that

<span><a>user name here</a> [<a id='5' class='delete' href='#'>Delete</a>]</span>

parent delete

this will help you delete a table or parent div

jquery

        $(function() {
            $('a.delete').jooria_delete({
                post: 'delete',     
                element: "span"
            });
        });    

html

            <span id="1" class="item">
                <span class="sidedate">
                    <a id="1" class="delete" href="#">
                        <img src="images/delete.png" border="0" />
                    </a>
                </span>
                <strong>PSD Bussard Login</strong><br />PSD Bussard Login...more  
            </span>

this will delete the <span> with the id = 1 [<span id="1">]

Requirements

jQuery

• the files of the tutorial
  • parents_delete.zip [12.32 KB][ downloads]
  • Jooria_Delete.zip [2.13 KB][ downloads]

in: » Website Programming » ajax | Posted on Sep 22nd, 2009 | last update on Sep 24th, 2010 | views 25,244