jQuery.noConflict() の設定をすると正常に動作しない

2010年10月31日 at 17:41

これはバグとまで言えるかどうか分かりませんが・・・

オリジナルのテーマで使用しているJQueryの記述の部分を、
 -----
 jQuery.noConflict();
 jQuery(document).ready(function($){~
 -----
と変更したところ、編集画面に入れなくなってしまいました。


<症状>
localhostの場合は、画面上部のツールバー(「編集モード」ボタンや「新規ページ」ボタンが表示されいているエリア)が表示されなくなってしまいました。
サーバの場合はツールバーは表示されたのですが、「編集モード」ボタンをクリックしたところ、待機イメージがずっとグルグル回り続けるばかりで編集モードに切り替えることができませんでした。
(localとサーバの挙動が異なる点は不明です)


<原因>
コアの「/concrete/js」ディレクトリにあるJavascriptファイルを見たところ、JQueryオブジェクトとして「$」を多用しているようでしたので、正常に動作しなくなってしまうのはまぁ当然かと。


<暫定対応>
今回は、JQueryオブジェクトが「$」のままでも対応できるので、「jQuery.noConflict()」の記述は削除して「$」に戻しました。
しかし今後もしも、オリジナルのテーマでこれまで使っていた prototype.js を活用したい等、「jQuery.noConflict()」を設定する必要がでてきた場合には、「/concrete/js」のJavascriptファイルを全て「$ → JQuery」に置換した形でオーバーライドするしかないでしょうか・・・。


<要望>
できれば、コアの「/concrete/js」のJavascriptファイルで「$ → JQuery」などに変更しておいていただきたいなぁと思います。


※なお、上記の見立てが間違っていましたら、ご返信ください。

タグ:

Re: jQuery.noConflict() の設定をすると正常に動作しない

2010年11月1日 at 21:25
詳細なご報告ありがとうございました。

今concrete/js/配下のjsファイル群を見てみましたが、
$を全てjQueryに書きかえるというのは、$形式で書かれた他のjQueryライブラリも取り込んでいるので本家はあまりやりたくないかな、という気がしました。(単に自分の推測です。)

しかし試しに、本家フォーラムでご要望されるのもよいかと思います。

さて、ほんの提案なのですが、例えば逆にprototype.jsを書き変えてしまう、という手はいかがでしょうか?
例えば以下のページには
http://coolwebdeveloper.com/2009/07/prototype-and-jquery-conflict-resolution-prototype-javascript-library-interferes-with-jquery/
$()を$$$()に変更してconflictを回避する方法が提案されています。
replace allを使わない、$$()は触らない、などの注意点が書かれています。

単に一案までにて。
 

Re: Re: jQuery.noConflict() の設定をすると正常に動作しない

2010年11月6日 at 12:03
prototype.jsの「$」の方を置き換えるという方法もあるのですね。
ありがとうございます。

prototype.jsの方を置換する場合もすべての「$」を「$$$」に置換しなければいけないようなので、置換の『手間』だけを見るとJQueryの「$」を置換する場合とあまり変わらないかもしれませんが、JQueryはconcrete5の管理ツールで多用されていることを考えると、prototype.jsの方を置換する方が無難のようですね。

参考にさせていただきます。
 

Re: jQuery.noConflict() の設定をすると正常に動作しない

2012年5月21日 at 2:28
takezoさんの言われている$を$$$に変えた上で、ログインしている状態ではprototype.jsを読み込ませない様にする事で正常に編集することが出来ました。
その際PHPは本家フォーラムの投稿を参考にしました。

<!-- 以下コード -->
<head>

<?php $cp = new Permissions($c);
if(!$cp->canWrite() && !$cp->canAddSubContent()) { ?>
<script type="text/javascript" src="/js/prototype.js"></script>
<?php } ?>

</head>

日本語フォーラムに当スレッドがあったおかげで問題を解決に向えた事と、どなたかの参考になればと思い返信させてもらいました。