0

我的应用程序中有一些类似向导的页面，它在小步骤之间导航时保​​持状态，导航不是线性的，并且在没有一行 javascript 的情况下以“渐进增强”的方式一切正常。

在我的应用程序中，对于启用了 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 操作会立即被对话框创建撤消。

无论如何...我将您的问题读作“如何重写 AJAXed 表单以通过 AJAX 提交？”。

嗯，很简单。在全局范围内添加此函数

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 回答