jQuery Tools Overlay not showing on second click

Question

Here is what i'm trying to do - i'm writing generic overlay function which will serve for all links with specific class. It's very simple though, you have a link like this:

<a class="modalInput" rel="#prompt">Local load</a>

and when you click it, javascript kicks in:

        $(".modalInput").live("click",function()
    {
        var obj = null;
        obj = $(this);
        var container = null;
        if (!(typeof obj.attr("container") === 'undefined'))
        {
            container = obj.attr("container");
        }
        else
        {               
            if (typeof obj.attr("container") === 'undefined')
            {
                container = obj.attr("rel");

                if (container == '#norel')
                {
                    container = randomString();
                    $("#footer").append("<div id='"+container+"' class='gru_curtain_simple_overlay'></div>");                   
                    obj.attr("container", container);
                }
                else
                {
                    container = container.substring(1, container.length);
                }
            }
        }

        test_test(container, obj);
    });

This function get's various parameters of that link and decides what it should do. Then, test_test() is called which looks like this:

    function test_test(container, obj)
{
    var triggers = jQuery("#"+container).overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: false,
        closeOnEsc: true,
        load: true,
        oneInstance: false,

        onBeforeLoad: function() {
            if ($.trim($("#"+container).html()).length < 25)
            {
                //Check if it's remote
                var remote = obj.attr("remote");                    
                if (!(typeof remote === 'undefined'))
                {
                    //$(container).load(remote);
                    $.get(remote, function(data)
                    {
                        $("#"+container).empty().append(data);
                    });
                }
            }

            //Check if dialog should have close button
            var is_closable = obj.attr("closable");
            if (is_closable)
            {
                $("a.close").hide();
            }

            var wd = parseInt(obj.attr("wd"));
            var hg = parseInt(obj.attr("hg"));

            if (!(typeof wd === 'undefined'))
            {
                $("#"+container).css("width", wd);
            }
            if (!(typeof hg === 'undefined'))
            {
                $("#"+container).animate({
                    height: hg
                }, 800, function()
                {
                    $("#"+container).css("overflow-x", "hidden");
                    $("#"+container).css("overflow-y", "visible");

                });
                //$(container).css("height", hg);
            }
        },

        onLoad: function() {            
        },

        onClose: function() {
            //Destroy current container
            //var container = obj.attr("rel");
            //$(container).empty().html('<img src="/wp-content/themes/default/images/preloader.gif" style="margin: 25% 25%; width: 120px;"/>');
        }
    });

I know, it's huge but it works very well. So what is the problem? If I click on the link it shows an overlay for the first time. But when I click it again, it does not work. It gives no errors, no warnings of any kind, basically it should work but it does not.

I have tried everything that crossed my mind (like reducing test_test() function to it's basics) but that didn't do the trick. So I'm running out of ideas and if anyone has a suggestion, I'm willing to listen.

EDIT: I found out that if I have another link like this:

<a class="modalInput" rel="#norel" remote="/test?t=694749&inner=1" wd="850" hg="500">Remote load</a>

I can click on this link as much as I want (this one creates random div which is appended in footer) but after on the link above (which has container somewhere in HTML so it does not generate anything), all overlays are not showing anymore.

Have you tried killing the click-handler like: $(".modalInput").die("click").live("click",function() ... — madc, Nov 21 '11 at 13:42
possible duplicate of [jQuery Tools alert works once (but only once)](http://stackoverflow.com/questions/4567947/jquery-tools-alert-works-once-but-only-once) — Andrew Whitaker, Nov 21 '11 at 13:43
@Andrew Whitaker Yes, the problem is the same but that solution is not working for me since my container is not always the same. I could have unlimited number of random generated containers which should overlay, that's why I'm passing "container" parameter. — Igor Hrcek, Nov 21 '11 at 13:50
@madc Thanks for suggestions, but that did no solved my problem :( — Igor Hrcek, Nov 21 '11 at 13:50
I did not fixed it but I know what caused trouble! Trouble is caused by content which is loaded into DIV. If I wait for content to be fully loaded, overlay will work everytime I click on the link. So basically, the problem is with loading page with a lot of JS into DIV which, somehow, is messing with other code. So, if you want to do what I did, I suggest using iFrame as container or Fancybox as overlay component. — Igor Hrcek, Nov 24 '11 at 10:17

score 4 · Answer 1 · edited May 23 '17 at 10:08

like andrew whitaker said, the solution is shown in jQuery Tools alert works once (but only once)

wrapped up: remove the "load: true" from overlay params, call .load() manually.

working multiple times:

//call the overlay
$('#idofoverlay').overlay({
//  load: true
}).load();

working only once:

//call the overlay
$('#idofoverlay').overlay({
  load: true
});

drawbacks:

in conjunction with jquery-tools overlay you loose the "close" item when called that way

jQuery Tools Overlay not showing on second click

1 Answers1