【问题标题】:How to make ajax call from drupal pager如何从drupal寻呼机进行ajax调用
【发布时间】:2009-12-03 07:22:24
【问题描述】:

我是drupal 的新手并使用drupal6.. 我有一个模块,它根据输入字段从数据库中获取一组员工详细信息。提交按钮调用JavaScript 函数 >emp.js 生成 ajax 调用的文件

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

当我尝试使用寻呼机时,它直接如下调用并显示在新页面中。

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

我需要在同一页面中显示结果。应该如何修改寻呼机调用来做到这一点?

【问题讨论】:

    标签: ajax drupal pager


    【解决方案1】:

    您应该在执行 AJAX 请求时使用 jquery 实用程序函数,而不是“自己”执行它们,从而让您的生活更轻松。 jquery 库包含在 Drupal 核心中(至少对于 Drupal 6)。至于文档,你可以从this post on Ajax in Drupal using jQuery开始。

    【讨论】:

      【解决方案2】:

      我写了一篇关于这个主题的博客 JS with AJAX and PHP 并将其粘贴在下面。

      带有 AJAX 和 PHP 的 JS

      Drupal 对 JS 和 AJAX 作为其标准表单的一部分提供了广泛的支持,并且有一些教程解释了它是如何工作的。但是,我找不到一个很好的教程来解释 Javascript 如何以 ad-hoc 方式与 Drupal 模块通信。例如,我希望能够根据 PHP 中可用的状态信息修改任意 html。下面介绍了这种技术。

      您将在此页面顶部看到默认情况下此主题中的选项卡相当简单。我想修改它们,使当前选择的选项卡更加突出。当然,这可以仅使用 CSS 来完成,但我想开发这种技术以用于仅使用 CSS 还不够的情况。

      下面是可以直接添加到前面介绍的JS文件中的JS。每次页面加载并准备就绪时,都有一个 jQuery 函数对 id 为“main-menu-links”的元素进行操作。我得到了 innerHTML 并使用 encodeURIComponent 将其转换为可以作为 URL 参数传递的安全字符串。我必须这样做,因为其中一个选项卡引用了一个传递参数的 URL。

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

      jQuery 函数最终调用 loadXMLDoc,这是 AJAX 发布的地方,指定由 Drupal 模块中的 hook_menu 捕获的 URL。它还使用在参数 cfunc 中传递的回调函数。返回后,解析 JSON 响应以将其转换为 HTML,并将其直接存储回原始的 innerHTML。因此,无论 PHP 模块对 HTML 做什么,都会替换原来的 HTML。

      在 PHP 端,首先是 hook_menu 的数组元素:

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

      回调函数如下所示。它首先拉出块参数,并将其加载到一个 DOM 对象中,以便对其进行解析。 simple_html_dom 对象由 simplehtmldom 模块提供,您需要安装和启用该模块。不要忘记安装相关的库。这应该以 /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));
         }
      }
      

      最后,它循环遍历 li 项,添加一个内联 CSS 样式,该样式会根据选项卡是否处于活动状态而变化。然后它只是从 DOM 对象创建一个字符串并通过 drupal_json_output 返回它,然后将其转换为 JSON 格式。这当然是在 JS 回调函数中接收到的。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-08-18
        • 1970-01-01
        • 2014-01-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多