Come effettuare chiamate ajax da cercapersone Drupal

Question

Sono nuovo di Drupal e utilizzando drupal6 .. Ho un modulo che va a prendere una serie di informazioni dettagliate sui dipendenti dal database basati su fields.The ingresso presentare pulsante richiama un funzione JavaScript in emp.js file che genera una chiamata AJAX

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

Mentre sto cercando di utilizzare cercapersone direttamente fanno chiamare come qui sotto e visualizza in una nuova pagina.

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

ho bisogno di visualizzare i risultati in stessa pagina. Come dovrebbe modificare chiamata cercapersone per fare questo?

Answer 1

Si dovrebbe rendere la vita più facile utilizzando le funzioni di utilità jQuery quando si fa richieste AJAX invece di fare loro 'da soli'. La libreria jquery è incluso nel nocciolo Drupal (almeno per Drupal 6). Per quanto riguarda la documentazione, si potrebbe iniziare con questo post su Ajax in Drupal utilizzando jQuery .

Answer 2

ho fatto un blog su questo argomento JS con AJAX e PHP e hanno incollato al di sotto.

JS con AJAX e PHP

Drupal ha un ampio supporto per JS e AJAX come parte dei suoi moduli standard e ci sono tutorial che spiegano come funziona. Tuttavia, non ho potuto trovare un buon tutorial per spiegare come JavaScript in grado di comunicare con un modulo Drupal in modo ad hoc. Per esempio, ho voluto essere in grado di modificare qualsiasi HTML arbitrario sulla base delle informazioni di stato disponibili in PHP. Questa tecnica è presentato di seguito.

Si vedrà nella parte superiore di questa pagina sono schede che per impostazione predefinita in questo tema sono piuttosto semplice. Volevo modificarli in modo che la scheda selezionata avrebbe resistito di più. Naturalmente, questo potrebbe essere fatto con un semplice CSS, ma ho voluto sviluppare questa tecnica per i casi in cui i CSS da sola non sarebbe sufficiente.

Di seguito è riportato il JS che può essere aggiunto direttamente al file JS descritto in precedenza. C'è una funzione jQuery che opera su l'elemento con id 'principale-menu-link' ogni volta che la pagina è stata eseguita ed è pronto. Ho l'innerHTML e utilizzare encodeURIComponent per convertirlo in una stringa di sicurezza che può essere passato come parametro URL. Ho dovuto fare questo perché una delle schede fa riferimento a un URL che passa un parametro.

  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);
  });

La funzione di jQuery finisce per chiamare loadXMLDoc che è dove il palo AJAX avviene specificando l'URL che viene catturato dal hook_menu nel modulo Drupal. Si utilizza anche una funzione di callback che viene passato nel parametro cfunc. Al ritorno, la risposta JSON viene analizzato per convertirlo in HTML e questo viene memorizzato direttamente al innerHTML originale. Quindi, qualunque sia il modulo PHP ha fatto per il codice HTML sostituisce l'HTML originale.

Sul lato PHP c'è prima l'elemento di matrice del hook_menu:

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

La funzione di callback viene mostrato sotto. Si estrae primo parametro di blocco e lo carica in un oggetto DOM in modo che possa essere analizzato. L'oggetto simple_html_dom è fornita dal modulo simplehtmldom, che sarà necessario installare e attivare. Non dimenticare di installare la libreria associata pure. Questo dovrebbe finire 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));
   }
}

Infine, scorre le voci li aggiungendo uno stile CSS in linea che cambia a seconda se la scheda è attiva o meno. Poi si crea solo una stringa dall'oggetto DOM e lo restituisce tramite drupal_json_output, che lo converte in formato JSON. Questo, naturalmente, viene ricevuto nella funzione di callback JS.