I'm using jQuery Tools to set up some overlay forms and dialog boxes on my site. They've been working well so far, but a change to my site is raising some issues:
On the page containing the overlays, I'm doing some ajaxy stuff to add new items to the page. One of those items contains a link that is itself meant to trigger the overlay and present a form, just like the other items on the page. The addition of the item to the page is working correctly, but the link in that item does not open the form in the overlay. Rather, it gets opened in a separate page. When I refresh the page, the new item is there, and its link now properly opens in the overlay.
My suspicion is that just adding the item to the page isn't enough -- that I have to poke jQuery, or jQuery Tools, or something, so that some internal stuff gets set up that will connect the new item's link to the overlay. I'm thinking that this happens when the page is reloaded, since the "new" item is by then just another piece of content on the page, but it's not happening on the ajax call, since all that does is to insert some stuff into the page's DOM.
Am I right here, and (if I am), does anybody know what has to be poked or kicked in jQuery or tools to get these connections made? I've been looking for api calls named things like "activate" or "initialize", but without much luck... Thanks!
I assume your ajax-added html link looks something like this:
<a href="external-content.htm" rel="#overlay">Do It</a>
And you have some javascript somewhere in your page that looks something like this:
$('a[rel]').overlay({
/* your options here */
});
The javascript shown here simply finds and applies the overlay plugin to all a elements that define a rel attribute. In a typical page (using something like jquery's document.ready()), the javascript gets run after the html is loaded, and so everything works out fine.
The problem here, is that your ajax operation adds the new link to the page after the javascript has already run, so the overlay plugin never gets attached to your ajax-added link; and without the overlay enhancement, the link functions like a normal html link -- opening the external page in a new window.
The solution is to simply run the javascript again after your ajax function completes. Assuming you're using jQuery.ajax to run your ajax request, you'll just need to provide a success handler in the settings object, and within there, just re-run the overlay javascript plugin as shown above.
EDIT: I should note that this is not the most efficient solution, as it will apply the overlay plugin to all the links in the page -- even those that already had it. You can, of course use a more specific selector to target only the links you've just added - but for most applications, it won't be a problem to just apply it again to everything.