[jquery] jQuery anstelle von MooTools verwenden

**JanoschSkuplik** · 14.11.2010, 19:09

Hallo,

für ein aktuelles Projekt muss ich anstelle der MooTools-Dateien die aktuellen jQuery-Dateien einbinden. Um das ganze möglichst updatefreundlich zu machen, habe ich mir dazu eine kleine Erweiterung geschrieben.

zur Erweiterung im ER

Derzeit unterstützt sie die Auswahl der jQuery-Quelle anstatt oder zusätzlich zu der MooTools-Quelle im Seitenlayout.

Weitere Vorschläge, usw. sind natürlich gerne gesehen und können hier einfach gepostet werden.

EDIT: gerade (07.02.2011 - ca. 17.00 Uhr) habe ich die Version im ER auf die jQuery 1.5 upgedatet. Gleichzeitig habe ich die Zusatzfeatures (insbes. die Lightbox) in zwei Extra-Erweiterungen ausgelagert (http://www.contao.org/erweiterungsli....10009.de.html und http://www.contao.org/erweiterungsli....10009.de.html). Somit kann die Erweiterung jQuery nun auch von anderen Entwicklern, die nur die jQuery-Dateien benötigen, genutzt werden.

Gruß Janosch

***xchs*** · 14.11.2010, 20:12

Verwendest Du im Template der jQuery-Lightbox die MEDIABOX-Konstante aus der "constants.php", obwohl die beiden Versionsnummern ja nicht korrespondieren? Im Grunde genommen ist es ja auch egal, welche Nummer da steht, da dieser Parameter eh nur das Caching betrifft.

**JanoschSkuplik** · 14.11.2010, 20:15

Die Konstante war bei der ersten Version, glaube ich, noch drin. An sich habe ich sie nun aber erst einmal raus genommen.

Gruß Janosch

**Sebastian** · 14.11.2010, 21:22

HI

Hat es irgendeinen speziellen Grund, warum du ein system/modules/z_-Verzeichnis gewählt hast? Der Ladezeitpunkt deiner Erweiterung ist doch eigentlich unwichtig, Hauptsache nach „frontend“. Mir erscheint das reichlich unnötig.

Sebastian

**JanoschSkuplik** · 14.11.2010, 21:26

Da hast du natürlich Recht. Werde es nun auf das Verzeichnis "usejquery" ändern. Keine Ahnung, warum ich das "z" da mit drin gelassen habe.

Was spricht denn sonst gegen eine Verwendung des "z", außer, dass Erweiterungen, die das überschreiben wollen, dann ein "zz" nutzen müssten?

**BEEware** · 19.11.2010, 11:31

Was ist wenn man Mootools UND jQuery nutzen mag? Wäre es nicht sinnvoll ein eigenes Dropdown für die jQuery Auswahl zu erstellen?

**JanoschSkuplik** · 19.11.2010, 12:53

Zitat von BEEware

Was ist wenn man Mootools UND jQuery nutzen mag? Wäre es nicht sinnvoll ein eigenes Dropdown für die jQuery Auswahl zu erstellen?

Gute Idee - werde ich in das nächste Update mal mit einbauen.

Dann wären folgende Möglichkeiten mit drin:
1. jQuery anstatt MooTools verwenden
2. jQuery und MooTools verwenden (würde jQuery dann automatisch im noConflict-Modus ausführen)

**BEEware** · 23.11.2010, 10:21

Oder einfach ein Dropdown analog zu MooTools und eine Checkbox mit "jQuery-noConflict Modus aktivieren" oder so in der Art.

Außerdem sollte man auch "Keine Quelle" bei Mootools auswählen können. Ist ja letztens sogar so eine Extension rausgekommen.

**JanoschSkuplik** · 24.11.2010, 16:52

So, ich habe nun einmal die Version im ER aktualisiert. Nun kann man auswählen, ob ausschließlich jQuery oder jQuery und Mootools zusammen verwendet werden sollen. Außerdem wird nun jQuery 1.4.4 verwendet.

Falls jQuery und Mootools zusammen verwendet werden sollen, so ist es evtl. nötig einige der jQuery-Scripte im noConflict-Modus auszuführen.

Bei einem Update auf die aktuellste Version ist es nötig, die Einstellungen im Seitenlayout noch einmal vorzunehmen, da hier weitere Felder hinzugekommen sind.

Vielleicht möchte dies mal jemand testen und mir weitere Wünsche / Probleme mitteilen.

Gruß Janosch

**elion** · 25.11.2010, 21:31

Hallo zusammen

ich habe ein Problem mit jquery und http / https, das ich mir nicht erklären kann:

Auf meiner contao-Seite kann man normalerweise per http surfen. Nur Registrierung, Login und Passwortanfrage sollen per https erfolgen (backend natürlich vollständig).
Dazu habe ich mod_rewrite in der .htaccess aktiviert und folgende Rules definiert:

RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{REQUEST_URI} ^/login\.html$ [OR]
RewriteCond %{REQUEST_URI} ^/register\.html$ [OR]
RewriteCond %{REQUEST_URI} ^/lostpasswd\.html$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [L]

RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{REQUEST_URI} ^/contao/$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [L]

Soweit, so gut. Es funktioniert.

Dann wollte ich jquery in den Seiten einsetzen und habe die Erweiterung installiert.
Nachdem ich jquery im Seitenlayout aktiviert habe, funktioniert dieses auch, aber nur für https !

Wenn ich die Startseite per http aufrufe wird mootools eingebunden, die gleiche Seite per https aufgerufen verwendet jquery. (im Seitenquelltext zu sehen)

Jetzt bin ich ratlos. Kann mir jemand dabei weiterhelfen ?
Ist das ein Installationsproblem oder habe ich was falsch gemacht ?

Danke für Eure Hilfe

Ergänzung: habe soeben festgestellt, das es sich mit der Anzeige der News genau anders herum verhält: mit http geht es, mit https nicht. Ich fürchte das hängt zusammen.

**JanoschSkuplik** · 26.11.2010, 08:08

Zitat von elion

Dann wollte ich jquery in den Seiten einsetzen und habe die Erweiterung installiert.
Nachdem ich jquery im Seitenlayout aktiviert habe, funktioniert dieses auch, aber nur für https !
Wenn ich die Startseite per http aufrufe wird mootools eingebunden, die gleiche Seite per https aufgerufen verwendet jquery. (im Seitenquelltext zu sehen)
Jetzt bin ich ratlos. Kann mir jemand dabei weiterhelfen ?

Hallo,
ich bin leider nicht so der SSL-Profi. Allerdings kann ich bei mir die Seite mit https:// und nur mit http:// aufrufen und bekommen jedes Mal die von mir gewählten Skripte (also wenn ich kein jQuery wähle nur die Mootools-Sachen und anders herum).
Hast du für die unterschiedlichen Seiten evtl. unterschiedliche Seitenlayouts definiert?

***xchs*** · 26.11.2010, 08:27

Hallo elion,

ich finde, diese Bedingung

Code:

RewriteCond %{SERVER_PORT} !^443$

in Deiner ".htaccess" macht in diesem Kontext so keinen Sinn! Wenn das bei Dir trotzdem funktioniert, dann wohl nur aufgrund der OR-Flags...

**elion** · 26.11.2010, 22:38

@JanoschSkuplik: nein, ich habe nur ein default-layout und keine Layouts zugewiesen. Auch mit der Zuweisung des Layouts geht es nicht.

@xchs: die condition prüft lediglich, ob bereits per https (Port 443) kommuniziert wird. Dann braucht kein rewrite stattfinden. Auch mit "RewriteCond %{HTTPS} !=on" sieht es nicht anders aus.

Bisher also noch keine Lösung.
Danke trotzdem schon mal für die Mühen.

**elion** · 27.11.2010, 23:09

Zitat von elion

...
Bisher also noch keine Lösung.
....

Nachtrag:
Durch Ausschalten von "URLs umschreiben" funktioniert mit den News alles. Da bin ich also einen Schritt weiter.

Bei meinem jquery-Problem leider noch nicht.
Da alles bei einer frischen contao-Installation funktioniert, kann ich durch Vergleich folgendes ausschließen:

Die apache-config (http/https-Hostconfiguration) ist nicht schuld.
.htaccess auch nicht.
Die Dateien in beiden Verzeichnissen sind auch gleich (bis auf Zugangsdaten/keys in den configs und zwei zusätzliche Module bei der Music-Academy und ein paar Grafikdateien).

Damit muss es meiner Meinung nach also in der DB stecken.

Das wird ein Problem! Hat jemand eine Idee wo man da suchen kann?

**JanoschSkuplik** · 07.02.2011, 16:14

Nachdem auch der google-api-Service nun jQuery 1.5 zur Verfügung stellt, habe ich die Erweiterung dahingehend aktualisiert (jQuery im ER). Im Zuge der Aktualisierung wurden folgende Sachen ergänzt, geändert:

Lighbox-Funktionalität ist ausgelagert: jQuery-lightbox
zusätzliche Skripte wurden ausgelagert: jQuery-more

Somit stellt die jQuery-Erweiterung nur noch die aktuellen jQuery-Dateien zur Verfügung und kann besser von weiteren Erweiterungen, die "nur" die jQuery-Dateien benötigen, genutzt werden. Derzeit kann bei der Dateiquelle neben der lokalen Quelle, der Google-Api, auch die Microsoft-Api, oder die jQuery-eigene gewählt werden.

Feedback zu dieser Aktualisierung entweder in dieses Forum, oder in den Bugtracker http://contao-forge.de/projects/jquery

Gruß Janosch

**psren** · 07.02.2011, 16:19

Super, Danke!!

Dann kann ich ja loslegen :P

**JanoschSkuplik** · 07.02.2011, 16:20

Zitat von psren

Dann kann ich ja loslegen :P

Viel Spaß!

**physicaal** · 24.02.2011, 13:55

Hallo!!

Nur so n dumme frage!

Wie benutzt man das jquery_lightbox ??

Ich möchte ein inline Content anzeigen, die Art wie man diese Erweiterung nutze ist mir n rätsel!

Danke fürs Hilfe.

**JanoschSkuplik** · 24.02.2011, 17:57

Zitat von physicaal

Hallo!!

Nur so n dumme frage!

Wie benutzt man das jquery_lightbox ??

Ich möchte ein inline Content anzeigen, die Art wie man diese Erweiterung nutze ist mir n rätsel!

Danke fürs Hilfe.

Hallo,

theoretisch ist der Stand derzeit, dass das jquery_lightbox-Modul lediglich eine kleinere Alternative zur in Contao mitgelieferten Mediabox darstellt. Einstellungen für dieses Modul kannst du eigentlich nicht vornehmen, lediglich die üblichen Einstellungen in Artikeln die den Links das rel-Attribut mitgeben.
Das Einbinden von Inhaltselementen oder anderen Contentelementen als einfachen Bildern ist mit dieser lightbox-Variante nicht möglich. Hierfür müsstest du dann auf die Mootools-Variante zurückgreifen, oder eine andere jquery-lightbox einbinden, die Inline-Elelemente unterstützt.

Ich hoffe, dass das nun alles einigermaßen verständlich war.

Gruß Janosch

**jabadoo** · 14.05.2011, 18:06

Hallo!

Viele Dank für die tolle Erweiterung. Allerdings habe ich noch meine Probleme damit. Ich habe versucht, die Fancybox-Erweiterung zu installieren und neben MooTools zu betreiben. Leider ohne Erfolg bisher.

Deaktiviere ich MooTools, funktioniert die Fanybox-Erweiterung ohne Probleme, schalte ich MooTools dazu (auch mit Häkchen bei "moo_jquery_nc") dann wird die Fancybox nicht geladen, meine MooTools-Navigation funktioniert dann aber.

Muss ich noch weiteren Code hinzufügen oder etwas einstellen?
Ich würde mich über Hilfe freuen

Helena

**JanoschSkuplik** · 14.05.2011, 19:11

Hallo Helena,

ich werde mir dies mal angucken - vielleicht schaffe ich es noch heute.

Ich tippe mal darauf, dass die Erweiterung (nicht jQuery an sich) hier irgendwo aneckt.

Gruß Janosch

EDIT: in einer ganz "normalen" Installation konnte ich gerade ohne Probleme die fancybox zusammen mit einer MooTools-Navigation installieren und nutzen. Im Seitenlayout habe ich einfach den Haken bei jQuery-verwenden gemacht und anschließend ausgewählt, dass jQuery und MooTools geladen werden sollen. Weiter unten habe ich dann ausschließlich moo_jquery_fancybox ausgewählt. Anschließend lief alles wie gewünscht. Hast du evtl. einen Link, wo ich mir das ganze mit diesen Einstellungen einmal live ansehen könnte?

**jabadoo** · 15.05.2011, 00:17

Hallo Janosch.
Danke für deine Hilfe. Ich habe es mittlerweile zum Laufen bekommen, indem ich eine kleine Änderung im Template der Fancybox (moo_jquery_fancybox.tpl) vorgenommen habe.

Aus

Code:

$(document).ready(function() {...});

habe ich

Code:

jQuery(document).ready(function($){...});

gemacht.

Jetzt scheint es mit dem noConflicts-Mode zu klappen.

**MiStah** · 27.05.2011, 09:15

Zitat von JanoschSkuplik

Hallo,

EDIT: gerade (07.02.2011 - ca. 17.00 Uhr) habe ich die Version im ER auf die jQuery 1.5 upgedatet. Gleichzeitig habe ich die Zusatzfeatures (insbes. die Lightbox) in zwei Extra-Erweiterungen ausgelagert (http://www.contao.org/erweiterungsli....10009.de.html und http://www.contao.org/erweiterungsli....10009.de.html). Somit kann die Erweiterung jQuery nun auch von anderen Entwicklern, die nur die jQuery-Dateien benötigen, genutzt werden.

Gruß Janosch

Hallo Janosch,
da der IE9 offensichtlich nicht richtig mit jQuery 1.5 zusammenarbeitet, wäre es sinnvoll, aus der 1.5 eine 1.5.1 zu machen.
http://blogs.msdn.com/b/ie/archive/2...ports-ie9.aspx

Gut wäre es, wenn man im Backend irgenwo die Variable eingeben könnte - noch besser für jedes Projekt selbst.

Gruß Michael Stahmann

**JanoschSkuplik** · 27.05.2011, 11:22

Zitat von MiStah

Gut wäre es, wenn man im Backend irgenwo die Variable eingeben könnte - noch besser für jedes Projekt selbst.

Hey, gute Idee - werde ich mir am Wochenende mal anschauen.

Gruß Janosch

**JanoschSkuplik** · 29.05.2011, 19:25

Hallo zusammen!

Ich habe mir einmal die letzten Anmerkungen vorgenommen und in die aktuelle Version integriert. Nun ist es möglich, neben der Quelle der jQuery-Dateien auch die Version, die geladen werden soll, auszuwählen. (zur Erweiterung: http://www.contao.org/erweiterungsli...ew/jquery.html)

Noch ist die neue Version als alpha1 gekennzeichnet, da ich sie bisher noch nicht auf alle Eventualitäten testen konnte. Wenn sich aber einige Tester finden, bei denen die neue Version funktioniert, so wäre es super, wenn ihr hier kurz antworten könntet. Dann kann ich sie auch als stable kennzeichnen.

Danke und Gruß
Janosch

**lionel** · 02.06.2011, 07:16

Hallo

Diese neue Version funktioniert sehr gut.

**karo** · 28.06.2011, 11:53

hallo!

ich versuche mit jquery eine Fotogallery zu basteln
(diese: http://tympanus.net/codrops/2010/09/...tobar-gallery/ )

irgendwie klappt das nicht so ganz....
komm nicht ganz dahinter ob ich das alles richtig mache...

> hab die jquery-Extension installiert
> hab den javascript code in eine Datei moo_photobar.tpl geschrieben und in den ordner template upgeloadet.
> CSS in css
> HTML in Modul + im Layout dazugegeben.

im Layout:
> hakerl bei jQuery verwenden (+sonst alles wie es ist)
> hakerl bei moo-tool-templates: moo_photobar

mh leider passiert nix
(zu sehen auf http://riderpix.juicy-blue.com/comingsoon.html )

was mach ich falsch???
würd mi freuen wenn ihr mir auf die Sprünge helfen könntet
danke!

**karo** · 28.06.2011, 11:58

ahjjjj war mein fehler .. funktioniert doch.... hatte einen fehler mit der bildverlinkung (wie doof...) ... und jetzt gehts ..
sorry und danke

**JanoschSkuplik** · 04.08.2011, 18:11

Hallo zusammen,

gerade habe ich diese Erweiterung mal wieder ein bisschen angepasst: http://www.contao.org/erweiterungsli....10020.de.html

Im Großen und Ganzen habe ich nun zusätzlich jQuery 1.6.2 integriert und die Einbindung so gestaltet, dass sie auch mit Contao 2.10 kompatibel ist (html5-Alternative und Berücksichtigung der optionalen Plugins-Domain).

Wie immer würde ich mich über Feedback freuen, ob dies auch bei anderen so wie gewünscht funktioniert.

Danke!

Gruß Janosch

**skuhrt** · 20.08.2011, 07:47

Zitat von jabadoo

Hallo Janosch.
Danke für deine Hilfe. Ich habe es mittlerweile zum Laufen bekommen, indem ich eine kleine Änderung im Template der Fancybox (moo_jquery_fancybox.tpl) vorgenommen habe.

Aus

Code:

$(document).ready(function() {...});

habe ich

Code:

jQuery(document).ready(function($){...});

gemacht.

Jetzt scheint es mit dem noConflicts-Mode zu klappen.

Super, danke für den Tipp. Jetzt geht auch mein jquery Skript.

**dhe** · 07.09.2011, 16:40

Hi,
im ER ist der zu ersetzende Cronjob Eintrag glaub nicht komplett
Original:

Code:

new Request({
      url:'system/html/cron.txt',
      onComplete: function(txt) {
        if (!txt) txt = 0;
        if (parseInt(txt) < (Date.now()/1000 - 300)) {
          new Request({url:'cron.php'}).get();
        }
      }
    }).get();

Bei Einsatz von jQuery zu verwenden

Code:

$.get('system/html/cron.txt',function(txt){if(!txt)txt=0;if(parseInt(txt)

Da fehlt doch was oder? Kann jemand einen vollständigen Aufruf kurz posten bzw auf der ER Seite richtig stellen?

Gruß

***xchs*** · 07.09.2011, 16:52

http://www.contao-community.de/showt...l=1#post150097

**dhe** · 07.09.2011, 17:00

Hm, wenn ich den MooTools Code in jQuery übersetze, müßte es glaub so aussehen oder?

HTML-Code:

$.get('system/html/cron.txt',function(txt){
	if(!txt)txt=0;
	if( parseInt(txt) < (Date.now()/1000 - 300)) {
		$.get('cron.php');
	}
});

EDIT: Zuerst sollte man das Browser Fenster neu laden, bevor man postet

Dank an xchs

**JanoschSkuplik** · 07.09.2011, 17:14

Ja, irgendwie scheint das ER da immer den Code abzuschneiden. Hier nun noch einmal der, der da eigentlich stehen soll (wobei xchs ihn ja schon passend verlinkt hat):

Code:

$.get('system/html/cron.txt',function(txt){if(!txt)txt=0;if(parseInt(txt)<(jQuery.now()/1000 - 300)){$.get('cron.php')}});

Werde vom ER nun direkt hier hin verlinken.

Gruß Janosch

**Wolf Larsen** · 14.09.2011, 03:28

Servus Zusammen,

auch ich habe mit der Erweiterung mootools und jquery verheiraten können. Ich möchte neben einem Mootools-Slider einen jquery-Background-Stretcher verwenden. Dank des Codes von jabadoo aus Beitrag 22 wird der Stretcher unter jquery 1.5.2 schon mal angezeigt - alleine die Funktion einen Hintergrund zu wechseln haut nicht hin wenn der noconflict-Mode an ist. Mit ausgeschalteten NC-Mode klappt der Wechsel, aber eben mein Slider nicht. Wie kann man es denn hinbekommen, beim Stretcher auch noch den Wechsel-Modus zu aktivieren? Muss man in das Script, was den bgstretcher.js hinzufügt oder direkt in das bgstretcher.js?

Dankeschön!
Wolf

**folkfreund** · 07.11.2011, 22:24

Hallo,
ich möchte gerne ein externes Script zur Anzeige von Noten (abcjs) auf einer Contao-Seite (2.10.2) nutzen, die auch Mootools verwendet (Mediabox).

EDIT: das ist wohl eher was für einen eigenen Thread.

Habs verschoben,
folkfreund

**sfx** · 16.11.2011, 22:23

Zitat von Wolf Larsen

Servus Zusammen,

auch ich habe mit der Erweiterung mootools und jquery verheiraten können. Ich möchte neben einem Mootools-Slider einen jquery-Background-Stretcher verwenden. Dank des Codes von jabadoo aus Beitrag 22 wird der Stretcher unter jquery 1.5.2 schon mal angezeigt - alleine die Funktion einen Hintergrund zu wechseln haut nicht hin wenn der noconflict-Mode an ist. Mit ausgeschalteten NC-Mode klappt der Wechsel, aber eben mein Slider nicht. Wie kann man es denn hinbekommen, beim Stretcher auch noch den Wechsel-Modus zu aktivieren? Muss man in das Script, was den bgstretcher.js hinzufügt oder direkt in das bgstretcher.js?

Dankeschön!
Wolf

habe leider auch das problem mit dem BG stretcher und "newsticker" oder "newsslide"... sobald jquery_nc an ist.. geht der BG strethcer nichtmehr :-(

**wiese** · 27.11.2011, 11:11

Spricht was dagegen die Erweiterung auf jQuery 1.7.1 zu aktualisieren?

**Vollpfosten** · 27.11.2011, 11:40

Hab es mit Handarbeit gemacht, einfach die usejquery/config.php ändern:

Code:

$GLOBALS['TL_JQUERY_VERSION'] = array(
   '1.7.1' => array(
    'jquery_local' => 'plugins/jquery/js/jquery-1.7.1.min.js',
    'jquery_jquery' => 'http://code.jquery.com/jquery-1.7.1.min.js',
    'jquery_googleapis' => 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
    'jquery_microsoft' => 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js'
  ),
  '1.6.2' => array(
    'jquery_local' => 'plugins/jquery/js/jquery-1.6.2.min.js',
    'jquery_jquery' => 'http://code.jquery.com/jquery-1.6.2.min.js',
    'jquery_googleapis' => 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js',
    'jquery_microsoft' => 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js'
  ),
''
''
''

Wer die lokale Version benutzt, muss diese natürlich noch downloaden und im entsprechendem Ordner ablegen