Re-bind overlay bindings after AJAX call Created Jun 16, 2009

same problem here:http://flowplayer.org/forum/20/21351

I tried everything I could imagine to get this to work. I noticed that JQuery added a new way to bind, called live that supposedly does dynamic binding with AJAX elements.

Maybe an update to tools using this binding technique would get rid of the need to re-init the bindings.

Otherwise, we at least need a reload function because I can't get this to work.

Hi Jerame, have you managed to workaround this issue? I'm having the same problem. If I find a solution I'll post it right here, so you can try it too.

Best regards, edgardo.

I gave up and went back to ThickBox. I had to deliver the project and never found anything that would work how I wanted.

Let me know if you find something.

I'd be interested in how you used thickbox for this... I"m trying like the devil to get overlay to work but it keeps breaking my template.... big problem.

+5 on this issue, been plaguing me for weeks!...

can the tools.overlay (& maybe the other tools as well) leverage the .live binding technique? or make it part of config?

Love Your Geek has the solution. Simples.

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

Jerame the easiest solution for you is to use live event on mouseover to dynamically rebind your added elements after an ajax call. It is simple to implement here is how :http://docs.jquery.com/Events

I need a solution to this issue asap, too. Nothing I've tried from the thread above works and I attempted Saintberry's idea from this thread http://flowplayer.org/tools/forum/40/23848 without success.

I have a bunch of anchors triggering ajax load of content to an overlay but after adding new anchors after initial page load , those new elements will not trigger (the existing anchors do).

Any assistance would be very welcome.

Happy Holidays!

hey jetico, did you get your answer yet? Let me know if you still are looking for an answer.

Did anyone have a solution for this? Because I ran into the same problem and found a simple solution. OK. Here's what I had...

I had a bio page for a company that was using ajax to pull in the individual bios of the employees. The bio pages had a few jquery effects. However, because the page had already initialized, only the first bio would run with the effects. So after some fiddling. I decided to call the jquery library again on the bio page - it worked! It wasn't a big deal since the browser already cached the jquery library so the overhead was minimal, but for some reason it triggered the effects on each new ajax call. Voila!

Example:
Main Page:

<html>
<body>
<other code here>

/* AJAX calls here */

<script>MAIN  JS HERE </script>
<script>EXTERNAL PAGE  JS HERE TOO </script>
</body>
</html>

External Page Called via AJAX:

<html>
<body>

<script>JQUERY LIBRARY HERE</script>

<div> MAIN BIO CONTENT HERE </div>

</body>
</html>

I hope this helps somebody.

I was able to rebind the overlay to my element after an ajax call refreshed the contents in an accordion tab.

Not sure if this is the best way, but here is what I did:

var clickLink = $("a[rel]").overlay();
$("a[rel]").bind("click",function(){clickLink.load();});

So that the overlay is bound to my element when it's clicked.

This is in response to my previous post - a correction.

This does work, but not for new div overlay elements that are generated as a result of the ajax call.

In other words:
1) Original page is loaded and overlay initialized for an element with a div #1 overlay as the target 2) accordion tab calls new content via ajax that has a different div overlay (div #2)as the target of a different link
3) on a successful ajax call, the overlay is re-bound, but only to div#1, not to the new div#2 that is generated on the ajax call

Does anyone know how to solve this? I see there a lot of conversations that have occurred related to this topic but no one seems to have a definitive answer. I think some of the various forum questions relate to how to rebind an existing overlay div to a new or <img rel> clickable element, but I believe my question is different.

http://flowplayer.org/tools/forum/40/23848 and search for saintberry.
Here is my working version:

	 	  var overlayObject = $('.overlay').overlay({ 
		 	    api: true,  
		 	    // as you can see this is just a standard overlay confg  
		 	    // the key is api must = true  
		 	    onBeforeLoad:function(){
					// Go and get the definition for just this trigger from the glossary.html.
					$('div.overlay #definition').html(ajax_load).load(overlayUrl);
		 	  	}
	 	  }); 
	 	 
	 	  // set-up a live() event to bind click to all future triggers 
	 	  $('.help_link').live('click', function(e){ 
	 		   overlayUrl = loadUrl+ " #"+$(this).attr("name");
	 		   e.preventDefault(); 
	 		   
	 		   // load the overlay 
	 		   overlayObject.load(); 
	 	  });

After spending over 3 hours on these solutions that don't work well, here is the SIMPLEST/BEST method in my opinion and it's 1 single line of code.

open the overlay overlay.js file

just find the overlay function (Do a search for "$.fn.overlay = function(conf)"

Then replace this line

if (el) { return el; }

with this one

if (el) {this.removeData("overlay");

That's it, 1 single line of code took 3 hours... Basically what we are doing here is when the element exists with a overlay we clear it out, so each ajax load reloads the overlay. Works perfect and doesn't make sense to me to do it any other way since you can then use your overlays the way they are intended. Here is the whole function when you're done.

You can see where I commented out the 1 line and replaced. I hope this saves some other people the headache it caused me.

	$.fn.overlay = function(conf) {   
		
		// already constructed --> return API
		var el = this.data("overlay");
//		if (el) { return el; }	  		 
		if (el) {this.removeData("overlay");  }	  		 

		
		if ($.isFunction(conf)) {
			conf = {onBeforeLoad: conf};	
		}

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

There was a small problem in this method in that items would get added to the overlay 2x's. The solution is also adding the line insatances.clear();

So here is the entire function

$.fn.overlay = function(conf) {   
		
		// already constructed --> return API
		var el = this.data("overlay");
//		if (el) { return el; }	  		 
		if (el) {this.removeData("overlay");  
			  instances.clear();
			}	  		 

		
		if ($.isFunction(conf)) {
			conf = {onBeforeLoad: conf};	
		}

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

There was a small problem in this method in that items would get added to the overlay each time you reloaded via ajax causing it to display many times (Even if it's not noticeable, but you can test it's happening by throwing an alert box in there). The solution to this is to unbind the prior events.

So here is the entire function

	$.fn.overlay = function(conf) {   
		// already constructed --> return API
		var el = this.data("overlay");
//		if (el) { return el; }	  		 
		if (el) {this.removeData("overlay");  
			
			//effects = {};
			}	  		 

		
		if ($.isFunction(conf)) {
			conf = {onBeforeLoad: conf};	
		}

		conf = $.extend(true, {}, $.tools.overlay.conf, conf);
		
		this.each(function() {
			$(this).unbind();
			el = new Overlay($(this), conf);
			instances.push(el);
			$(this).data("overlay", el);	
		});
		
		return conf.api ? el: this;		
	}; 

Hey vinnie. What would be the modification I have to make to the full jtools script, which includes overlay, to get the same result. I searched the javascript file for

 if (el) { return el; }

but it's not there. They do it a little differently.
Thanks

please anyone?

Why are you using the full jtools script?, you should only use what you need. What is the issue you are having, are you able to load a overlay after an Ajax call on new items, or are you having issues with multiple overlays on the same item?

The first issue is resolved in the $.overlay function call, by not returning the overlay and instead re-adding the overlays to the elements. Using this method you MUST unbind the overlays on each ajax call since in essance you are re-loading the overy on each element each time you do a ajax call.

I have not been getting notifications from this forum, so contact me directly via vincent_senese@yahoo.com.

I have the same problem today. It takes me almost a day to find the solution below. Hope this works for you as well. :)

In the ajax call back, create the html link for the modal box, then initialize the overlay.

callAjax = function () {
$.ajax({
type: 'POST',
url: url,
data: {

},
dataType: 'json',
success: function (data) {
if (data.error) {
}
else {
//construct the link
$div.append('Add Note');
//do others ...
//then initialize the overlay
var clickLink = $('a.add-note').overlay({
mask: {
color: '#ccc',
loadSpeed: 100,
opacity: 0.5
},
close: 'button.cancel',
closeOnClick: false
});
}
},
error: function () {
},
complete: function () {
}
});
};

Next step, use .live() to hook-up the click event and load the modal dialog.

$('a.add-note').live('click', function () {
$(this).overlay().load();
return false;
});

After searching and trying all kind of solutions, non worked out for me. Apart from one simple code. I've just added the line below after my existing overlay callback

$('someSelectorLike.div[rel]').live('click', function () {
   $(this).overlay().load();
   $(this).overlay().load();
   return false;
});

I do the part "$(this).overlay().load();" twice because otherwis it you have to click it twice before the overload is vissible again.
The first time it re-bind the selector to the overload and the second time is actualy expand the overload vissible on the screen.

Hope it helps to you.

(Tip: I had to do this for virtuemart joomla component in function of reload the minicart .vmCartModule module after an ajax callback updateMiniCarts().)

For anyone having trouble re-binding overlays that load external pages, I was able to solve it with the following code:

$('a[rel]').live('click', function () {
	
      var clickLink = $(this).overlay({
 
	mask: 'black',
	effect: 'apple',
	 
	onBeforeLoad: function() {
	 
	// grab wrapper element inside content
	var wrap = this.getOverlay().find(".contentWrap");
	 
	// load the page specified in the trigger
	wrap.load(this.getTrigger().attr("href"));
	}
 
     });

	$(this).overlay().load();  //initiates overlay
	clickLink.load();  //loads above overlay settings
	return false;
});

Nothing I've tried in this thread works. My current version looks like this, which is called in $(document).ready:

$("#employeesTable").live('mouseover', 'a[rel]', function (event) {
     $(event.data).overlay({
          mask: 'white',
	  effect: 'apple',
			 
	  onBeforeLoad: function() {
		// grab wrapper element inside content
		var wrap = this.getOverlay().find(".contentWrap");
		// load the page specified in the trigger
		wrap.load(this.getTrigger().attr("href"));
	  }
     });
});	

The employeesTable can be updated if a user does a search. I thought it only worked when the page first loaded, but one interesting fact is that you can conduct as many searches as you want before actually clicking on a name. Once you click on a name, forget about doing another search because the overlay won't appear again. There's got to be an easy fix for this, but I've already spent 5-6 hours trying to figure it out.

Figured out what the problem was. I was displaying an outside html page in the overlay and in that page was another call to the jquery library.

<script type="text/javascript" src="jquery/jquery-1.7.js"></script>

After commenting this line and jquery ui just to be safe it worked beautifully. I also replaced the live() function with on() since I'm using 1.7. So here is how the function looks, called in $(document).ready:

$("#employeesTable").on("mouseover", "a", function(event) {
		$(this).overlay({
			mask: "white",
			effect: "apple",
				 
			onBeforeLoad: function() {
				// grab wrapper element inside content
				var wrap = this.getOverlay().find(".contentWrap");
				// load the page specified in the trigger
				wrap.load(this.getTrigger().attr("href"));
			}
		});

Now, I can do as many searches as I need and the overlay will open every time. Hope this helps someone cause it took me about 2 days to figure it out.

Acepero's works for me, thank you. It just needs...

$('a[rel]').live('click', function (e) {
	e.preventDefault(); //dont let it navigate to the page

That little event e and prevention.

-[g]

I had the same issue when loading AJAX content and then it would deactivate all my triggers...

This is how I fixed it...

function initTriggers()
    {                       
        $(".triggers").unbind("click").click(function()
            {
                var clickedLink = $(this);
                clickedLink.overlay(
                    {
                        //Put your options here...
                    });
                clickedLink.overlay().load();
            }); 
            
                                
    }

This block of code is called every time I reload my content with my AJAX call. It works!!!

I hope this helps anyone else!