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

Answer 1

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 :)

Answer 2

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.

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>