How to use properly use thickboxes in my application?

Question

I have a couple questions regarding thickboxes. I am developing a site that needs a few thickboxes on the home page to be displayed at different times. When the thickboxes are shown, it will trigger an API call and display feedback in the thickbox.

I decided to go with displaying the thickboxes inline to reduce the amount of Ajax calls. Seems simple enough but a couple issues come up. The first is that div containing the thickbox content is removed when the thickbox is shown. Thickbox replaces the HTML with custom HTML to display the content properly. This is OK but it is problematic when I want my AJAX response to update something inside the thickbox and I have it set up to access the thickbox by selecting it's container ID. That is not available anymore. Of course I could specify unique identifiers for the response but I was just hoping to give them all the class "response" and select them based on the outer containing DIV. $("#login_lightbox > .response").html(ajax_response); Does this make sense?

My other concern is that maybe there is a better way to handle thickboxes. Should I be making the AJAX call to get the thickbox content which would then make the API call when it loads? That doesn't seem to be a good choice to me but a previous developer had it set up that way so I was hoping to get some opinions on it.

Answer 1

In order to open new Ajax content in an open Ajax ThickBox, its code must also contain the appropriate HTML (class="thickbox") to launch an Ajax ThickBox (see demo for example).

You may want to read & check the demos over at http://jquery.com/demo/thickbox/#sectionf-1

HTH

Edit:

Hey Tony, the above applies to new content links within a Thickbox, not to open a Thickbox. To go with the demo page above, the initial content contains a link:

<p>What is jquery? <a href="newTBcontent.html?height=200&amp;width=300" class="thickbox">Answer</a></p>

so that content is loaded into the Thickbox.

To go with your question, when I do the following, it works pretty well. Maybe I misunderstood your question?

Somewhere on the initial Page:

<p><a href="atb.php?height=200&amp;width=300" class="thickbox">Open AJAX Thickbox</a></p>

Thickbox content (File 'atb.php'):

<script language="javascript" type="text/javascript">
jQuery(document).ready( function()
{
    jQuery.ajax(
    {
     type: "GET",
     url: "atbd.php",
     success: function(rsp)
     {
      jQuery( ".response" ).html(rsp);
     }
    });
});
</script>
<div id="container">
    <div class="response">RSP 1</div>
    <div class="response">RSP 2</div>
    <div class="response">RSP 3</div>
    <div class="response">RSP 4</div>
</div>

File 'atbd.php':

<?php
echo date('Y-m-d H:i:s', time());
?>