Reading Page Again With Colorbox After AJAX Update

[Tanner8]

Hello, I am having a lot of trouble using colorbox after I have changed the page using AJAX. The site uses AJAX the pages in a section. So if you click 'next' or 'previous', it will do a query and populate your window with the next page data without reloading the window. Basic AJAX implementation. If you have trouble visualizing this this, think of it like a forum that uses AJAX for 'next' and 'previous' pages instead of reloading the whole page.

Now, I have a link that works perfectly fine on the initial page load to open up a colorbox. The problem is that once you click the next page button, the link that is supposed to open up the colorbox on that page doesn't work. I figured it is because the colorbox is only initialized to the initial page that is loaded, so I figured that's what the colorbox init call was for. I tried adding this line each time you change pages,

$.colorbox.init();

However that doesn't work. It is calling the init method, I put an alert in there to make sure, but it still won't open a colorbox on the next page. Maybe it still isn't initializing it to the "new" page?

There are no errors being thrown, it just goes to the requested page instead of having the page in a colorbox.

Any ides on how I could fix this?

Thank you

[devnull69]

Most probably you are calling $(...).colorbox() somewhere in your script. Did you ever try to call this method again AFTER loading additional content?

[Tanner8]

I tried sticking it in multiple places, where I decided was the best spot was in at the end of the function where the ajax call takes place.

$.ajax(
		{..});
$.colorbox.init();

I even tried adding a set timeout for a second to make sure everything was populated and done before attempting to reinitialize the colorbox. That didn't seem to work either :\

[devnull69]

No, I'm not talking about .init() ... I was talking about the $('...').colorbox() call. Did you try that?

BTW: Due to the asynchronous nature of asynchronous requests (AJAX = Asynchronous Jvascript And Xml) this code

$.ajax(
		{..});
$.colorbox.init();

will not execute .init() AFTER the request but DURING the request.

[Tanner8]

Originally Posted by devnull69

No, I'm not talking about .init() ... I was talking about the $('...').colorbox() call. Did you try that?

BTW: Due to the asynchronous nature of asynchronous requests (AJAX = Asynchronous Jvascript And Xml) this code

$.ajax(
		{..});
$.colorbox.init();

will not execute .init() AFTER the request but DURING the request.

Great that actually solved the problem! The only thing is that it only works if you have an alert or a setTimeout for it, so it had time to load the data before the call to reinitialize it is made. So I added the "async: false" flag to the AJAX and everything seems to work smoothly now. Thanks a lot!

[devnull69]

That's what the "success" method is for ... everything located in the success method of $.ajax() will be executed AFTER the request. No need for alert or setTimeout!