Cómo hacer una llamada ajax desde el buscapersonas drupal

Question

Soy nuevo en drupal y uso drupal6.Tengo un módulo que recupera un conjunto de detalles de los empleados de la base de datos según los campos de entrada. El botón Enviar llama a Función JavaScript en un emp.js archivo que genera una llamada ajax

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

Mientras intento usar el buscapersonas, hago la llamada directamente como se muestra a continuación y se muestra en una nueva página.

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

Necesito mostrar los resultados en la misma página.¿Cómo se debe modificar la llamada al buscapersonas para hacer esto?

Answer 1

Usted debe hacer su vida más fácil mediante el uso de las funciones de utilidad jquery al hacer peticiones AJAX en lugar de hacerlas 'por sí mismo'. La biblioteca jquery está incluido en el núcleo de Drupal (al menos para Drupal 6). En cuanto a la documentación, se puede comenzar con rel="nofollow este mensaje el Ajax en Drupal usando jQuery .

Answer 2

Hice un blog sobre este tema JS con AJAX y PHP y se han pegado a continuación.

JS con AJAX y PHP

Drupal tiene un amplio soporte para AJAX JS y como parte de sus formas estándar y hay tutoriales que explican cómo funciona esto. Sin embargo, no pude encontrar un buen tutorial para explicar cómo Javascript puede comunicar con un módulo de Drupal de manera ad-hoc. Por ejemplo, yo quería ser capaz de modificar cualquier código HTML arbitrario basado en la información de estado disponible en el PHP. Esta técnica se presenta a continuación.

Usted verá en la parte superior de esta página son fichas que por defecto en este tema son bastante sencillo. Quería modificarlos de tal manera que la pestaña seleccionada en ese momento se destacaría más. Por supuesto, esto se podría hacer con sólo CSS, pero yo quería desarrollar esta técnica para los casos en CSS por sí sola no sería suficiente.

A continuación se muestra la JS que se puede añadir directamente al archivo JS se ha descrito anteriormente. Hay una función de jQuery que opera en el elemento con el ID '-menú principal-links' cada vez que la página se ha cargado y está listo. Me da la innerHTML y uso encodeURIComponent para convertirlo en una cadena de seguridad que se puede pasar como un parámetro de URL. Tenía que hacer esto porque una de las fichas hace referencia a una dirección URL que pasa un parámetro.

  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 función jQuery termina llamando loadXMLDoc que es donde el poste AJAX se realiza especificando el URL que se captura por el hook_menu en el módulo de Drupal. También utiliza una función de devolución de llamada que se pasa en el cfunc parámetro. A su regreso, la respuesta JSON se analiza para convertirlo a HTML y esta se almacena directamente de vuelta a la innerHTML originales. Por lo tanto, cualquiera que sea el módulo PHP hizo con el HTML reemplaza el HTML original.

En el lado PHP hay primero el elemento de matriz de la hook_menu:

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

La función de devolución de llamada es entonces muestra a continuación. En primer lugar, se saca el parámetro de bloque y lo carga en un objeto DOM de modo que se puede analizar. El objeto simple_html_dom es suministrada por el módulo simplehtmldom, que necesitará para instalar y activar. No se olvide de instalar la biblioteca asociada también. Esto debe terminar en /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));
   }
}

Por último, se realiza un bucle a través de los elementos li añadiendo un estilo CSS en línea que cambia en función de si la pestaña está activo o no. Entonces, sólo se crea una cadena del objeto DOM y lo devuelve a través de drupal_json_output, lo que lo convierte en formato JSON. Esto por supuesto es recibido en la función de devolución de llamada JS.