Drupal - Ajax | wedi

You are here

Drupal - Ajax

----------------------------------------------------
I             Drupal-AJAX                          I
----------------------------------------------------
 
  - jQuery (JavaScript Library)
 
    Abfrage und Manipulation von DOM Strukturen.
    DOM ... Document Object Modul
 
    HTML Seite:
        <div class="content">
            <div id="something">
                asdf
            </div>
            <div id="something2">
                qwert
            </div>
        </div>
 
    JS (<modulename>.js):
        // prueft ob JS mit geforderten Libraries installiert ist
        if (Drupal.jsEnabled)
        {
            $(document).ready(
 
                $("#something").after("<a>...</a>");
            );
        }
 
        // Hinzufuegen eines Ready-Funktionshandlers
        // -> Funktion wird ausgefuehrt wenn Dokument
        //    (HTML Datei) fertig geladen ist
        // jQuery Abfrage ($("") steht fuer jQuery(""))
        // suchen des "something"-Objektes
        // Einfuegen am Ende    .after  ... danach
        //                      .before ... bevor
        //                      .html   ... innerhalb einfuegen
 
    JS einfuegen:
        function theme_<themename>($content)
        {
            ...
            drupal_add_js($module_path . '<modulename>.js');
            ...
        }
 
  - AJAX / JSON Service
 
    AJAX ... Asynchronouse JavaScript and XML
    JSON ... JavaScript Over the Network (aehnlich XML,
             andere Formatierung, damit mit JS leichter zu parsen)
 
    JSON-Nachricht generieren
      - Funktion fuer JSON Generierung
          function returnSpecificJSON()
          {
              drupal_set_header('Content-Type: text/plain; charset: utf-8');
              printf('{"object":{"value1":"%s","value2":"%s"}}',$var1,$var2);
          }
 
      - Funktion zu einer URL mappen
          function <modulename>_menu()
          {
              $items['name'] = array(
                  'title' => t('asdf AJAX Gateway'),
                  'page callback' => 'returnSpecificJSON',
                  'access arguments' => array('access content'),
                  'type' => MENU_CALLBACK,
              );
 
              return $item;
          }
 
      - PHP Settings to JS
          $opts = array('absolute' => TRUE);
          $json_url = url('name', $opts);
          drupal_add_js(array('<modulename>' =>
              array("json_url" => $json_url)), 'settings');
 
      - JS um JSON-Objekt zu empfangen (innerhalb <modulename>.js)
          var <modulename> = {};              // fuer Namespace
          <modulename>.getJSONObj = function()
          {
              $.get(Drupal.settings.<modulename>.json_url, function(data){
                  res = Drupal.parseJson(data);
                  if (!res.status || res.status == 0)
                  {
                      $("something").text(res.object.value);
                  }
              });
          }
 
      - Hinzufuegen eines Event Handlers
          $("#something").after("<a>...</a>")
          .next().click(<modulename>.getJSONObj);
             I      I
             I      I--- Click-Event-Handler registrieren
             I
             I---------- nach div-Objekt, damit naechstes Objekt
                         ausgewaehlt wird (<a>)