无法创建由 ajax 加载的简单 html 增强模式对话框

Question

我的应用程序中有一些类似向导的页面，它在保持状态时 在小步骤之间导航，导航不是线性的，一切 在没有一行 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 : 现在放 cmets

编辑：在@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>
-------------------------------------------------

Answer 1

老实说，我认为您的对话框创建代码确实过于复杂，包含不必要的 DOM 操作，对话框创建会立即取消这些操作。

无论如何...我读到您的问题是“如何重写 AJAX 表单以通过 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 代码提交）。如果有一些按钮或链接可以做一些自定义的事情，那么您需要以与上图相同的方式处理它们。