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

Question

我的应用程序中有一些类似向导的页面，它在保持状态的同时 在小步骤之间导航，导航不是线性的，一切都 以“渐进增强”方式无需一行 JavaScript 即可正常工作。

在我的应用程序中，对于启用了 javascript 的用户，我想要转流 通过 ajax 加载对话框中的每个完整步骤，在一组对话框中进行上述操作， 处理步骤的动作并关闭对话框，每个步骤都有自己的 嵌入的脚本在对话框加载时执行并拦截一些步骤 ui 事件。

问题是 JQuery UI 对话框想要创建操作按钮，但我不能 将按钮创建交给插件，它要求按钮元数据和我 已经拥有完整的功能页面，包括表单、按钮、数据输入和 我工作所需的一切，它正在工作，它完成了，我只想加载它 在一个对话框上管理窗口特定的东西给我，比如标题栏，拖动 标题栏，标题栏上的关闭按钮，关闭我的清理事件，拉伸到 适合我的对话框内容，以覆盖模式模式加载。

我找不到通过脚本拦截对话框内按钮单击的方法 嵌入对话框步骤，对话框内的按钮必须通过ajax发布数据，但是 它将在正常的页面发布中一起发布主页。

我发现了一些非常旧的插件，但我喜欢 JQuery UI，它简单而且看起来 好，寻找没有 iframe 的东西，我读到：

boxy: http://onehackoranother.com /projects/jquery/boxy/tests.html

simplemodal: 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>
-------------------------------------------------

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();

这将处理所有表单（假设它们是通过 ... 而不是通过 js 代码）。如果有一些按钮或链接执行自定义操作，那么您需要以与上面所示相同的方式处理它们。