Accessing javascript functions inside ajax return content?

[Aksel]

Hi guys, I'm still pretty new to javascripting so be gentle

I hope you guys can help me out a little on this one.

I'm creating a page where I load some of my contents through ajax calls. In the returning content I'm trying to access some jquery features (lightbox for example). But this is apparantly not working out of the box

I have a plugin on my joomlasite which generates a colorbox popup (lightbox) from all links with the class "modal". This apparantly is not working on the contents I return with the ajax call.

From what I've seen , it seems that the plugin loads this little javascript snippet:

<script type="text/javascript">
			$h(document).ready(function(){
				$h('a.modalizer_link,a.modal,a.modalizer').colorbox({});
				$h('a.modalizer_link_image').colorbox({});
				$h('a.modalizer_link_external').colorbox({width:'80%',height:'80%',iframe:true});
			});
  </script>

And the javascript file itself is already added inside the main document.

Do you guys have any advice on how I go about this to be able to access this function with the contents I return in my Ajax call? And please... hold my hand a little here as I still consider my self a total n00b when it comes to Javascripting

Thanks in advance for any help ! :)

[Airshow]

Aksel,

If I understand correctly, you put a (jquery?) plugin in place on the page then try to attach that plugin's functionality (colorbox) to links that are dynamically inserted, with ajax, into the DOM.

The first question is whether colorbox functionality can be successfully attached to links with class="modal" (etc) that are put in place when the page is first served served. The attachment should be effected with the $h(document).ready(function(){...}); code you posted above.

This will provide assurance that the plugin is successfully installed and working.

Only when you have this assurance can you address the trickier issue of attaching colorbox to the dynamically inserted links.

Airshow

[Aksel]

Aksel,

If I understand correctly, you put a (jquery?) plugin in place on the page then try to attach that plugin's functionality (colorbox) to links that are dynamically inserted, with ajax, into the DOM.

The first question is whether colorbox functionality can be successfully attached to links with class="modal" (etc) that are put in place when the page is first served served. The attachment should be effected with the $h(document).ready(function(){...}); code you posted above.

This will provide assurance that the plugin is successfully installed and working.

Only when you have this assurance can you address the trickier issue of attaching colorbox to the dynamically inserted links.

Airshow

Hi Airshow, thanks for the quick reply :)

I'm running my site on a Joomla CMS. The Plugin is a joomla-plugin.

From what I've seen it loads a .js file which contains the functions etc regarding the colorbox itself which extends the jquery library. It also loads a CSS file.

The only code snippet loaded into the file itself is the function I pasted into the startingpost.

The colorbox works fine with the content loaded inside the original page before being replaced by the ajax loaded content.

It should trigger the colorbox on all links with the class="modal" added to it..this is added manually by me.

The plugin alters the links upon pageload it seems. This is an example on how the original link looks like:

<a class="modal" href="mypage.php" />

That's the link which I've added manually... then upon page load it's changed by the plugin to:

<a target="_blank" class="modal" "mypage.php?ml=1" />

The colorbox works as it should on this content as it's part of the original page which is loaded. However when I replace the content wherever on the same page, with ajax returned content...the colorbox doesn't work =/

[Airshow]

OK, that all makes sense.

The $(document).ready(...) code does exactly what it is being asked to do, namely to attach colorbox functionality to links when the page is loaded. However it does not cater for any links that do not yet exist at that time.

What you need to do is to run the same code again inside the ajax "success" handler, after it has inserted its links.

You could copy the code into your ajax "success" handler but it would be cleaner to convert it to a named function, called from two places; $(document).ready(...) and the success handler.

You need to ensure that the named function is in a scope that can be accessed from both places. The only scope that is guaranteed is the global scope. Other scopes may be available depending on how the code is organised.

Airshow

[Aksel]

Thanks alot Airshow!!! :D Problem solved!

You're the best :D

[Airshow]

Aksel,

That's fantastic.

Can you mark "solved" please. There's a button somewhere on the page.

Airshow