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

2020/09/11イントラマートintra-mart Accel Platform,スクリプト開発,Javascript,jQuery,Prototype.js

記事内に広告が含まれています。

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

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

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

イントラマートとは
株式会社NTTデータイントラマート社が開発・販売している、Webアプリケーションシステムのシステム共通基盤(統合型フレームワーク)で、国内の著名企業を中心に6,000社以上に導入されています。 イントラマートを導入することにより、Webシステム開発における短納期・低コスト・標準化推進・品質向上を実現できます。
詳しくはこちらをご覧ください。

ポートレットでの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の使い方-」でした。

システムトラストでは一緒に働いていただける仲間を募集中です。
株式会社システムトラスト

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

お問合せ