Thema: eigene Komponente und jQuery... jQuery findet funktion nicht?

Hallo,

ich bin gerade dabei eine eigene Komponente für Joomla zu schreiben.
Ich frage Daten aus einer Datenbank ab und gebe sie in verschiedenen divs und class tags wieder.

Nun möchte ich aber noch mit jQuery weitere Funktionen hinzufügen.
Um jQuery zu integrieren habe ich folgendes gemacht:

In der index.php meines templates habe ich das hinzugefügt:

PHP-Code:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); 
$document = &JFactory::getDocument();
//von mir hinzugefügt
$document->addScript('media/system/js/jquery.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );
?>

Nun sollte ja jQuery auf jeder Seite die das Template benutzt jQuery geladen werden.
Das klappt auch, habe es mit Firebug überprüft.

in meiner .php Datei der Komponente habe ich nun folgenden Code:

Code:

jQuery(document).ready(function() {
  function hideBox(){
	jQuery(".box").hide();
  }
});

Ich habe das $ gegen jQuery getauscht, da ich gelesen habe dass es Probleme geben kann da MooTools auch das $ verwendet.
Wenn ich die Funktion direkt danach aufrufe, klappt noch alles wunderbar:

Code:

jQuery(document).ready(function() {
  function hideBox(){
	jQuery(".box").hide();
  }

hideBox();
});

Wenn ich aber dann im Code der Komponente zb. einem Link einen Click Handler zuweisen möchte findet er die Funktion nicht:

Code:

<a href="javascript:hideBox()">hide Box<a/>

Fehler:

Code:

Uncaught ReferenceError: hideBox is not defined
(anonymous function)

Ich verstehe nicht wieso die Funktion anonym sein soll, ich habe sie doch oben definiert?
Allerdings muss ich dazu sagen dass das meine erste Komponente ist.

Gibt es da Besonderheiten bei der Verwendung von jQuery in Joomla?
Ich bin für jede Hilfe dankbar!

Grüße,
Kodak

Hallo,
deine Funktion hideBox kannst Du aus dem document.ready entfernen, dann sollte es funktionieren.

Zudem solltest Du Dein Event-Handler umschreiben.

Dein Html:

PHP-Code:

<a href="#" class="hideLink">hide it</a>
<div id="box">das ist meine box</a> 


Dein JavaScript:

PHP-Code:

jQuery(document).ready(function() {
    $('.hideLink').on('click',hideBox);
});

function hideBox(){
    jQuery(".box").hide();
} 


Ich habe Dir hier ein Fiddle zusammengestellt auf die Schnelle. http://jsfiddle.net/8ArsS/1/

Ein wichtiger Aspekt noch. Du solltest JavaScript nicht dazu nutzen, nach dem fertigen Laden (document.ready) Elemente darzustellen. Das führt zum FUBC (flash of un-behaviored content). Bedeutet, deine Box wäre sichtbar im Ladevorgang der Seite und bei am Ende des Ladevorganges würde die Box verschwinden, könnte bei der Darstellung zu einem Sprung führen. Die Lösung ist in deinem Beispiel recht einfach: definiere die Eigenschaft Deiner Box per CSS, und ändere Sie dann zur Laufzeit per JavaScript.

Und noch ein Performance Tip. Wenn du mehr als nur hide() benutzten möchtest, wirst Du wahrscheinlich auf die Funktion css() stossen, das ist allerdings recht unperformant. Benutzte statt dessen lieber addClass() und removeClass().

Vorsicht, der "on" Befehl in meinem Beispiel gibt es erst seit jQuery1.7. Vorher wurde / wird "bind" genutzt.

PS: Vielleicht sollte man ordentlich helfen statt *andenkopffass*

Wer surft denn noch ohne JavaScript?
http://www.webhits.de/deutsch/index.shtml?webstats.html

Da Webseiten so gestaltet werden sollten, das schon zu Ladezeiten der User sich orientieren kann, und in dem genannten Fall wieder verschwinden können, spricht für MEIN EMPFINDEN eher als schlechtes UX. Aber da hat wohl dann doch jeder eine andere Meinung.

Nimmt man es in Kauf, das es "springt" oder nicht, das sollte dann dem Entwickler selber überlassen.

Das aktivieren von JavaScript kann man zum Surfen im Internet schon voraussetzen. Das entnimmt man ja auch aus der Statistik 100% (von 10300 Usern).