How to load Ajax content into current colorbox window?

I'm searching for the answer for three days in a row already. the matter is that I have a page, links on which shocould load colorbox with Ajax content that in its turn contains links that shocould be loaded in the same colorbox modal window. so far I managed to make it work (partially) by this:

 
<SCRIPT type = "text/JavaScript">$ (Document). Ready (Function() {$ ("A [rel = 'open _ Ajax ']"). Live ('click ',Function() {$. Colorbox ({href: $ (This). ATTR ('href')});Return False;});});</SCRIPT>
 

It loads a 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 be loaded within the current one. will appreciate any thoughts. thanx!

P.s. Links in the main window:

 
<A Title = "client details" rel = "open_ajax" href = "http: // localhost/client/details/123"> client details... </a>
 

And links in the colorbox are all the same (it is simply 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>
 

1 answer

Youu wowould need to load the content into the same colorbox rather than opening a new instance. I wocould start by making sure that the event handler context to open the colorbox was exclusive and not hooked onto the 'open _ Ajax 'elements in the colorbox.

Something like this:

 
<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 into the colorbox you already have open.

Something like this:

$ ('# 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 );}});}); 

Http://stackoverflow.com/questions/5273311/how-to-load-ajax-content-into-current-colorbox-window