web-dev-qa-db-ja.com

同じページでのjQueryとプロトタイプの使用

私のページのいくつかは、JQueryとProtoypeの両方を使用しています。 JQueryのバージョン1.3にアップグレードしてから、両方のライブラリで「$」という名前の関数が定義されているため、これが問題を引き起こしているようです。

JQueryは、$の制御を、それを使用している可能性がある他のライブラリに放棄する関数noConflict（）を提供します。したがって、次のようなページをすべて確認する必要があるようです。

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

次のように変更します。

<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>

これで、Prototypeに「$」を、JQueryに「$ j」（または「jQuery」）を使用できるようになります。私は、関連するすべてのページでこれらの2行のコードを複製することに完全に満足しているわけではありません。ある時点で、誰かがそれらを新しいページに追加するのを忘れる可能性が高いと思います。次のことができるようにしたい

  • query-noconflict.jsと上記の2行のコードを「含む」ファイルjjquery.jsを作成します。
  • すべてのJSP/HTMLページにjquery-noconflict.jsの代わりにjquery.jsをインポートします

しかし、私が説明した方法で、あるJSファイルを別のJSファイルに含めることが可能かどうかはわかりません。もちろん、別の解決策は、上の2行のコードを直接jquery.jsに追加することですが、その場合は、JQueryをアップグレードするたびに忘れずに行う必要があります。

javascriptjqueryprototypejs
33
Dónal

現在、次のようなことができます：

_<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>
_

次に、jQueryを$j()およびPrototypeの$()として使用します。

19
jmonteiro

最も簡単な答えは、弾丸を噛み、noConflict行を含めることです。もちろん、ページで共有ヘッダーを使用していない場合、そのソリューションは最適ではない可能性があります。

5
Sampson

このソリューションはうまくいきました：

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

$j 代わりに $ jQueryコードの場合：

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

私はしばらくこれを経験しました。それは非常に迷惑であり、結局私は私のすべての古いプロトタイプのものを取り除き、それをjQueryで置き換えることにしました。 PrototypeがいくつかのAjaxタスクを処理する方法が好きですが、競合のないものすべてを維持するというトレードオフの価値はありませんでした。

3
Nick Van Brunt

jQuery = noConflict()コードをjquery.jsソースファイルに単に含めることはできませんか？なぜそのように定義する必要があるのでしょうか？

2
Chris

これにつまずく他の人へのメモのように。ソリューションはここで説明されています（具体的にはプロトタイプに言及しています）： 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>

または

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

編集：

この提案を試しましたが、最後の2行でエラーが発生しました

jQuery is not defined
1
jacobangel

最初にjqueryを呼び出してから設定することができます

var $j = jQuery;

プロトタイプが$ この場合。

または、完全なjQuery関数名（jQuery）を使用してjQueryを参照することもできます。

1
RobKohr

きみの jquery-noconflict.jsは次のようになります（すべてが1行になっていることを確認してください）：

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

...そして、インクルード（既に指摘したとおり）は次のようになります。

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

このソリューションは、私が考えるすべての要件を解決します。

1
PrimosK

public/javascript/application.jsに読み込む必要があります

jQuery.noConflict();

var $j = jQuery;

これも役に立つかもしれない良い記事です。

JQueryとプロトタイプの連携

0
kkampen

私があなただったら、上記の意見のように、競合しないコードをJavaScriptのインクルードファイルにドロップし、すべてのページの1か所に含める必要があるこれらの設定を行うプロセスを見つけます。 。ストレートHTMLファイルを使用していて、ドキュメントに含まれるものに対してサーバーサイドのテンプレート/スクリプト機能がない場合は、常にサーバーサイドインクルードを実行できる可能性があります。

どちらの場合でも、今回の各ページの更新で発生する問題は、分析コードまたはサイトフッターを更新する必要があるときに再び戻ってきます。

0
Billy Gray

次のようにjQueryの下でプロトタイプを使用します。

<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" />

この場合、jQuery関数が問題を引き起こすため、これを使用して問題を解決できます。

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