Не могу создать простой html расширенный модальный диалог, загруженный ajax

Question

У меня есть несколько страниц, похожих на мастера, в моем приложении, его состояние сохраняется при навигации между небольшими шагами, навигация не линейная, и все работает хорошо без одной строки javascript в режиме "прогрессивного улучшения".

В моем приложении, для пользователей с включенным javascript, я хочу повернуть поток выше в наборе диалогов, загружая каждый завершенный шаг в диалоге с помощью ajax, обрабатывать действие шага и закрывать диалог, каждый шаг будет иметь собственный сценарий, встроенный для выполнения при загрузке диалога и перехвата некоторых событий пользовательского интерфейса.

Проблема в том, что JQuery UI Dialog хочет создать кнопки действий, я не могу дать создание кнопок плагину, его запрос метаданных кнопок, и у меня уже есть полная функциональная страница с формой, кнопками, вводом данных и всем, что мне нужно для моей работы, его работа, все готово, я хочу загрузить его только в диалоговое окно, которое управляет конкретными объектами окна, такими как строка заголовка, перетаскивание по строке заголовка, кнопка "Закрыть" в строке заголовка, событие "Закрыть мою очистку", растяжение в соответствии с содержимым диалогового окна, загрузка в модальный режим с наложением.

Я не могу найти способ перехватить нажатие кнопки внутри диалогового окна с помощью сценария, встроенного в шаг диалога, кнопка внутри диалогового окна должна публиковать данные с помощью ajax, но она будет публиковать вместе главную страницу в обычной публикации страницы.

Я нашел несколько очень старых плагинов, но мне нравится JQuery UI, он простой и хорошо выглядит, ищу что-то без iframe, я читал о:

квадратный: 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, которые сразу же отменяются при создании диалогов.

Независимо от того... я читаю ваш вопрос как "Как переписать 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). Если есть какие-то кнопки или ссылки, которые делают что-то свое, то вам нужно обрабатывать их так же, как показано выше.