0

アプリケーションにウィザードのようなページがいくつかあり、小さなステップ間を移動しながら状態を維持します。ナビゲーションは直線的ではなく、「プログレッシブ エンハンスメント」の方法で JavaScript を 1 行も使わずにすべてがうまく機能します。

私のアプリケーションでは、javascript が有効になっているユーザーに対して、ajax によってダイアログの各完全なステップをロードし、ステップのアクションを処理してダイアログを閉じることにより、一連のダイアログで上記の流れを変えたいと考えています。各ステップには、実行するための独自のスクリプトが埋め込まれています。ダイアログの読み込み時に、いくつかのステップ UI イベントをインターセプトします。

問題は、JQuery UI ダイアログがアクション ボタンを作成する必要があることです。ボタンの作成をプラグインに与えることはできず、ボタンのメタデータを要求し、フォーム、ボタン、データ入力、および作業に必要なすべての機能を備えた完全な機能ページが既にあります。 、完了しました。タイトルバー、タイトルバーでドラッグ、タイトルバーの閉じるボタン、クリーンアップへのイベントを閉じる、ダイアログのコンテンツに合わせてストレッチ、ロードなど、ウィンドウ固有のものを管理するダイアログにのみロードしたいオーバーレイ付きのモーダル モード。

ダイアログステップに埋め込まれたスクリプトによってダイアログ内のボタンクリックをインターセプトする方法が見つかりません.ダイアログ内のボタンはajaxによってデータを投稿する必要がありますが、通常のページ投稿でメインページを一緒に投稿します.

非常に古いプラグインをいくつか見つけましたが、私は JQuery UI が好きで、シンプルで見栄えがよく、iframe のないものを探しています。

ボクシー: http://onehackoranother.com/projects/jquery/boxy/tests.html

シンプルモーダル: http://www.ericmmartin.com/projects/simplemodal/

jqModal: http://dev.iceburg.net/jquery/jqModal/

@liho1eye : コメントを投稿中

編集：@ liho1eyeの助けを借りて、私はそれに到達しました：

<script type="text/javascript">
    //-------------------------------------------------
    var url_trg = '@Url.Content("~/Teste/opendialog")';
    var url_prl = '@Url.Content("~/Images/waitplease.gif")';
    //-------------------------------------------------
    function onloadpartial() {
        /*setupDialog("#opendialog", "#tempcontent", "section[id='main']", url_trg);*/
        configDetailDialog(url_trg, "#tempcontent", "section[id='main']", "Detail", "#opendialog");
    }
    //-------------------------------------------------
    function configDetailDialog(trgurl, containerselector, contentselector, dlgtitle, buttonselector) {
        //-------
        $(document).ajaxError(
            function (event, jqXHR, ajaxSettings, thrownError) {
                alert('[event:' + event + '], ' +
                        '[jqXHR:' + jqXHR + '], ' +
                        '[jqXHR_STATUS:' + jqXHR.status + '], ' + 
                        '[ajaxSettings:' + ajaxSettings + '], ' +
                        '[thrownError:' + thrownError + '])');
            });
        //-------
        $.ajaxSetup({ cache: false });
        //-------
        $(buttonselector).click(function (event) {
            event.preventDefault();
            openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle);
        });
        //-------
    }
    //-------------------------------------------------
    function openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle) {
        $.ajax({
            type: 'GET',
            url: trgurl,
            context: document.body,
            success: function (data) {
                var dlg = $(data).find(contentselector);
                $('#dlgdetail').remove();
                $(containerselector).append("<div id='dlgdetail'/>");
                $('#dlgdetail').append(dlg);
                $('#dlgdetail')
                    .css("border", "solid")
                    .dialog({
                        autoOpen: true,
                        modal: true,
                        title: dlgtitle,
                        open: function () {
                            configDetailDialog();
                        },
                        close: function (event, ui) {
                            $('#dlgdetail').remove();
                        }
                    })
                    .find("form").submit(function (event) {
                        alert('clicou ' + event);
                        var form = $(this);
                        var faction = "http://" + window.location.host + trgurl;
                        var fdata = form.serialize() + "&action:savedialog=savedialog";
                        $.ajax({                            
                            type: "POST",
                            url: faction,
                            data: fdata,
                            success: function (result) {
                                alert(result);
                            }
                        });
                        event.preventDefault();
                        $('#dlgdetail').dialog('close');
                    });
            }
        });
    }
    //-------------------------------------------------
</script>
-------------------------------------------------
4

1 に答える 1

0

正直なところ、あなたのダイアログ作成コードは不要な DOM 操作で非常に複雑であり、ダイアログ作成によってすぐに元に戻されると思います。

とにかく...私はあなたの質問を「AJAX経由で送信するためにAJAXedフォームを書き直すにはどうすればよいですか?」と読みました。

まあ、簡単です。この関数をグローバル スコープに追加します

var rewriteForms = function();
{
    $('#dlgdetail').find("form").submit(function()
    {
        var form = $(this);
        $('#dlgdetail').load(form.attr("action"), form.serializeArray(), rewriteForms);
        return false;
    });
}

次に、ダイアログが作成された後に呼び出すだけです

rewriteForms();

<button type="submit">...</button>これにより、すべてのフォームが処理されます (フォームがjs コードではなく、によって送信されたと仮定します)。何かカスタムを行うボタンやリンクがある場合は、上記と同じ方法で処理する必要があります。

于 2011-12-11T16:34:53.503 に答える