Como fazer ajax chamada de pager drupal

Question

Eu sou novo para o Drupal e usando drupal6 .. eu tenho um módulo que recupera um conjunto de detalhes do funcionário do banco de dados com base na entrada fields.The enviar botão chama um função JavaScript em um emp.js arquivo que gera uma chamada de ajax

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

Enquanto eu estou tentando usar pager-lo diretamente fazer chamadas como abaixo e exibe em uma nova página.

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

Eu preciso exibir os resultados na mesma página. Como deve modificar chamada pager para fazer isso?

Answer 1

Você deve tornar sua vida mais fácil usando as funções de utilidade jquery ao fazer solicitações de AJAX em vez de fazê-los 'por si mesmo'. A biblioteca jquery está incluído no núcleo Drupal (pelo menos para o Drupal 6). Quanto à documentação, você poderia começar com este post no Ajax em Drupal usando jQuery .

Answer 2

Eu fiz um blog sobre este assunto JS com AJAX e PHP e ter colado-lo abaixo.

JS com AJAX e PHP

Drupal tem suporte extensivo para JS e AJAX, como parte de suas formas padrão e existem tutoriais que explicam como isso funciona. No entanto, eu não poderia encontrar um bom tutorial para explicar como Javascript pode se comunicar com um módulo Drupal de uma forma ad-hoc. Por exemplo, eu queria ser capaz de modificar qualquer html arbitrária com base em informações de estado disponível no PHP. Esta técnica é apresentada abaixo.

Você vai ver no topo desta página são guias que por padrão neste tema são bastante simples. Eu queria modificá-los de tal forma que a guia selecionada no momento que se destacam mais. Claro, isso pode ser feito com apenas CSS, mas eu queria desenvolver esta técnica para os casos em CSS por si só não seria suficiente.

Abaixo está a JS que pode ser adicionado diretamente para o arquivo JS descrito anteriormente. Há uma função jQuery que opera sobre o elemento com id 'pelo menu principal links' cada vez que a página foi carregada e está pronto. Recebo o innerHTML e usar encodeURIComponent para convertê-lo para uma string segura que pode ser passado como um parâmetro de URL. Eu tinha que fazer isso porque uma das referências abas uma URL que passa um 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);
  });

A função jQuery acaba chamando loadXMLDoc que é onde o post AJAX ocorre especificando a URL que é capturado pelo hook_menu no módulo Drupal. Ele também usa uma função de retorno de chamada que é passado na cfunc parâmetro. Após o retorno, a resposta JSON é analisado para convertê-lo em HTML e este é armazenado diretamente para o innerHTML originais. Assim, qualquer que seja o módulo PHP fez ao HTML substitui o HTML original.

No lado do PHP há em primeiro lugar o elemento de matriz do hook_menu:

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

A função de retorno é então mostrado a seguir. Ele primeiros puxa o parâmetro bloco e carrega-lo em um objeto DOM para que ele possa ser analisado. O objeto simple_html_dom é fornecido pelo módulo simplehtmldom, que você vai precisar de instalar e ativar. Não se esqueça de instalar a biblioteca associada também. Isso deve acabar em /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));
   }
}

Finalmente, ele percorre os itens li adicionando um estilo CSS em linha que muda dependendo se a guia está ativo ou não. Em seguida, ele apenas cria uma string do objeto DOM e retorna-lo via drupal_json_output, que converte em formato JSON. Isto, obviamente, é recebido na função de retorno JS.