JavaScript

Element-Update mit JavaScript als Inhalt

Posted in JavaScript, Symfony Framework on July 19th, 2009 by admin – Be the first to comment

In Symfony haben wir ja eine sehr hilfreiche und dem entsprechend auch Helper genannte Kapselung von JavaScript Bibliotheken. So steht auch unter anderem Prototype zur Verfügung. Nur manchmal lässt sich die API-Dokumentation der Bibliotheken nicht direkt auf die in Symfony zur Verfügung stehenden Funktionen übertragen. Ein Beispiel ist der evalScripts Parameter. Für alle die jetzt zu faul sind weiter zu lesen und schon wissen was gemeint ist: In Symfony heißt der Parameter einfach nur script

Für alle die noch nicht Wissen wofür der Parameter gebraucht wird, kommt hier ien Beispiel:

Die Funktion remote_function() ist das Symfony-Interface zur AjaxUpdater-Funktion von Prototype, mit der wir ein DOM-Element unserer Seite mit neuem Inhalt befüllen können ohne die komplette Seite neu zu laden (ist ja auch der Sinn von AJAX-Funktionen xD).

Das ganze könnte dann beispielsweise in einem Template so aussehen:

  1. <?php use_helper(‘Javascript’) ?>
  2. <div id="dynamicContent"></div>
  3. <?php echo javascript_tag(
  4.    "function updateDynContent() {".remote_function(array(
  5.    ‘update’  => ‘dynamicContent’,
  6.    ‘url’     => ‘artikel/render’,
  7.  ))."}"
  8. ) ?>

Soweit so gut. Ein kleines Problem haben wir jetzt nur, wenn der Aufruf des Moduls/Action ‘artikel/render’ in seinem Template ein JavaScript hat. Beispielsweise durch die Funktion drop_receiving_element(), weil in dem DIV mit der ID dynamicContent ein Element sein soll, welches Drag-And-Drop fähig sein soll. Standartmäßig werden nämlich JavaScripts durch den Ajax.Updater gefiltert. Abschalten lässt sich das bei dieser Prototype-Funktion durch den Parameter evalScripts. Die Symfony-Funktion remote_function() akzeptiert diesen Parameter allerdings nicht, sondern wie am Anfang schon erwähnt den Parameter script. Um diesen Parameter und folglich dann ohne JavaScript-Filter sieht der Funktions-Aufruf aus dem Beispiel dann folgendermaßen aus:

  1. remote_function(array(
  2.    ‘update’  => ‘dynamicContent’,
  3.    ‘url’     => ‘artikel/render’,
  4.    ’script’ => ‘true’,
  5.  ))

Das wars schon =)

Mouseover-Effekte in Symfony

Posted in JavaScript, Symfony Framework on July 15th, 2009 by admin – Be the first to comment

Ich schreibe gerade an einer kleinen Anwendung in Symfony und wollte für das Frontend-Bearbeiten Edit-Buttons einbauen. Diese sollen aber nur sichtbar sein, wenn man mit der Maus über dem gesamten Feld ist das bearbeitet werden soll. Wie sich nach kurzer Recherche herausgestellt hat ist das ganze kein großes Hexenwerk:

Angenommen unsere View hat folgenden HTML-Code und wenn man mit der Maus über die DIV mit der ID box fährt soll edit angezeigt werden.

  1. <div id="box">
  2. Text Text Text Text Text Text Text
  3. Text Text Text Text Text Text Text  
  4. Text Text Text Text Text Text Text  
  5. <div id="edit" style="visibility: hidden">Edit</div>

Folgendes JavaScript sorgt nun fürr den gewünschten Effekt:

  1. <?php use_helper(‘Javascript’); ?>
  2. <?php echo javascript_tag("function hover() {
  3. document.getElementById(’edit’).style.visibility=’visible’;
  4. }
  5.  
  6. function out() {
  7. document.getElementById(’edit’).style.visibility=’hidden’;
  8. }
  9.  
  10. document.getElementById(’box’).observe(’mouseover’, hover);
  11. document.getElementById(’box’).observe(’mouseout’, out);"; ?>

Fertig :D

P.S.: Natürlich dürfte sich das auch ohne Symfony problemlos umsetzen lassen.