Very simple event driven jQuery plugin design pattern

Question

Sometimes I have multiple elements which need a click callback function with some common functionality, and have implemented doing so as the following:

function deleteRecord(elem, url, type) {
    if (confirm("Are you sure you wish to delete this "+type+"?")) {
        $.ajax({
            type:'DELETE',
            url: url,
            dataType: 'json',
            success: function (rsp){
                $(elem).closest('tr').remove();
            },
            error: function (xhr) {
                alert('Error: '+xhr.responseJSON.message);
            }
        });
    }
}

$("#manual-list img.delete").click(function() { deleteRecord(this, '/1.0/manuals/'+$(this).closest('tr').data('id'),'manual')});

Instead of using a function, I've been trying to create a very simple plugin. I've successfully created flexible jQuery plugins as described by https://learn.jquery.com/plugins/advanced-plugin-concepts/, however, I think doing so for these types of applications is overkill, and wish to use a drop-dead plugin design pattern. My latest attempt is below, however, I have been unsuccessful passing it the url argument which is derived by the element to which the plugin is applied.

What options are available for a very simple and concise jQuery event driven plugin?

(function( $ ){
    $.fn.deleteRecord = function(url, type) {
        console.log('init', url, type, this, url.call(this, url, type));
        this.click(function(){
            //Confirm that this.each(function(){...}) is not required
            console.log('onClick', url, type, this, url.call(this, url, type))
            if (confirm("Are you sure you wish to delete this "+type+"?")) {
                console.log('onConfirm', url, type, this, url.call(this, url, type))
                var e=this;
                $.ajax({
                    type:'DELETE',
                    url: url.call(this, url, type),
                    dataType: 'json',
                    success: function (rsp){
                        $(e).closest('tr').remove();
                    },
                    error: function (xhr) {
                        alert('Error: '+xhr.responseJSON.message);
                    }
                });
            }
        })
        return this;
    };
})( jQuery );


$("#manual-list img.delete").deleteRecord(function(){'/1.0/manuals/'+$(this).closest('tr').data('id')},'manual');

gaetanoM · Accepted Answer · 2018-03-22 14:26:20Z

2

You forgot the return statement in:

function(){'/1.0/manuals/'+$(this).closest('tr').data('id')}

Change it to:

function(){return '/1.0/manuals/'+$(this).closest('tr').data('id');}

(function ($) {
    $.fn.deleteRecord = function (url, type) {
        console.log('init', url, type, url.call(this, url, type));
        console.log('----')
        this.click(function () {
            //Confirm that this.each(function(){...}) is not required
            console.log('onClick', url, type, this, url.call(this, url, type))
            if (confirm("Are you sure you wish to delete this " + type + "?")) {
                console.log('onConfirm', url, type, this, url.call(this, url, type))
                var e = this;
                $.ajax({
                    type: 'DELETE',
                    url: url.call(this, url, type),
                    dataType: 'json',
                    success: function (rsp) {
                        $(e).closest('tr').remove();
                    },
                    error: function (xhr) {
                        alert('Error: ' + xhr.responseJSON.message);
                    }
                });
            }
        })
        return this;
    };
})(jQuery);


            $("#manual-list img.delete").deleteRecord(function(){return '/1.0/manuals/'+$(this).closest('tr').data('id');},'manual');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="manual-list">
    <tr data-id="1">
        <td>
            <img class="delete" src="https://dummyimage.com/200x200/000/fff&text=1">
        </td>
    </tr>
</table>

answered Mar 22, 2018 at 14:26

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1032531 Over a year ago

Uggg! Sometimes, one gets blinded by looking at the same thing too long. Other than this, does my approach look okay? Is there a better approach? Thank you!

gaetanoM Over a year ago

@user1032531 Yes It seems ok.

Collectives™ on Stack Overflow

Very simple event driven jQuery plugin design pattern

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related