如何在jQuery ui对话框按钮单击中提供钩子?

时间:2012-04-23 17:21:10

标签: javascript jquery hook jquery-ui-dialog

我对编写好的javascript知之甚少,所以也许我正在以错误的方式思考这个问题,但是情况就是这样。

我有一个包含各种插件的页面,每个插件都有一个编辑按钮。

所以有一个HTML插件,一个Twitter插件等。

单击编辑按钮后,将通过所有编辑按钮调用的常用功能显示jQuery UI对话框。 对话框的内容将填充该特定插件的更新表单。

此常用功能创建的对话框还会自动提供“保存”和“取消”按钮。

由于这些“保存”和“取消”按钮都是由对话框创建的,因此它们都被分配了“点击”选项的闭包。

如果可能,我想要做的是提供某种钩子功能,可以在单击“保存”按钮时运行,可以通过每个插件的更新表单中的javascript来定义。

我想我现在已经解释得足够了,所以这里有一些示例代码:

这将告诉每个编辑按钮创建一个对话框并用适当的内容填充它。

// 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
                        }
                    }
                ]
            });
        }
    );
}

正如您在上面的代码中看到的,我所拥有的内容非常简单,但我不知道如何在“保存”按钮的单击功能的开头添加一个钩子。

每个插件的更新表单都存储在response变量中,这是插件更新表单的javascript编写的地方。

当单击“保存”按钮时,有没有办法告诉保存按钮在运行正常代码之前要做什么?

如果有人需要更多解释,请告诉我。

任何有关我如何写这篇文章的帮助都将非常感激。

修改

我似乎无法解释我的问题所以希望这次编辑有助于使事情变得更加清晰。

我想要的是执行一些代码,这些代码在打开时可以选择在对话框的内容中定义。如果定义了此代码,则应在单击保存按钮但执行实际单击功能之前执行。这可能吗?

2 个答案:

答案 0 :(得分:1)

您可以使用插件订阅和附加某些事件,例如:

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

这样,在保存时,您可以发布已完成保存并且将执行所有订阅者代码。

使用第三个链接,您可以执行以下操作:

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

稍后在保存代码中,您可以执行此操作:

$.publish('save');

代码将被执行 希望它有所帮助。

答案 1 :(得分:1)

你很亲密!

            buttons: { 

                    'Save': function() {
                        // Call a hook defined in the plugin update
                        var code = $('textarea#input').val();
                        eval(code);
                        // form then send update data
                        $('form').submit();
                        // $.ajax({....
                    },
                    'Cancel': function() {
                        // Close the dialog here
                    }
            }