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

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

0 голосов
/ 11 декабря 2011

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

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

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

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

Я нашел несколько очень старых плагинов, но мне нравится пользовательский интерфейс JQuery, он простой и хорошо выглядит, ищет что-то без 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>
-------------------------------------------------

1 Ответ

0 голосов
/ 11 декабря 2011

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

...