如何使这个jquery ajax表单接受各个值作为通用对话框

I have several links which open a dialog when clicked.

我有几个链接，点击时打开一个对话框。

What I still need is to pass individual parameters to the dialog, because depending on its individual content I need another title, height, weight, contentUrl for the load function,callback function to execute an individual function updating the user interface.

我仍然需要将单个参数传递给对话框，因为根据其各自的内容，我需要另一个标题，高度，权重，contentUrl用于加载函数，回调函数用于执行更新用户界面的单个函数。

How do I have to rewrite the following code to reach my goal?

如何重写以下代码以达到我的目标？

   <script type="text/javascript">

        $(document).ready(function () {

            // Does not cache the ajax requests to the controller e.g. IE7/9 is doing that...
            $.ajaxSetup({ cache: false });

            // the div holds the html content
            var $dialog = $('<div></div>')
            .dialog({
                autoOpen: false,
                title: 'generic title',
                height: generic height,
                width: generic width,
                modal: true,
                resizable: false,
                hide: "fade",
                show: "fade",
                close: function (event, ui) {
                    // Clears all input values of the form
                    $("form")[0].reset(); 
                },
                open: function (event, ui) {
                    $(this).load('@Url.Action("Delete")');
                },
                buttons: {
                    "Ok": function () {
                        var form = $('form', this);
                        $.ajax({
                            url: $(form).attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            cache: false,
                            success: function (result) {

                                if (result.success) {
                                    $dialog.dialog("close");
                                    // Update UI with individual function/callback passed as parameter
                                }
                                else {
                                    // Reload the dialog with the form to show model/validation errors 
                                    $dialog.html(result);
                                }
                            }
                        });
                    },
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });     

            $('#DeleteTemplate').click(function (e) {
                var contentUrl = $(this).attr('href');           

                $dialog.dialog('open');
                return false; 
            });

            $('#CreateTemplate').click(function (e) {
                var contentUrl = $(this).attr('href');             

                $dialog.dialog('open');
                return false; 
            });
        });

        function updateDataGrid() {
            // Pass this function to the dialog as individual function to be executed after the ajax call and result.success 
        }

        function updateTreeView() {
            // Pass this function to the dialog as individual function to be executed after the ajax call and result.success 
        }
    </script>

2 个解决方案

#1

Try wrapping your $dialog var in a function.

尝试在函数中包装$ dialog var。

function getDialog(title, height, width) {
  return $('<div></div>').dialog({
    // paste all your other dialog code here while inserting the vars that you passed in
  });
}

Then just call this function to build your dialog before you show it in your other click handlers:

然后只需调用此函数来构建对话框，然后再在其他单击处理程序中显示它：

var $dialog = getDialog('my title', 480, 600);
$dialog.dialog('open');

Hope that helps!

希望有所帮助！

#2

It cost me some efforts to refactor my former code:

我花了一些精力来重构我以前的代码：

I set autoOpen to true thus I do not need to return the dialog.

我将autoOpen设置为true，因此我不需要返回对话框。

A callback can be passed but does not need to be passed instead pass null.

可以传递回调但不需要传递而是传递null。

I offer this as solution because I think its pretty good/extendable.

我提供这个解决方案是因为我认为它非常好/可扩展。

 @Html.ActionLink("Create Template", "Create", "Template", new { id = "CreateTemplate", data_dialog_width = 250, data_dialog_height = 250 })
   @Html.ActionLink("Delete Template", "Delete", "Template", new { id = "DeleteTemplate", data_dialog_width = 250, data_dialog_height = 300 }) 



<script type="text/javascript">

    // Does not cache the ajax requests to the controller e.g. IE7/8/9 is doing that...
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $('#CreateTemplate').click(function (event) { loadDialog(this, event, null); });
        $('#DeleteTemplate').click(function (event) { loadDialog(this, event, updateTreeView); });
    });

    function loadDialog(link, event, updateCallback) {
        event.preventDefault();

        var $title = link.innerHTML;
        var $contenturl = $(link).attr('href');       
        var $dialog = $('<div></div>');
        var $height = $(link).attr('data-dialog-height');
        var $width = $(link).attr('data-dialog-width');        

        $dialog.load($contenturl).dialog({ title:$title, autoOpen:true, modal:true, show:'fade', hide:'fade', width:$width, height:$height });

        // Setup dialog
        $dialog.dialog("option", "buttons", {
            "Submit": function () { 
                    ajaxRequest( $(this), $('form', this),updateCallback );
                },
                "Cancel": function () {
                    $(this).dialog("close");                  
                }           
        });
    }
    // Execute an ajax form request sending data
    function ajaxRequest(dlg, form,updateCallback) {
        $.ajax({ url: $(form).attr('action'), type: 'POST', data: form.serialize(),
            success: function (response) {
                if (response.success) {
                    dlg.dialog("close");
                    // Update UI with individual function/callback passed as parameter
                    if (updateCallback != null)
                      updateCallback();

                }
                else {
                    // Reload the dialog with the form to show model/validation errors 
                    dlg.html(response);
                }
            } // no comma after last parameter                  
        });
    }

    function updateDataGrid() {
        alert('updateDataGrid');
    }

    function updateTreeView() {
        alert('updateTreeView');
    }
</script>