Thema: jQuery und motools

Hat jemand einen Tipp?

Fraglich, ob es mehr als ein Tipp ist: aus der Erinnerung weiss ich dass 1. glaube ich im noConflict-Mode vor alle Anweisungen für jQuery ein "jQuery" statt einem "$" geschrieben werden sollte und 2. dass ich manchmal Scripte nur zum laufen gebracht habe wenn ich zwar die jQuery- und gegebenenfalls Plugin-Dateien im Header, die eigentlichen einzelnen Funktionsaufrufe allerdings am Ende der Seite untergebracht hab (was man ja eigentlich nicht machen sollte, deshalb versuche ich in der Regel die Mischung aus jQuery und Mootools zu vermeiden).

Hi,

man sollte es vermeiden alle $ in jQuery umzuschreiben es wird auf jedenfall zu Problemen mit Plugins kommen. Es ist im Grunde genommen ganz einfach (ich gehe jetzt nicht darauf ein wie man ein Javascript einbindet... das ist html basis wissen).

1.) jQuery laden (egal ob lokal oder von google)
2.) direkt nach dem Laden einfach einmal jQuery.noConflict(); ausführen.
3.) Scripte welche für jQuery sind "Kapseln"!

Code:

(function($) {
  // hier kommt nun alles rein was für jQuery gedacht ist...
  // ein umschreiben von $ in jQuery ist nun nicht mehr notwendig...
})(jQuery);

Nach etwas rumprobieren bin ich zu ein paar neuen Erkenntnissen gelangt:

Siehe auch hier Joomla Header modifizieren - Script einbinden

Ich habe nun schonmal den noConflict-Mode zum laufen gebracht mit folgenden Code:

Code:

   if (typeof jQueryLoading == "undefined" || !jQueryLoading)
   {
      jQueryLoading = true;
      google.load("jquery", "1.3.1");

      google.setOnLoadCallback(function()
      {
         jQuery.noConflict();
 
         [MEIN CODE]

	});
}

Jedoch habe ich nun folgende Probleme:

Lade ich erst mootools und danach jquery, dann geht mein jquery script aber nicht meine plugins welche mootools nutzen. Außerdem sehe ich im firebug gleich fehler meldungen von mootools funktionen (is not a function...).


Lade ich erst jquery + mein jquery script und danach mootools dann erscheint im firebug zunächst keine Fehlermeldung und mein script ist ordentlich geladen und das mootools plugin ist auch initial richtig geladen, klicke ich dieses jedoch dann an kommt die Meldung $ is not a function.

So langsam zweifel ich daran, ob es überhaupt einen Weg gibt beide frameworks simultan fehlerfrei zum laufen zu bringen.


@blackice2999

3. Scripte welche für jQuery sind "Kapseln"!

Code:

(function($) {
  // hier kommt nun alles rein was für jQuery gedacht ist...
  // ein umschreiben von $ in jQuery ist nun nicht mehr notwendig...
})(jQuery);

Diese Variante klingt interessant, jedoch weiss grad nicht so recht wie ich den Beispiel-Code einbinden soll. Könntest du mir noch ein etwas konkreteres Beispiel hierfür geben? Vielen Dank!

[EDIT]
@blackice2999
Wenn ich das richtig verstehe meinst du es so:

HTML-Code:

 <script src="https://www.google.com/jsapi?key=[meinKey]" type="text/javascript"></script>  
<script type="text/javascript">
	  google.load("jquery", "1.3.1");
      google.setOnLoadCallback(function()
      {
         jQuery.noConflict();
  });
  </script>  
  <script type="text/javascript" src="http://meineseite.de/mein_jquery_script.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
 <script type="text/javascript" src="/media/system/js/mootools_scripte.js"></script>

Inhalt meines jQuery Scripts:

Code:

(function($) {

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{   

[Mein Code]

});
})(jQuery);

Mit diesem Code wird die Seite richtig und ohne Fehler geladen! Mein jQuery Script funktioniert auch! Das Plugin welches motools nutzt wird auch initial richtig aufgebaut aber wenn man in dieses klickt erscheint die Meldung "$ is not a function".

Vorrausgesetzt ich habe die von Dir gemeinte Syntax richtig interpretiert?

Also google.setOnLoadCallback triggert erst beim document onLoad event und der kommt viel zu spät für den Aufruf von jquery.noConflict().
Für den Aufruf einer Funktion direkt nach dem laden der jquery gibts in der google.load() doku die optionen, in denen man einen callback angeben kann.
Also versuch stattdessen mal:

Code:

function setJqueryNoConflict() {jquery.noConflict();}
google.load('jquery','1.3.1',{callback: setJqueryNoConflict});

Un am Besten setzt Du mal im firebug mal breakpoints auf den Aufruf von noConflict und auf die 1. Zeile der mootools, damit Du sehen kannst was zuerst kommt. Der noconflict Aufruf muss auf jeden Fall vorher kommen damit er Wirkung hat.