How to make ajax call from drupal pager

Question

i'm new to drupal and using drupal6.. i have a module which fetches a set of employee details from database based on input fields.The submit button calls a JavaScript function in an emp.js file which generates an ajax call

 xmlHttpReq.open('GET', "/empfinder.json&dept=" + dept + "&gender=" + gen+ "&age=" + age, true);

while i'm trying to use pager it directly make call as below and displays in a new page.

http://156.23.12.14/empfinder.json?page=1&dept=ACC&gender=Male&age=34

i need to display the results in same page. How should modify pager call to do this?

Answer 1

You should make your life easier by using the jquery utility functions when doing AJAX requests instead of doing them 'by yourself'. The jquery library is included in Drupal core (at least for Drupal 6). As for documentation, you could start with this post on Ajax in Drupal using jQuery.

Answer 2

I did a blog on this subject JS with AJAX and PHP and have pasted it below.

JS with AJAX and PHP

Drupal has extensive support for JS and AJAX as part of its standard forms and there are tutorials that explain how this works. However, I could not find a good tutorial to explain how Javascript can communicate with a Drupal module in an ad-hoc fashion. For instance, I wanted to be able to modify any arbitrary html based on state information available in the PHP. This technique is presented below.

You will see at the top of this page are tabs that by default in this theme are rather plain. I wanted to modify them such that the currently selected tab would stand out more. Of course, this could be done with just CSS but I wanted to develop this technique for cases where CSS alone would not be enough.

Below is the JS that can be added directly to the JS file described previously. There is a jQuery function that operates on the element with id 'main-menu-links' each time the page has been loaded and is ready. I get the innerHTML and use encodeURIComponent to convert it to a safe string that can be passed as a URL parameter. I had to do this because one of the tabs references a URL that passes a parameter.

  var xmlhttp;
  var childnodes;
  // Send post to specified url
  function loadXMLDoc(url,cfunc)
  {
     if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=cfunc;
     // alert("loadXMLDoc: " + url);
     xmlhttp.open("POST",url,true);
     xmlhttp.send();
  }
  // AJAX redirect to camr_custom/getvisits with callback function to replace the href
  // with something to disable the link for nodes that have not been visited.
  function getMenuTabs(str)
  {
     loadXMLDoc("?q=flashum_status/get_menu_tabs&block="+str,function()
                {
                   // alert("getMenuTabs status: " + xmlhttp.status + " readyState: " + xmlhttp.readyState);
                   if (xmlhttp.readyState==4 && xmlhttp.status==200)
                   {
                      // alert("getMenuTabs: " + xmlhttp.responseText);
                      data= jQuery.parseJSON('['+xmlhttp.responseText+']')
                      $.each(data,function(){
                         // alert(this['block']);
                         document.getElementById("main-menu-links").innerHTML = this['block'];
                      });
                   }
                });
  }
  // Locate book navigation block and send innerHTML to PHP module
  $('#main-menu-links').ready(function() {
     lis = document.getElementById("main-menu-links").innerHTML;
     // alert("main-menu-links: " + lis);
     // safe encode this block so that it can contain arbitrary urls in the href links
     lis = encodeURIComponent(lis);
     getMenuTabs(lis);
  });

The jQuery function ends up calling loadXMLDoc which is where the AJAX post takes place specifying the URL that is captured by the hook_menu in the Drupal module. It also uses a callback function that is passed in the parameter cfunc. Upon return, the JSON response is parsed to convert it to HTML and this is stored directly back to the original innerHTML. Thus, whatever the PHP module did to the HTML replaces the original HTML.

On the PHP side there is first the array element of the hook_menu:

  $items['flashum_status/get_menu_tabs'] = array(
    'page callback'     => 'get_menu_tabs',
    'access arguments' => array('access flashum status'),
    'type' => MENU_CALLBACK,
  );

The callback function is then shown below. It first pulls out the block parameter and loads it into a DOM object so that it can be parsed. The simple_html_dom object is supplied by the simplehtmldom module, that you will need to install and enable. Don't forget to install the associated library as well. This should end up in /all/libraries/simplehtmldom/simple_html_dom.php.

function get_menu_tabs() {
   // drupal_set_message(t("get_menu_tabs: @code", array('@code' => print_r(null, TRUE))));
   if (array_key_exists ('block', $_GET)) {
      $block = $_GET['block'];
      // drupal_set_message(t("get_menu_tabs block: @code", array('@code' => print_r($block, TRUE))));

      // Create a DOM object.
      $html_obj = new simple_html_dom();
      // Load HTML from a string.
      $html_obj->load($block);
      // remove href for nodes not yet visited
      $index = 0;
      foreach ($html_obj->find('li') as $li ) {
         $start = strpos($li->innertext, 'href');
         $end   = strpos($li->innertext, '>', $start);
         $start_html = substr($li->innertext, 0, $end);
         $end_html = substr($li->innertext, $end);
         if (strpos($li->innertext, 'active')) {
            $li->innertext = $start_html.' style="color:red;border: solid red;margin-left:5px;margin-right:5px;"'.$end_html;
            // drupal_set_message(t("get_menu_tabs html_obj: @code", array('@code' => print_r($li->innertext, TRUE))));
         }
         else
            $li->innertext = $start_html.' style="color:black;border: solid #777;"'.$end_html;
         $index++;
      }
      $str = $html_obj->save();
      // drupal_set_message(t("get_menu_tabs str: @code", array('@code' => print_r($str, TRUE))));
      // Release resources to avoid memory leak in some versions.
      $html_obj->clear();
      unset($html_obj);

      return drupal_json_output(array('block'=>$str));
   }
}

Finally, it loops through the li items adding an inline CSS style that changes depending on whether the tab is active or not. Then it just creates a string from the DOM object and returns it via drupal_json_output, which converts it to JSON format. This of course is received in the JS callback function.