How to load AJAX contents into the current Colorbox window?

Question

I have been looking for an answer for three days in a row. The fact is that I have a page for which links must load Colorbox with AJAX content, which, in turn, contains links that must be loaded in the same Colorbox modal window. So far, I managed to get it to work (partially) as follows:

<script type="text/javascript"> $(document).ready(function(){ $("a[rel='open_ajax']").live('click', function() { $.colorbox({ href:$(this).attr('href') }); return false; }); }); </script> 

It loads the Colorbox window if I click on a link, but in this window, if I click on its links, it opens another Colorbox window. And I want the content to load in the current one. Any thoughts will fall in love. Thanx!

PS Links in the main window:

 <a title="Client Details" rel="open_ajax" href="http://localhost/client/details/123">Client Details...</a> 

And the links in Colorbox are all the same (this is just pagination):

 <a rel="open_ajax" href="http://localhost/client/details/123/1">1</a> <a rel="open_ajax" href="http://localhost/client/details/123/2">2</a> <a rel="open_ajax" href="http://localhost/client/details/123/3">3</a> <a rel="open_ajax" href="http://localhost/client/details/123/4">4</a> <a rel="open_ajax" href="http://localhost/client/details/123/5">5</a> 

Answer 1

If you need to load the contents into the same Colorbox, and not open a new instance, I would start by making sure that the event handler context for opening Colorbox was exclusive and not connected to the 'open_ajax' elements in Colorbox.

Something like that:

 <script type="text/javascript"> $(document).ready(function(){ $("a[rel='open_ajax']:not(#colorbox a[rel='open_ajax'])").live('click', function() { $.colorbox({ href:$(this).attr('href') }); return false; }); }); </script> 

If the above does not work, try making the selector more specific / unique.

Then AJAX in the new content directly in Colorbox, which you already have open.

Something like that:

 $('#cboxLoadedContent a[rel="open_ajax"]').live('click', function(e){ // prevent default behaviour e.preventDefault(); var url = $(this).attr('href'); $.ajax({ type: 'GET', url: url, dataType: 'html', cache: true, beforeSend: function() { $('#cboxLoadedContent').empty(); $('#cboxLoadingGraphic').show(); }, complete: function() { $('#cboxLoadingGraphic').hide(); }, success: function(data) { $('#cboxLoadedContent').append(data); } }); });