AJAX to load content in panel display

Any suggestions as to sources I might look at to get a feel for how to write some code to hook ajax up to the panel view so that it would switch out the content? Thanks!

ok, we figured it out by doing some ajax coding and good stuff like that.

First, we set up some page views to output the data that we wanted to replace. We gave them unique urls too. for us, they needed to be associated with specific nodes as well, so the address was something like ?q= faculty_bio/% (the view has an argument for node id, so that is what we would pass to the pages)

then, using the devel module, we were able to find the name for the most specific .tpl.php file. We then took the page.tpl.php file and copied only:

<div id="content-area">
          <?php	  
		  print $content; ?>
       </div>

that made it so following the link would bring up a page that only had the text of the information we wanted to dynamically display in ajax.

Next, we made a custom php pane on the panel view and inside it put this code:

$block->content =  "<div id=\"faculty_ajax\"><a href=\"?q=faculty_rep/" . arg(1). "\">Representative Publications</a><br><br><a href=\"?q=faculty_other/" . arg(1). "\">Book Reviews and Other Publications</a><br><br>  <a href=\"?q=faculty_bio/" . arg(1). "\">Biography</a></div>";

Note: $block->content is the variable where you store all the content you want that panel to display.

So, in here, we created a div and gave it an id. in our case "faculty_ajax" this is so that we can use a script.js file to find it and be triggered on a click event. this Div encompasses all 3 of the links we wanted to use to dynamically change the page. Do note, at the end of each link, where the node_id is supposed to be, we could just drop in arg(1) or whatever, because in our case, that is the 2nd argument in the current url. (the first being "node" since it is a node we are looking at)

You want to be sure before you set the ajax up, that each link will go and display only the data that you want to replace the current data.

ok, next was taking each of the pages that we set up in the first step and rewriting their output to include a div with an id. For us, that id was "faculty_content_ajax". It will need an id so that your script.js file can find it when one of your links is clicked and replace the entire div with the information at the url of the clicked on link. make sure that the closing div tag is after your [content] brackets.

Now, with that all working, you are ready to make your script.js file for drupal to find. you need to make sure that in your current theme's .info file ( {theme_name}.info ) the section where it says "Optionally add some jquery scripts to your theme." then lists scripts[] = (it might be commented out on yours if you havent loaded any java script files) just add this line:

scripts[] = script.js

now you need to in the same theme folder create yourself a script.js file.
here is the code that ended up going into our script.js file:

$(document).ready(function(){
						   
$('#faculty_ajax a').click(function(){
 $('#faculty_ajax_content').load($(this).attr('href'));
 return false;
});
}); 

ok, what does it do?
the:

 "$(document).ready(function(){})"

makes sure the page is ready.

the:

"$('#faculty_ajax a').click(function(){" 

adds a click event for all a tags with id of "faculty_ajax" (if you remember, we put that id on our links in the php pane.)

the:

 "$('#faculty_ajax_content').load($(this).attr('href'));
 return false;"

tells the script what to do on a click event for any a tag with id "faculty_ajax" to find an element (in our case a div) with the id "faculty_ajax_content" and replace it with the content we pull from the referenced url of the a tag.

and with that, you get a panels page that has links in one place, that when you click on them, it replaces the content of your choosing with that in another page without loading the current page again.

Good luck! Let me know if anyone has any questions.

Well, if you have a knowledge of how AJAX works and simply create a page (you can create it outside of drupal if you want, all you have to do is reference an address, so really, any existing webpage anywhere on the internet can be included.) if you do it in drupal though, you will probably have to mess with a .tpl.php file too so you can cut out all the drupal stuff from it.

You will have to create a div in the destination panel with an id that you will then use in your ajax call. You will also need an <a> tag somewhere with an href that calls a javascript function (or even the ajax itself) to set the named div's content. to do Javascript in an href, it looks like this: <a href="javascript: .... CODE HERE .... ;">My Ajax</a> (no semi-colon necessary if its just 1 function or statement.)