Question

I’m using the SimpleModal plugin to display a dialog on a site. Within that dialog I have two links that will perform AJAX requests and the response from those requests should replace the current contents of the dialog. I’m trying to keep things as flexible as possible so that if I want to be able to load different responses into the dialog later on, it will just work.

In one function I open the dialog:

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

The onClose callback looks like this:

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

And when I want to load something new into the dialog I have this:

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

Now, all of the code above functions. But Im concerned that I have way over complicated things. Here’s why:

In modal_onClose I was forced to rebind the close handler to the anchor inside of the dialog. If I don’t bind there I am unable to close the dialog AFTER the AJAX request even though the anchor tag displays properly inside of the dialog. Also after binding the anchor tag it functions but ignores the onClose animations that I have set.

As a result of all this I get the feeling that I’ve not taken the best approach to the solution.

Has anyone completed something similar to this? Any tips?

Thanks in advance, I know there’s a lot of info here 🙂

Answer 1

I solved this so I thought I’d leave a response for anyone else looking.

Basically my problem boiled down to calling $.modal.close() when I shouldn’t have been.

Initially when I wanted to reload the dialog I called $.modal.close() and performed my reload inside of the onClose() callback. By calling $.modal.close() it would seem that I was stripping the close event handler and so when I reloaded the dialog things were breaking.

To fix the issue I removed the reload request from the onClose() callback and just handled everything inside a regular function. When I was using the callback I was making use of the returned dialog object to perform animations. With this new approach I can achieve the same result by targeting $(‘#simplemodal-container’) instead.

TL;DR – The code below allows me to load new data into an open dialog via AJAX while also being able to re-size and re-position the dialog.

Code to open a dialog:

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

Code to ‘reload’ the dialog

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