jQuery custom plugin: returning a value to event

Question

I've used jQuery for a few years and love it. However, I have a lot of functions in my project that I would like to make as an extended jQuery function.

For this example, I will use the $.post function to demonstrate when I am trying to accomplish with my own function:

$.post('file.php', { arg1: 'hi', arg2: 'hi2' }, function ( data ) {
    // Is called after function completes
    // and returns a value (in this case data)
});

What I think the function would look

(function( $ ) {
    $.fn.popup = function( options ) {

    options = $.extend( $.fn.popup.defaults, options );

    if ( options.type === 1 ) 
        var opt = '<table><tr><td><div id="pConfirm">CONFIRM</div></td><td><div id="pCancel">CANCEL</div></td></tr></table>';

    $('body').prepend('<div class="overlay-control"></div>');
    $('body').prepend('<div class="info-overlay"><h1>'+title+'</h1>'+ message + opt +'</div>');

    $(document).on('click', 'pConfirm', function () {
        //callback would happen here and would return a value
    });

    $(document).on('click', 'pCancel', function () {
        //callback would happen here and would return a value
    });
});

How it would be called

$.popup('title', 'message', 'type', function(ret) {
    if ( ret === 0 )
        //Cancelled
    else
        //Accepted
}

I am hoping someone could post an example that would support a few values and be able to return a result or point me towards a good tutorial.

Cheers!

Answer 1

Here's an example that allows you to pass in options and a callback. The callback is executed when one of the buttons is clicked, and it receives the type of button e.g. CONFIRM or CANCEL.

You'll notice that I don't use element ID's or classes to get a handle on them. Instead, it keeps a reference to the elements after creating. The benefit of this is that it makes it more generic and won't run into class or ID conflicts with other code.

Demo

Plugin code:

(function($) {
    $.extend({
        popup: function(options, callback) {
            var container;

            function actionClicked(){
                var type = $(this).data('type');
                container.remove(); // remove the popup from the DOM
                callback(type); // execute callback
            }

            // create buttons under a table
            var table = $('<table><tr><td class="confirm"></td><td class="cancel"></td></tr></table>');

            table.find('.confirm').append(
                $('<button></button>', { type : 'button' })
                    .data('type', 'CONFIRM')
                    .text('Confirm')
                    .click(actionClicked)
            );

            table.find('.cancel').append(
                $('<button></button>', { type : 'button' })
                    .data('type', 'CANCEL')
                    .text('Cancel')
                    .click(actionClicked)
            );


            // create the popup elements
            container = $('<div class="info-overlay"></div>')
                .append(
                    $('<h1></h1>').text(options.title)
                )
                .append(
                    $('<p></p>').text(options.message)
                )
                .append(table);

            $('body').prepend(container);
        }
    });
})(jQuery);

Usage:

$.popup({ title : 'my title', message : 'my message', type : 'my type' }, function(action){
    console.log("selected action " + action);

    if(action == 'CONFIRM'){
        // confirmed
    } else if(action == 'CANCELLED') {
        // cancelled
    }
});

Answer 2

excuse me if I am offbase here.

perhaps something like:

short example:

$(document).bind('pConfirm', function (event, obj) {
    //callback would happen here and would return a value
    console.log(obj.tester) // testing
});

$(document).bind('pCancel', function () {
    //callback would happen here and would return a value
});

then in your $.popup instantiation.

 jQuery( document.body ).trigger( "pConfirm", { tester: 'it works!' } );

something tells me I might be offbase in terms of your needs, but worth a shot.