不能创建简单的html增强模态对话框由ajax加载

Question

我的应用程序中有一些类似向导的页面，其保持状态为在小步骤之间导航，导航不是线性的无需一行javascript即可以"渐进增强"的方式工作。

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

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

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

我发现了一些非常老的插件，但我喜欢JQuery UI，它的简单和外观很好，寻找没有iframe的东西，我读到:

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

这将照顾所有的形式(假设他们是由<button type="submit">...</button>提交，而不是通过js代码)。如果有一些按钮或链接做一些自定义的事情，那么您需要按照上面所示的方式处理它们