{"id":60,"date":"2010-02-05T16:35:49","date_gmt":"2010-02-05T16:35:49","guid":{"rendered":"http:\/\/localhost\/wordpress\/?p=60"},"modified":"2010-06-03T13:04:18","modified_gmt":"2010-06-03T13:04:18","slug":"jquery-und-ajax","status":"publish","type":"post","link":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=60","title":{"rendered":"JQuery und AJAX"},"content":{"rendered":"

JQuery <\/strong>hat es erheblich vereinfacht, an zentraler Stelle Event Handler f\u00fcr diverse Ereignisse<\/strong> zu erstellen. Wenn man mit AJAX <\/strong>arbeitet, wird man aber rasch dar\u00fcber stolpern, dass ein Handler wie $(‘#meineId’).click(… nicht funktioniert, wenn das Element mit der Id meineId mit AJAX erst nachtr\u00e4glich generiert<\/strong> wird und deshalb beim ersten Laden noch gar nicht existiert.<\/p>\n

Seit JQuery Version 1.3 kann man statt .click nun das Event Handler Attachment .live(even type, handler)<\/a><\/strong> benutzen. Live reagiert auf alle Elemente, auch auf solche, die erst in Zukunft dynamisch zu einer Seite hinzugef\u00fcgt werden, sei es durch AJAX requests oder sei es durch JavaScript.<\/p>\n

Das folgende Beispiel zeigt die Kombination von JQuery’s .live mit AJAX. F\u00fcr die serverseitige Programmierung verwende ich Grails <\/strong>in der Version 1.1.1<\/strong> und JQuery <\/strong>in der Version 1.3.2<\/strong>. Die L\u00f6sung besteht aus zwei Teilen: Erstens der Webseite mit dem JQuery-Event-Handler und dem AJAX-Aufruf und zweitens dem serverseitigen Handler f\u00fcr den AJAX-Aufruf.<\/p>\n

Die Aufgabenstellung <\/strong>ist denkbar einfach: Ein Klick auf einen Link macht einen AJAX-Call. Dieser h\u00e4ngt einen neuen Link an das Dokument. Bei einem Klick auf diesen neuen, dynamisch erzeugten Link wird der JQuery-Event-Handler aktiviert. Er liest die zuf\u00e4llig erzeugte Zahl aus, die dem Link als Parameter mitgegeben wurde.<\/p>\n

Schauen wir uns zuerst die Webseite an:<\/p>\n

<%@ page contentType=\"text\/html;charset=UTF-8\" %>\r\n\r\n<html>\r\n  <head>\r\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n    <meta name=\"layout\" content=\"main\" \/>\r\n    <!-- 1. JQuery library import -->\r\n    <g:javascript library=\"jquery\"\/>\r\n<\/strong>    <title>AJAX and event handler attachment with live<\/title>\r\n    <style type=\"text\/css\">\r\n    <\/style>\r\n    <script language=\"JavaScript\">\r\n      <!--\r\n      $(document).ready(function() {\r\n\r\n        \/\/ 2. dynamic click handler for content generated later by AJAX\r\n        $(\".dynamiclink\").live('click', function() <\/span>{\r\n          var url = $(this).attr('href');\r\n          var position = url.lastIndexOf(\"=\");\r\n          var zahl = url.substr(position + 1);\r\n          $(this).attr('href', 'javascript: void(0)');\r\n\r\n          alert(\"Parameter zahl: \" + zahl);\r\n<\/strong>        });\r\n      });\r\n\r\n      \/\/-->\r\n    <\/script>\r\n  <\/head>\r\n\r\n  <body>\r\n    <div class=\"body\">\r\n      <h1>${title} - ${subtitle}<\/h1>\r\n\r\n      <p id=\"ajaxlinks\" class=\"ajaxlinks\">\r\n        <!-- 3. grails handler for AJAX call -->\r\n        <a id=\"link1\" href=\"javascript: void(0)\"\r\n          onclick=\"${remoteFunction(action:'remoteHtmlAjax_and_live',\r\n            update:'content<\/span>')}\"><\/strong>\r\n          Update screen\r\n        <\/a><br\/>\r\n      <\/p>\r\n      <!-- 4. div element as container for the generated link -->\r\n      <div id=\"content<\/span>\">\r\n      <\/div><\/strong>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
Hier steckt die L\u00f6sung in den 4 fett markierten Teilen:<\/p>\n
    \n
  1. Import der JQuery Library\u00a0 (mindestens Version 1.3)<\/li>\n
  2. JQuery-Event-Handler f\u00fcr das Click-Event auf allen dynamisch generierten Elementen mit der Klasse “dynamiclink”: Wichtig ist hier, dass .click durch .live(‘click’, … <\/strong>ersetzt wird. Nur so reagiert der Handler auch auf Elemente, die erst nach dem Laden der Seite entstehen.<\/li>\n
  3. serverseitiger Grails-Befehl f\u00fcr die Erzeugung des Links mit dem AJAX-Aufruf: Der neu erzeugte Inhalt wird im <div>-Tag mit der id content angezeigt.<\/li>\n
  4. Container-Element, in das der dynamisch erzeugte Link eingef\u00fcgt wird<\/li>\n<\/ol>\n
    Lassen Sie sich nicht dadurch verwirren, dass das $-Zeichen <\/strong>hier zwei verschiedene Bedeutungen hat.<\/p>\n