1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jquery/thickbox from content in ajax layer?

Discussion in 'jQuery' started by 123GoToAndPlay, Sep 29, 2008.

  1. #1
    How do trigger thickbox from an ajax layer

    I got this in an ajax layer

    
    <a href="test.html?keepThis=true&TB_iframe=true&height=500&width=750" title="test" class="thickbox">test</a>
    
    Code (markup):
    but it doesn't work??
     
    123GoToAndPlay, Sep 29, 2008 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    you have posted way out of context, need source for better help.

    it's a link with a class of thickbox. chances are, you have a handler that does something like (in pseudo code)

    
    // find all thickbox links in the document
    $(".thickbox").click(function() {
        // do something here, like popup the images etc.
    });
    
    Code (markup):
    if this gets initialised at page load, for example within a:
    $(document).ready(function() { ... });
    Code (markup):
    as a result, once page is loaded, all links get processed 1 by 1 and the new click events get attached.

    when you run an ajax call that brings you back the html that you posted, it is a new element that did not exist before. hence, the click events for it are not attached.

    you need to attach something on the ajax success event that re-scans the document and re-attaches all the click events (in case new elements have come back in the response that you print). for example:
    $.ajax({
      type: "GET",
      url: "test.php",
      success: function() {
         // call up the thickbox handler again / reinitialise the plugin
      }
    });
    Code (markup):
    i hope this makes sense. the crappy thing about jquery is also it's best feature: plugins. but since you are probably using a plugin that does the nice looking "thickboxes", now you are stuck with it w/o understanding how it works and need to do some reverse engineering... good luck :)

    EDIT:

    read up on thickbox and saw it's source.
    run this on the success function:

    tb_init('a.thickbox, area.thickbox, input.thickbox'); //pass where to apply thickbox
     
    dimitar christoff, Sep 29, 2008 IP
  3. 123GoToAndPlay

    123GoToAndPlay Peon

    Messages:
    669
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    @dimitar, tx for your reply. I think you put me in the right direction.

    gonna post my solution here with a simple example

    here's my simple example
    bldd.nl/jsproblems/

    trying your suggestion here
    bldd.nl/jsproblems/index2.html
     
    123GoToAndPlay, Sep 29, 2008 IP
  4. 123GoToAndPlay

    123GoToAndPlay Peon

    Messages:
    669
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    hmm, haven't found a solution yet. Anymore pointers???
     
    123GoToAndPlay, Sep 30, 2008 IP
  5. grandpa

    grandpa Active Member

    Messages:
    185
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    75
    #5
    same problem here. have been working for couple hours and found no solution. :mad:
     
    grandpa, Oct 20, 2008 IP
  6. 123GoToAndPlay

    123GoToAndPlay Peon

    Messages:
    669
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ok, been awhile but tx to dimitar the thickbox part works now. But now i have an issue with sIfr, which should replace H3 tags.

    
    function makeRequest2(url,layerName) { 
    $(document).ready(function(){
    //ajax
    $.ajax({
    	   type: "GET",
    	   url: url,
    		success: function(data){
    			//alert( "Data display: " + data );
    			$(layerName).html("<h3>Test Jquery thickbox</h3>")
    			.append(data);
    			tb_init('a.thickbox, area.thickbox, input.thickbox'); //re init thickbox i guess
    			sIFR.replaceElement();//this doesn't work
    		}
    	 });
    //end ajax
    })
    }
    
    Code (markup):
    Anyone knows how to reini the sIfr???

    edit: found it by just creating a js function like
    
    function showSifr(){
    sIFR.replaceElement(named({sSelector:"body h2", ...........
    sIFR.replaceElement(named({sSelector:"body h3",..........
    etc....... 
    }
    
    Code (markup):
    and make a callback to showSifr()
     
    123GoToAndPlay, Jan 16, 2009 IP
  7. Joey K

    Joey K Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hey, I know this is solved, but I still wanted to point something out for reference. I was looking for the same thing, I followed the instructions pointed out here, but still got things messed up!

    The situation:

    I have a Thickbox element on the page, and I load another element witj ajax, that element also needs Thickbox. But just calling tb_init() causes the first existing element to show up twice!

    I found a better solution on this blog:
    http://ninetynine.be/blog/2009/03/thickbox-reinitialize-thickbox-after-change-by-ajax/

    This function will reinit thickbox, but will remove previous thickbox click-events.

    Joey
     
    Joey K, Apr 1, 2009 IP