Question

I don’t know much about writing good javascript so perhaps I am thinking about this in the wrong way, but here is the situation.

I have a page which contains various plugins, each with an edit button.

So there is for example an HTML plugin, a Twitter plugin etc.

Once you click on the edit button a jQuery UI dialog box is displayed via a common function which all of the edit buttons call.
The content of the dialog is filled with that particular plugin’s update form.

The dialog created by this common function also provides a “Save” and a “Cancel” button automatically.

Since both of these “Save” and “Cancel” buttons are created by the dialog they are both assigned closures to the “click” option.

What I want to do, if possible, is provide some sort of hook function which can be run when the “Save” button is clicked, which can be defined by the javascript in each of the plugin’s update forms.

I think I have explained enough now so here is some sample code:

This would tell each of the edit buttons to create a dialog box and fill it with the appropriate content.

// This function is called by each edit button
// on a click event which passes the required ids

function update_form_dialog(plugin_id) {
    $.post(
        '/get_plugin_update_form',
        {
            'plugin_id': plugin_id
        },
        function(response) {
            var dialog = $('<div class="update_form"></div>').appendTo('body');

            dialog.dialog({
                open: function() {
                    dialog.html(response);
                },
                show: 'fade',
                modal: true,
                title: 'Update plugin',
                width: 'auto',
                height: 'auto',
                buttons: [
                    {
                        text: 'Save',
                        click: function() {
                            // Call a hook defined in the plugin update
                            // form then send update data
                        }
                    },
                    {
                        text: 'Cancel',
                        click: function() {
                            // Close the dialog here
                        }
                    }
                ]
            });
        }
    );
}

As you can see in the above code what I have is pretty simple, but I don’t know how I can add a hook to the start of the “Save” button’s click function.

Each plugin’s update form is stored in the response variable and that is where the plugin update form’s javascript is written.

Is there a way that I can tell the save button what to do before it runs its normal code when the “Save” button is clicked?

If anyone needs more explanation please let me know.

Any help on how I could write this would be much appreciated.

Edit:

It seems I’m having trouble explaining my problem so hopefully this edit will help make things clearer.

What I want is to execute some code which would be optionally defined in the content of the dialog box when it has been opened. This code, if defined, should be executed once the save button is clicked but before the actual click function is executed. Is this possible?

Answer 1

You can use a plugin for subscribing and attaching to some events like:

http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events/
http://archive.plugins.jquery.com/project/jQuerySubscribe
http://www.novasoftware.com/download/jquery/publish-subscribe.aspx

This way, on the save you can publish that the save has been done and all subscribers code will be executed.

with the third link you can do something like the following:

$(document).ready(function(){ $('.save').subscribe('save',function(){//dosomething;}})

Later on the save code you can do this:

$.publish('save');

And the code will be executed
hope it helps.