CODEWITHSUNDEEP
jqueryjquery-tools
Rookian
Rookian

Reputation: 20549

jQuery Tools Overlay & jQuery.live event

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

Upvotes: 5

Views: 11126

Answers (3)

Rookian
Rookian

Reputation: 20549

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>

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630429

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

Upvotes: 2

munch
munch

Reputation: 6321

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.

Upvotes: 13

Related Questions