jQuery Tools Overlay & jQuery.live event

Question

How to get this work with jQuery.live?

$("a[rel]").overlay({
    mask: '#3B5872',
    effect: 'apple',
    api: true,
    onBeforeLoad: function () {
        var wrap = this.getOverlay().find(".contentWrap");
        wrap.load(this.getTrigger().attr("href"));
    }
});

I tried this with no succes:

$("a[rel]").live('click', function () {
    alert('live');
    $(this).overlay({
        mask: '#3B5872',
        effect: 'apple',
        api: true,
        onBeforeLoad: function () {
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load(this.getTrigger().attr("href"));
        }
    });
});

Sarraute

Answer 1

You need to set it to load on configuration. You can do that by adding load: true to the config object.

$("a[rel]").live('click', function (e) {
    e.preventDefault(); //prevent default link action

    $(this).overlay({
        mask: '#3B5872',
        effect: 'apple',
        api: true,
        onBeforeLoad: function () {
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load(this.getTrigger().attr("href"));
        },
        load: true
    });
});

Here are the docs.

Marlonmarlow

Answer 2

The overlay is triggered on a click, so you need to use the load option, like this:

$("a[rel]").live('click', function (e) {
    $(this).overlay({
        mask: '#3B5872',
        effect: 'apple',
        api: true,
        load: true,
        onBeforeLoad: function () {
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load(this.getTrigger().attr("href"));
        }
    });
    e.preventDefault();
});​

You can give it a try here.

The overlay is opened by he click event, so even though you were binding the overlay, it wasn't opening because the event it depends on had already occurred. The default for load is also false, but since you do want it to open as soon as it's created, set it to true :)

Photostat

@Rookian: Try the updated answer...looks like the load behavior changed since I last looked, the updated answer should work for you. – Photostat

hm it does not work too, the mask occurs a short time and then the requested page is shown without the overlay. So only the pure html is shown as if javascript is disabled. – Sarraute

@Rookian: you need to prevent the default behavior of the link. .live('click', function(e){ e.preventDefault(); ... } – Marlonmarlow

@Rookian: I updated the code and demo to prevent opening (though if you don't need the url, just use href="#" instead). – Photostat

it does not work, now 2 standard http requests were send. Before without the preventDefault function 1 ajax requests and 1 http request were send. I used Fiddler for tracing. – Sarraute

Answer 3

Now it works fine. For all of those who has the same trouble like me here is the code ;)

<script type="text/javascript">
    // safe the overlay element in a global variable
    var overlayElem;

    $(document).ready(function () {
        // register the click event for ajax load and page load
        $("a[rel]").live('click', function (e) {
            e.preventDefault();

            // save overlay
            overlayElem = $(this); 

            // load overlay
            $(this).overlay({
                mask: '#3B5872',
                effect: 'apple',
                api: true,
                load: true,
                onBeforeLoad: function () {
                    var wrap = this.getOverlay().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                }
            });
        });
    });

    // send form data via ajax
    function ajaxFormRequest(form, callback, format) {
        $.ajax({
            url: form.action,
            type: form.method,
            dataType: format,
            data: $(form).serialize(),
            success: callback
        });
    }
    // close the overlay and update the table 
    function update_grid(result) {
        overlayElem.overlay().close();
        $("#gridcontainer").html(result);
    }

</script>

Sarraute