it-swarm.com.de

Verwendung von JQuery und Prototype auf derselben Seite

Einige meiner Seiten verwenden sowohl JQuery als auch Protoype. Seit ich ein Upgrade auf Version 1.3 von JQuery durchgeführt habe, scheint dies Probleme zu verursachen, da beide Bibliotheken eine Funktion mit dem Namen '$' definieren.

JQuery stellt eine Funktion noConflict () zur Verfügung, die die Kontrolle über $ an andere Bibliotheken übergibt, die es möglicherweise verwenden. Es scheint also, als müsste ich alle meine Seiten durchgehen, die so aussehen:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>

und ändern sie so, dass sie aussehen:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

Ich sollte dann in der Lage sein, '$' für Prototype und '$ j' (oder 'jQuery') für JQuery zu verwenden. Ich bin nicht ganz glücklich darüber, diese beiden Codezeilen auf jeder relevanten Seite zu kopieren, und ich gehe davon aus, dass irgendwann jemand vergessen wird, sie auf einer neuen Seite hinzuzufügen. Ich würde es vorziehen, folgendes tun zu können 

  • Erstellen Sie eine Datei jquery-noconflict.js, die jquery.js und die oben gezeigten zwei Codezeilen enthält
  • Importieren Sie jquery-noconflict.js (anstelle von jquery.js) in alle meine JSP/HTML-Seiten

Ich bin mir jedoch nicht sicher, ob es möglich ist, eine JS-Datei in einer anderen, in der beschriebenen Art und Weise einzufügen. Natürlich ist es eine alternative Lösung, einfach die beiden obigen Codezeilen direkt in jquery.js hinzuzufügen, aber wenn ich das tue, muss ich bei jedem Upgrade von JQuery daran denken.

32
Dónal

Momentan kannst du so etwas tun:

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

Verwenden Sie dann jQuery als $j() und Prototypes $().

19
jmonteiro

Es scheint, dass die einfachste Antwort darin besteht, die Kugel zu beißen und Ihre noConflict-Zeilen einzubeziehen. Wenn Ihre Seiten keinen gemeinsamen Header verwenden, ist diese Lösung natürlich nicht die beste.

5
Sampson

Diese Lösung hat gut funktioniert:

jQuery.noConflict();
var $j = jQuery;

Verwenden Sie jetzt $j anstelle von $ für Ihren jQuery-Code, z.

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});
4
AJCE

Ich habe das eine Weile durchgemacht. Es ist sehr ärgerlich und am Ende habe ich beschlossen, meine alten Prototyp-Sachen auszusondern und durch jQuery zu ersetzen. Ich mag die Art und Weise, wie Prototype einige Ajax-Aufgaben erledigt, aber es lohnt sich nicht, all das ohne Konflikt zu behalten.

3
Nick Van Brunt

Könnten Sie nicht einfach den jQuery = noConflict()-Code in die Quelldatei jquery.js aufnehmen? Warum müsste es so definiert werden?

2
Chris

Nur als Hinweis an andere, die darauf stoßen. Die Lösungen werden hier beschrieben (unter besonderer Berücksichtigung des Prototyps): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

2
Nux
<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

oder

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

BEARBEITEN:

Ich habe diesen Vorschlag ausprobiert, aber die letzten 2 Zeilen erzeugen den Fehler

jQuery is not defined
1
jacobangel

Sie könnten Jquery zuerst anrufen und dann festlegen 

var $j = jQuery;

in diesem Fall übernimmt Prototyp $.

Oder Sie können einfach auf jQuery verweisen, indem Sie den vollständigen Namen der jQuery-Funktion (jQuery) verwenden. 

1
RobKohr

Ihr jquery-noconflict.js sollte so aussehen (stellen Sie sicher, dass sich alles in einer Zeile befindet):

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

... und dann sollte Ihr Include (wie Sie bereits ausgeführt haben) folgendermaßen aussehen:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

Diese Lösung löst alle Ihre Anforderungen, denke ich.

1
PrimosK

Sie müssen es in Ihren public/javascript/application.js laden

jQuery.noConflict();

var $j = jQuery;

Dies ist auch ein guter Artikel, der hilfreich sein kann.

JQuery & Prototype arbeiten zusammen

0
kkampen

Wenn ich Sie wäre, würde ich meinen Code ohne Konflikt in eine JavaScript-Include-Datei wie Sie es oben dargelegt haben, fallen lassen und dann herausfinden, wie ich diese Dinge festlegen würde, die ich in all meine Seiten an einem zentralen Ort einfügen muss . Wenn Sie mit reinen HTML-Dateien arbeiten und keine serverseitigen Templating-/Scripting-Funktionen für die Inhalte eines Dokuments besitzen, besteht immer die Möglichkeit, ein serverseitiges Include durchzuführen.

Wie auch immer, der Schmerz, den Sie dieses Mal beim Aktualisieren Ihrer Seiten verspüren, wird immer wieder auftreten, wenn Sie Ihren Analysecode oder die Fußzeile der Website aktualisieren müssen. 

0
Billy Gray

Verwenden Sie den Prototyp unter jQuery wie folgt:

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

in diesem Fall wird durch die jQuery-Funktion ein Problem erstellt. Sie können dieses Problem daher verwenden, um das Problem zu lösen:

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>
0
Curzon Rahman