Javascript: Mootools en Jquery op dezelfde pagina

[RobTweaks]

Hallo scripters/programmeurs van T.net,

Sinds kort zit ik met een Javascriptprobleem dat ik maar niet opgelost krijg. Op de site waar ik momenteel aan werk is een effect toegevoegd met behulp van het mootools javascript framework. Nu probeer ik met behulp van de Jquery javascript library een slideinpanel toe te voegen.

Als ik de Jquery slide toevoeg aan de code, dan breekt de code van het mootools-effect.

Ik weet dat beide frameworks gebruik maken van het $-teken en dat daar het probleem ligt. Ook weet ik dat ik gebruik kan maken van de functie jQuery.noConflict();

Dit heb ik dan ook geprobeerd. Helaas tot nu toe zonder positief resultaat. Ik weet zeker dat ik maar een kleine fout maak of iets over het hoofd zie. Ik hoop dat iemand even met me mee kan kijken.

In de header staan de volgende scripts gedefinieerd:

HTML: header.inc

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="mootools.js"></script>

De code van de slide-in is als volgt:

JavaScript: slide.js

     <script type="text/javascript">
          $(document).ready(function() {
               var feed = $("#feedback"),
                    img = feed.children("img"),
                    formElems = feed.children("form, h2");
               
               feed.css("display", "block").data("showing", false);
               formElems.hide();
               
               img.click(function() {
                    if(feed.data("showing") == true) {
                         feed.data("showing", false)
                              .animate({
                                   marginLeft: "-300px",
                                   height: "120px",
                                   padding: "0"
                              });
                         formElems.fadeOut("normal");
                         $(this).attr("src", "feedback.png").css("top", "0px");
                    } else {
                         feed.data("showing", true)
                              .animate({
                                   marginLeft: "0",
                                   height: "280px",
                                   padding: "0px"
                              });
                         formElems.fadeIn("normal");
                         $(this).attr("src", "hide.png").css("top", "50px");
                    }
               })
          }); 
     </script>

Mijn vraag is natuurlijk: Hoe werkt de jQuery.noConflict(); op een juiste manier?

Alvast mijn hartelijke dank voor de hulp!

Rob

[ Voor 1% gewijzigd door RobTweaks op 13-03-2011 18:32 . Reden: Kleine wijziging in de code ]

[CodeCaster]

Eerste hit op [google=jQuery.noConflict]:

quote: http://api.jquery.com/jQuery.noConflict/

JavaScript:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

[ Voor 10% gewijzigd door CodeCaster op 13-03-2011 18:32 ]

[RobTweaks]

Dag CodeCaster, bedankt voor de hulp. Ik heb zelf ook al gekeken naar de .noConflict() functie, zoals te lezen in mijn eerste bericht. Volgens mij heb ik de functie nog niet helemaal begrepen.

Moet ik:

JavaScript: code.js

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

Voor ieder stuk javascript dat gebruik maakt van een andere library gebruiken?

Alvast bedankt.

[ Voor 1% gewijzigd door RobTweaks op 13-03-2011 19:11 . Reden: codetags ]

[R4gnax]

Lees de API voor noConflict nog eens een keer goed door. De oplossing voor je probleem staat letterlijk in het 2e code sample.

[ Voor 10% gewijzigd door R4gnax op 14-03-2011 09:03 ]

[mcDavid]

Volgens mij zou de enige echte oplossing zijn: Gebruik maar één library.

Je gaat mij niet vertellen dat dat effectje met mootools niet ook met Jquery gemaakt kan worden. Of andersom.

[RobTweaks]

R4gnax schreef op maandag 14 maart 2011 @ 09:02:
Lees de API voor noConflict nog eens een keer goed door. De oplossing voor je probleem staat letterlijk in het 2e code sample.

@R4gnax en Codecaster:

Bedankt! Niet te geloven dat ik dit eerder fout deed zeg... Ik schaam me diep .

Even de oplossing voor anderen met hetzelfde probleem (praktische voorbeelden werken altijd het best):

JavaScript:

jQuery.noConflict();
(function($) { 
  $(function() {
       //vanaf hier start de code voor mijn specifieke toepassing, wel even veranderen natuurlijk...
})(jQuery);

Nogmaals mijn hartelijke dank!

[ Voor 44% gewijzigd door RobTweaks op 14-03-2011 19:25 ]

[FlorisD]

robtaal schreef op maandag 14 maart 2011 @ 19:19:
[...]

@R4gnax en Codecaster:

Bedankt! Niet te geloven dat ik dit eerder fout deed zeg... Ik schaam me diep .

Even de oplossing voor anderen met hetzelfde probleem (praktische voorbeelden werken altijd het best):

JavaScript:

jQuery.noConflict();
(function($) { 
  $(function() {
       //vanaf hier start de code voor mijn specifieke toepassing, wel even veranderen natuurlijk...
})(jQuery);

Nogmaals mijn hartelijke dank!

Een andere oplossing zou overigens nog zijn om na je noConflict-aanroep overal waar je jQuery aanroept met $ deze te vervangen met 'jQuery', dus niet dit:

code:

$("#header").click();

maar dit:

code:

jQuery("#header").click();

Nadeel hiervan is dat je code snel rommeliger oogt, maar op deze manier kan je dus wel verschillende libraries door elkaar gebruiken zonder problemen en zonder de code te hoeven afzonderen in een eigen 'container' zoals in de oplossing die je hierboven zelf geeft.

[Cartman!]

mcDavid schreef op maandag 14 maart 2011 @ 10:19:
Volgens mij zou de enige echte oplossing zijn: Gebruik maar één library.

Je gaat mij niet vertellen dat dat effectje met mootools niet ook met Jquery gemaakt kan worden. Of andersom.

Dit lijkt me het enige juiste antwoord, even een QFT dus

[R4gnax]

FlorisD schreef op maandag 14 maart 2011 @ 19:33:

maar op deze manier kan je dus wel verschillende libraries door elkaar gebruiken zonder problemen en zonder de code te hoeven afzonderen in een eigen 'container' zoals in de oplossing die je hierboven zelf geeft.

Je zegt het alsof dat afzonderen iets slechts is. Het is juist een goed idee om Javascript code niet op het hoogste niveau uit te voeren. Als je dat doet loop je namelijk de globale namespace te vervuilen. Erger nog; je loopt het risico op een conflict met andere scripts die de globale namespace vervuilen.

De beste oplossing om in te zetten wanneer je met jQuery werkt is eigenlijk om het resultaat van jQuery's noConflict method mee te geven aan een IIFE:

JavaScript:

( function( $, undefined ) {

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

})( jQuery.noConflict() );

Daarmee haal je de $ alias voor jQuery weg uit de globale scope en maak je een nieuwe $ alias voor jQuery die alleen binnen de lokale scope v/d function expression bestaat. Verder kun je er meteen voor zorgen dat de ingebouwde waarde voor undefined gereset wordt naar wat het hoort te zijn, voor het geval je ranzige ad provider scripts of andere meuk hebt die daar mee hebben lopen te sollen.

(Als je echt paranoide bent kun je nog true meegeven aan de noConflict method, om op die manier buiten de lokale scope alle referenties naar jQuery zelf te verwijderen, alsmede attributen die de library op DOM nodes toevoegd. Dat maakt de library overigens wel trager en mogelijk werken enige features dan óók niet helemaal zoals verwacht.)

Cartman! schreef op maandag 14 maart 2011 @ 19:52:
[...]

Dit lijkt me het enige juiste antwoord, even een QFT dus

Hangt er een beetje vanaf aan wat voor project je op dat moment aan het werken bent en wat het beschikbare budget is, eerlijk gezegd. Vaak geldt toch echt: "If it's not broken, don't fix it."

[RobTweaks]

FlorisD schreef op maandag 14 maart 2011 @ 19:33:
[...]

Een andere oplossing zou overigens nog zijn om na je noConflict-aanroep overal waar je jQuery aanroept met $ deze te vervangen met 'jQuery', dus niet dit:

code:

$("#header").click();

maar dit:

code:

jQuery("#header").click();

Nadeel hiervan is dat je code snel rommeliger oogt, maar op deze manier kan je dus wel verschillende libraries door elkaar gebruiken zonder problemen en zonder de code te hoeven afzonderen in een eigen 'container' zoals in de oplossing die je hierboven zelf geeft.

Ja, dat is inderdaad ook een goede tip.

Het omzetten naar een ander framework kost dan toch wel even een stuk meer tijd. Ik snap wel dat dat de meest nette oplossing is, maar hier is toch niets mis mee lijkt me zo? Of zie ik iets over het hoofd (naast uniformiteit kan ik namelijk niets bedenken)?

[mcDavid]

R4gnax schreef op maandag 14 maart 2011 @ 21:52:
[...]

Hangt er een beetje vanaf aan wat voor project je op dat moment aan het werken bent en wat het beschikbare budget is, eerlijk gezegd. Vaak geldt toch echt: "If it's not broken, don't fix it."

Als het een uitbreiding op een bestaand project is, zou ik de library gebruiken die er al bij zit, en niet een extra library toevoegen voor één effect.
Of je moet besluiten dat de bestaande library niet (meer) voldoet en je een andere wilt gebruiken, en dan moet je dat ook gelijk goed doen.

[Bosmonster]

mcDavid schreef op maandag 14 maart 2011 @ 10:19:
Volgens mij zou de enige echte oplossing zijn: Gebruik maar één library.

Je gaat mij niet vertellen dat dat effectje met mootools niet ook met Jquery gemaakt kan worden. Of andersom.

Dit. Dit is gewoon een gevalletje knip-en-plak-problematiek.