ポートレットでjQueryが使えない?-ポートレットでのjQueryの使い方-

イントラマート

イントラマートには「ポートレット」という機能があります。

ポートレットとは、ポータルサイト(のトップページ)に機能や情報を追加することができる小さなプログラムのこと

このポートレットを作成するプレゼンテーションページでjQueryが使えないという事象が発生しました。

ポートレットでのjQueryの使い方

jQueryを使った処理を書きたかったので以下のようなコードを書きました。

$(function() {
  //セレクトボックスが切り替わったら発動
  $('select').change(function() {
    var val = $(this).val();
    //選択したvalue値をreceiveに出力
    $('#receive').text(val);
  });
});

jQueryの文法としてはあっているはずなのに、これが反応してくれませんでした。

ポータルではPrototype.jsが使われている

そこで調べるとイントラマートのポートレットでは「Prototype.js」が使われているようです。

ポータルの画面においてprototype.jsを利用しているため、CSJSの変数$をjQueryとして利用できません。
ポートレットで作成された画面でCSJSを利用する場合、CSJSの変数$は利用しないようにしてください。

prototype.jsでは「$」はdocument.getElementByIdに代わるもので、jQueryでは核であるjQueryオブジェクトを表すものです。

これが混在した状態になっていたので、正しく動作できなかったようです。

なので「$」を使わずに「jQuery」と書きなさいということです。

<script type="text/javascript">

   jQuery('#aaa').xxx; // $を使用しないで jQuery を使う。

   jQuery(document).ready(function($){
      // ここでは、$はjQueryとして使えます。
   });

</script>

これでイントラマートのポートレット画面でjQueryのプログラムを動作させることができます。

まとめ

ドキュメントを見れば簡単なことだったのですが、案外気が付くまでに時間がかかってしまいました。

イントラマートのポートレット画面でjQueryのプログラムを動作させるには「$」ではなく「jQuery」と書く必要があります。

以上「ポートレットでjQueryが使えない?-ポートレットでのjQueryの使い方-」でした。

 

株式会社システムトラスト

人材募集中です。

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ