Comment faire appel ajax à partir téléavertisseur drupal

Question

Je suis nouveau à l'aide de Drupal et drupal6 .. j'ai un module qui va chercher un ensemble de détails de l'employé de la base de données sur la base fields.The d'entrée le bouton d'envoi appelle une fonction JavaScript dans un emp.js fichier qui génère un appel ajax

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

alors que je suis en train d'utiliser téléavertisseur-il appeler directement comme ci-dessous et affiche dans une nouvelle page.

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

i besoin d'afficher les résultats dans la même page. Comment devrait modifier téléavertisseur pour le faire?

Answer 1

Vous devez vous rendre la vie plus facile à l'aide des fonctions utilitaires jquery lorsque vous faites des requêtes AJAX au lieu de les faire 'par vous-même. La bibliothèque jquery est inclus dans le noyau Drupal (au moins pour Drupal 6). En ce qui concerne la documentation, vous pouvez commencer par ce post sur l'Ajax dans Drupal en utilisant jQuery .

Answer 2

Je l'ai fait un blog sur ce sujet JS avec AJAX et PHP et ont collé ci-dessous.

JS avec AJAX et PHP

Drupal a un support étendu pour JS et AJAX dans le cadre de ses formes standard et il y a des tutoriels qui expliquent comment cela fonctionne. Cependant, je ne pouvais pas trouver un bon tutoriel pour expliquer comment Javascript peut communiquer avec un module Drupal de façon ad hoc. Par exemple, je voulais être en mesure de modifier tout html arbitraire en fonction des informations d'état disponibles dans le PHP. Cette technique est présentée ci-dessous.

Vous verrez en haut de cette page sont des onglets par défaut dans ce thème sont plutôt simple. Je voulais les modifier de telle sorte que l'onglet sélectionné se démarquerait plus. Bien sûr, cela pourrait être fait avec seulement CSS, mais je voulais développer cette technique pour les cas où CSS seul ne serait pas suffisant.

Voici la JS qui peut être directement ajouté au fichier JS décrit précédemment. Il y a une fonction jQuery qui fonctionne sur l'élément avec « menu principal des liens » id chaque fois que la page a été chargée et est prêt. Je reçois le innerHTML et utiliser encodeURIComponent pour le convertir en une chaîne sûre qui peut être passé comme un paramètre d'URL. Je devais le faire parce que l'un des onglets références une URL qui passe un paramètre.

  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 fonction jQuery finit par appeler loadXMLDoc qui est l'endroit où le poste AJAX a lieu spécifiant l'URL qui est capturée par le hook_menu dans le module Drupal. Il utilise également une fonction de rappel qui est passé dans le paramètre cfunc. Au retour, la réponse JSON est analysé pour le convertir en HTML et cela est stocké directement à l'innerHTML d'origine. Ainsi, quel que soit le module PHP fait au code HTML remplace le code HTML d'origine.

Du côté de PHP il y a d'abord l'élément de tableau du hook_menu:

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

La fonction de rappel est alors indiquée ci-dessous. Elle a d'abord tire le paramètre de bloc et la charge dans un objet DOM afin qu'il puisse être analysé. L'objet simple_html_dom est fourni par le module simplehtmldom, que vous devrez installer et activer. Ne pas oublier d'installer aussi bien la bibliothèque associée. Cela devrait se retrouver dans /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));
   }
}

Enfin, il boucle à travers les éléments li en ajoutant un style CSS en ligne qui change selon que l'onglet est actif ou non. Ensuite, il crée juste une chaîne de l'objet DOM et renvoie via drupal_json_output, qu'il convertit au format JSON. Bien sûr, cela est reçu dans la fonction de rappel JS.