How do I bind the Overlay Tool for new Ajax elements in Jquery?

Question

Hi,

I'm using:

echo $javascript->link('tools.overlay-1.0.4', false);

which is initialized with:

$(".overlay_popup").overlay({
    expose: '#000000',
    close: '.close_overlay',
    finish: {
        top: 'center',
        left: 'center',
        absolute: false
    }
});

I call the overlay popup box like this:

echo $html->link(
    "add part",
    array('controller'=>'garage_parts',
        'action'=>'addfrompartlist',
        $gcar['GarageCar']['id'],
        $gcar['GarageCar']['car_id']),
    array('class'=>'js-ajax overlay_popup',
        'id'=>'add_part_overlay',
        'rel'=>'.overlay_container')
);

This all works fine and dandy, however I have an ajax function that dynamically adds the "add part" hyperlink button shown above and I have no idea how to bind this new button to the overlay. Normally, I would use something like this:

$(".overlay_popup").bind("click", function(){... but this didn't work for the overlay. Any ideas on how I can successfully do this?

Answer 1

Use the jQuery live( type, fn ) method.

$(".overlay_popup").live("click", function(){...}) binds your handler to all currently matched elements but also to all new elements, which match your selector, too.

Answer 2

Can someone please help me with this? I have really tried everything and nothing works

Answer 3

i have a solution, sorry for my bad english...

this is de solution:

in the librarie tools.overlay-1.1.2.js add the next code before of function overlay():

 $.fn.addObjectToOverlay = function(element, confOverlay){
  el = new Overlay($(element), confOverlay);
  instances.push(el);
  $(this).data("overlay", el);
 };

 // jQuery plugin initialization
 $.fn.overlay = function(conf) {

then you have to call the function like this

$('#avisoFav').remove();
$video = $(respuesta);
$video.css("display", "none");
$("#contenidoFav").append($video);
$.each($video.find('.linkRMTP'), function (index, obj){
 $video.addObjectToOverlay(obj, confOverlay);
});
$video.slideDown('fast');

the variable "confOverlay" is the configuration of my overlay, example:

confOverlay = { 
   effect: 'drop', 
   expose: '#789',
   top:25,
   closeOnClick : false,
   fastInSpeed : 'fast',
   onBeforeLoad: function(){
    idVideo = $(this.getTrigger()).attr("idVideo");
    idiomaActual = $(this.getTrigger()).attr("idiomaActual");
    onBeforeLoad(idVideo, idiomaActual);
   },
   onLoad: function(){
    $("#contenedorVideo > *").remove();
    url= $(this.getTrigger()).attr('link');
    onLoaded(url);
   },
   onClose: function (){
    $("#contenedorVideo > *").remove();
   }
  };

so thats all that you have to do for the overlay worked with new create elements in real time.

Atte. Salvador Romero

Answer 4

Salvador, I have added the code below but it still doesn't work properly. Am I doing something incorrectly? Please let me know. I also have link('tools.overlay-1.0.4', true);?> at the top of the document.

   $.fn.addObjectToOverlay = function(element, confOverlay){
     el = new Overlay($(element), confOverlay);
     instances.push(el);
     $(this).data("overlay", el);
    };

   confOverlay = {
    expose: '#000000',
    close: '.close_overlay',
    finish: {
     top: 'center',
     left: 'center',
     absolute: false
    }
   };

   $(".overlay_popup").addObjectToOverlay(obj, confOverlay);

Answer 5

Sorry for answers late change the function with this code

$.fn.addObjectToOverlay = function(element, confOverlay){ 
    if ($.isFunction(confOverlay)) {
        conf = {onBeforeLoad: confOverlay}; 
    }

    var globals = $.extend({}, $.tools.overlay.conf); 
    confOverlay = $.extend(true, globals, confOverlay);
    el = new Overlay($(element), confOverlay);
    instances.push(el);
    $(this).data("overlay", el);
    return confOverlay.api ? el: this;
};

Answer 6

Why don't you use the API.load in the click event?

http://flowplayer.org/tools/overlay.html

var overlayDiv = $(".overlay_popup").overlay({expose: '#000000', close: '.close_overlay',   finish: { top: 'center', left: 'center', absolute: false }});

$(".overlay_popup").bind("click", function(){overlayDiv.load();})