Genial einfach: Blöcke, Nodes und Views mit AJAX und jQuery laden

<

p>Eigentlich wollte ich etwas zu den Modulen Flag und Rules schreiben.

Während der dazugehörigen Recherche bin ich aber auf das Modul http://drupal.org/project/component gestoßen. Und deshalb schreibe ich jetzt was zu diesem interessanten Modul.

Component ist ein kleines Utility-Modul, mit dem es sehr einfach möglich ist einen Block, eine View oder einen Node, irgendwo auszugeben. Ich weiß, dass es zu diesem Zweck auch andere Möglichkeiten oder Module gibt. Component macht es aber wirklich sehr einfach.

Zum Ausprobieren der folgenden Beispiele legen Sie in Ihrem Theme eine script.js mit dem jeweiligen Code an. Einmal den Cache der Theme-Registry leeren und los gehts.

In einem Node brauchen Sie noch einen div mit der id “wrapper” und einen Link mit der id, welche im zugehörigen jQuery benutzt wird.

Beispiel um einen Block auszugeben:

  //Block ausgeben
  print component_get_block('block',3,'Extra Block');
  //der erste Parameter ist das Modul, welches den Block generiert
  //der zweite Parameter ist die Nummer (delta) des Blocks
  //der dritte Parameter ist ein neuer Titel für den Block

Die Funktionen für Nodes und Views sind component_get_node(nid) und component_get_view(‘name der view’, ‘display’).

Das alleine ist schon toll, richtig interessant wird das Modul aber in Verbindung mit jQuery. Die jQuery Funktion load() lädt per AJAX eine Datei vom Server.

Einfaches Beispiel:

$(document).ready(function(){
    $('#block').click(function(){
        
      $('#wrapper').load('/info.php');
        
      return false;
    });

});

Einfaches Beispiel mit dem Component Modul:

$(document).ready(function(){
    $('#block').click(function(){
        
      $('#wrapper').load('/component/block/block/3');
        
      return false;
    });
});

Jetzt kann man sich sehr einfach mit echten Drupal Daten mit den Vielfältigen Möglichkeiten von jQuery vertraut machen:

Komplexeres Beispiel:

$(document).ready(function(){
    $('#block').click(function(){
        
            $('#wrapper').slideUp('slow').load('/component/block/block/3', function() {
              $(this).slideDown('slow');
            });
        
        return false;
    });
    
    $('#node').click(function(){
        
            $('#wrapper').slideUp('slow').load('/component/node/15', function() {
              $(this).slideDown('slow');
            });
           
       return false;
    });
    
    $('#view').click(function(){
        
            $('#wrapper').slideUp('slow').load('/component/view/top_project', function() {
              $(this).slideDown('slow');
            });
            
        return false;
    });
    
});

Viel Spaß mit jQuery, AJAX und Drupal. Und der eigentlich vorgesehene Beitrag zum Thema Flag und Rules folgt bald.