Изменение размера jQuery SimpleModal после AJAX-запроса - PullRequest
Новая
       6

Изменение размера jQuery SimpleModal после AJAX-запроса

3 голосов
/ 10 марта 2011

Я использую плагин SimpleModal для отображения диалога на сайте.В этом диалоге у меня есть две ссылки, которые будут выполнять запросы AJAX, и ответ на эти запросы должен заменить текущее содержимое диалога.Я пытаюсь сделать все как можно более гибким, чтобы, если я захочу загрузить различные ответы в диалог позже, он просто работал.

В одной функции я открываю диалог: 

$('div.modal').modal(
{
    minWidth: width,
    minHeight: height,
    onOpen: modal_onOpen,
    onClose: modal_onClose
});

Обратный вызов onClose выглядит следующим образом: 


function modal_onClose(dialog)
{
    dialog.container.fadeOut('slow', function()
    {
        dialog.data.hide();

        if(reload_dialog)
        {
            data = ajax_page_load(reload_url, false, false);

            if(data.statusText == 'OK')
            {
                dialog.container.width(reload_width);
                dialog.container.height(reload_height);
                $.modal.setPosition();

                $('div.modal div.container').html(data.responseText);
                dialog.data.show();
                dialog.container.fadeIn('slow', function()
                {
                    $('a.simplemodal-close').bind('click', function()
                    {
                        $.modal.close();
                    });
                });
            }

            reload_dialog = false;
        }
        else
        {
            dialog.overlay.slideUp('slow', function()
            {
                $.modal.close();
            });
        }
    });
}

И когда я хочу загрузить что-то новое в диалог, я получаю следующее: 


var reload_dialog = false;
var reload_url;
var reload_width;
var reload_height;

function load_dialog(url, width, height)
{
    reload_dialog = true;

    reload_url = url;
    reload_width = width;
    reload_height = height;

    $.modal.close();
}

Теперь всекода выше функций.Но я обеспокоен тем, что имею дело со сложными вещами.И вот почему:

В modal_onClose я был вынужден повторно привязать обработчик закрытия к привязке внутри диалога.Если я не связываюсь там, я не могу закрыть диалоговое окно ПОСЛЕ запроса AJAX, даже если тег привязки правильно отображается внутри диалога.Также после привязки тега привязки он функционирует, но игнорирует установленные мной анимации onClose.

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

Кто-нибудь закончил что-то подобное?Любые советы?

Заранее спасибо, я знаю, что здесь много информации:)

Ответы [ 2 ]

3 голосов
/ 11 марта 2011

Я решил это, поэтому решил оставить ответ для всех, кто ищет.

По сути, моя проблема сводилась к вызову $ .modal.close (), когда я не должен был это делать.

Изначально, когда я хотел перезагрузить диалог, я вызвал $ .modal.close () и выполнил перезагрузку внутри обратного вызова onClose ().При вызове $ .modal.close () может показаться, что я удаляю обработчик события close и поэтому, когда я перезагружал диалоговое окно, вещи ломались.

Чтобы исправить проблему, я удалил запрос на перезагрузку из onClose () обратного вызова и просто обрабатывает все внутри обычной функции.Когда я использовал обратный вызов, я использовал возвращенный объект диалога для выполнения анимации.Благодаря этому новому подходу я могу достичь того же результата, нацелив вместо него $ ('# simplemodal-container').

TL; DR - приведенный ниже код позволяет загружать новые данные в открытый диалог через AJAX, а такжевозможность изменения размера и изменения положения диалогового окна.

Код для открытия диалогового окна: 


function pop_dialog(url, width, height)
{
    $('div.modal').modal(
    {
        minWidth: width,
        minHeight: height,
        onOpen: function(dialog)
        {
            //Animate the overlay
            dialog.overlay.slideDown('slow', function () 
            {
                //Make sure the contents of the dialog are showing
                dialog.data.show();

                //Preload
                $('.dialog-preloader').show();
                $('div.modal img.logo').show();

                //Fade in preloader display and perform AJAX request
                dialog.container.fadeIn('fast', function()
                {
                    data = ajax_page_load(url, false, false);

                    //On success, show dialog contents
                    if(data.statusText == 'OK')
                    {
                        $('div.modal div.container').html(data.responseText);
                        $('.dialog-preloader').hide();
                    }
                });
            });
        },
        onClose: function(dialog)
        {
            //Fade out the dialog
            dialog.container.fadeOut('slow', function()
            {
                //If we're closing the dialog, animate the overlay off.
                dialog.overlay.slideUp('slow', function()
                {
                    //Clean up the mess.
                    $.modal.close();
                });
            });
        }
    });
}

Код для «перезагрузки» диалогового окна 


function load_dialog(url, width, height)
{
    //Hide the dialog
    $('#simplemodal-container').fadeOut('slow', function()
    {
        //Hide the dialog contents and show preloader
        $('div.modal div.container').hide()
        $('.dialog-preloader').show();

        //Set the new width
        $('#simplemodal-container').width(width);
        $('#simplemodal-container').height(height);
        $.modal.setPosition();

        //Fade container back in with preload message
        $('#simplemodal-container').fadeIn('slow', function()
        {
            //Perform AJAX request to load new dialog
            data = ajax_page_load(url, false, false);

            //On success, show dialog contents
            if(data.statusText == 'OK')
            {
                $('div.modal div.container').html(data.responseText);
                $('.dialog-preloader').hide();
                $('div.modal div.container').show();
            }
        });
    });
}
0 голосов
/ 09 мая 2012 
   $(".aModal5").click(function (e) {
            e.preventDefault();


            $.modal("<div>Loading...</div>", {
                closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",

                onShow: show,
                overlayId: 'simplemodal-overlay',
                containerId: 'simplemodal-container',



            });

        });

Функция show должна обрабатывать загрузку и, завершив запрос ajax, изменит размер окна: 

 function show(dialog) {
        $('#simplemodal-container').height('30px');
        $('#simplemodal-container').width('30px');
        xAjax.postWithLoadTarget("Default.aspx/test", null,
        $(".divtest"), function (data) {

            $('#simplemodal-container .simplemodal-data').fadeOut(200, function () {

                var $this = $(this);

                $('#simplemodal-container').animate({ height: 200 }, function () {
                    $('#simplemodal-container .simplemodal-data').html(data.d);
                    $this.fadeIn(200, function () {

                    });

                });


            });


        });

    }
...