0

クリックするとダイアログを開くリンクがいくつかあります。

個々のコンテンツに応じて、ユーザー インターフェイスを更新する個々の関数を実行するためのロード関数、コールバック関数に別のタイトル、高さ、重み、contentUrl が必要なので、個々のパラメーターをダイアログに渡す必要があります。

目標を達成するには、次のコードをどのように書き直す必要がありますか?

   <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>
4

2 に答える 2

2

$dialog 変数を関数でラップしてみてください。

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

次に、この関数を呼び出して、他のクリック ハンドラーで表示する前にダイアログを作成します。

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

それが役立つことを願っています!

于 2012-05-25T20:21:11.010 に答える
0

以前のコードをリファクタリングするには、いくつかの労力がかかりました。

autoOpen を true に設定したため、ダイアログを返す必要はありません。

コールバックを渡すことができますが、null を渡す代わりに渡す必要はありません。

かなり良い/拡張可能だと思うので、これを解決策として提供します。

 @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>
于 2012-05-25T22:01:57.353 に答える