كيفية جعل اياكس دعوة من النداء دروبال

Question

أنا جديد في Drupal واستخدام Drupal6 .. لدي وحدة تحرير مجموعة من تفاصيل الموظفين من قاعدة البيانات بناء على حقول الإدخال. يتصل زر إرسال وظيفة جافا سكريبت في 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

أحتاج إلى عرض النتائج في نفس الصفحة. كيف يجب تعديل دعوة النداء للقيام بذلك؟

Answer 1

يجب أن تجعل حياتك أسهل باستخدام وظائف الأداة المساعدة JQuery عند القيام بطلبات AJAX بدلا من القيام بها "بنفسك". يتم تضمين مكتبة JQuery في Drupal Core (على الأقل ل Drupal 6). أما بالنسبة للوثائق، فيمكنك أن تبدأ هذا المنشور على Ajax في Drupal باستخدام JQuery.

Answer 2

فعلت مدونة حول هذا الموضوع JS مع ajax و php ولصقها أدناه.

JS مع ajax و php

لدى Drupal دعما واسعا ل JS و AJAX كجزء من نماذجها القياسية وهناك برامج تعليمية شرح كيف يعمل هذا. ومع ذلك، لم أستطع العثور على برنامج تعليمي جيد لشرح كيف يمكن ل JavaScript التواصل مع وحدة Drupal بطريقة مخصصة. على سبيل المثال، أردت أن أكون قادرا على تعديل أي HTML التعسفي بناء على معلومات الحالة المتوفرة في PHP. يتم تقديم هذه التقنية أدناه.

سترى في الجزء العلوي من هذه الصفحة هي علامات تبويب ذلك بشكل افتراضي في هذا الموضوع سهل إلى حد ما. أردت تعديلها بحيث ستظهر علامة التبويب المحددة حاليا أكثر. بالطبع، يمكن القيام بذلك مع CSS فقط ولكنني أردت تطوير هذه التقنية للحالات التي لن تكون فيها CSS وحدها كافية.

أدناه هي JS التي يمكن إضافتها مباشرة إلى ملف JS الموضح سابقا. هناك وظيفة مسج تعمل على العنصر مع معرف "روابط القائمة الرئيسية" في كل مرة تم تحميل الصفحة وهي جاهزة. أحصل على Innerhtml واستخدم EnloDeuricomomponent لتحويله إلى سلسلة آمنة يمكن تمريرها كمعلمة 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 تحديد عنوان URL الذي يتم التقاطه بواسطة Hook_Menu في وحدة Drupal. يستخدم أيضا وظيفة رد الاتصال التي يتم تمريرها في المعلمة 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,
  );

ثم تظهر وظيفة معاودة الاتصال أدناه. يقوم أولا بسحب معلمة Block ويحملها في كائن DOM بحيث يمكن تحليلها. يتم توفير كائن Simple_html_dom بواسطة الوحدة النمطية Simplehtmldom، التي ستحتاج إلى تثبيتها وتمكينها. لا تنس تثبيت المكتبة المرتبطة أيضا. يجب أن ينتهي هذا في النهاية /ال/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.