Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Reading Page Again With Colorbox After AJAX Update

    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,

    Code:
    $.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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Most probably you are calling $(...).colorbox() somewhere in your script. Did you ever try to call this method again AFTER loading additional content?

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

    Code:
    $.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 :\

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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
    Code:
    $.ajax(
    		{..});
    $.colorbox.init();
    will not execute .init() AFTER the request but DURING the request.

  • Users who have thanked devnull69 for this post:

    Tanner8 (06-06-2011)

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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
    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!

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •