JavaScript – ページ 9

jQuery 動的追加DOM要素へのイベント設定

投稿日: 2019-01-16 投稿者: Hisa

よく間違うので、備忘録しておきます。

[ コード例 ]


    //$('#id').on('click', 'button', function (e) {
    // 後から追加なので、上は効かない //
    $(document).on('click', '#id', function (e) {

ここに詳しく書かれてます。

https://qiita.com/negi/items/6ec0d3cedba499eac81a

PHP jqGrid用JSON応答用コード

投稿日: 2019-01-13 投稿者: Hisa

いちばん簡潔に書くと、以下のようになります。

[ コード例 ]


<?php  

try {
  
  // 接続定義 //
  $connect_db = "mysql:dbname=databasename;host=localhost;charset=utf8";
  $connect_user = '?????';
  $connect_passwd = '??????';

  //データベース接続
  $dbm = new PDO($connect_db, $connect_user, $connect_passwd);
  // 検索 //
  $stmt = $dbm->query($SQL);
  
  // JSONクラスのインスタンス化 //
  $responce = new stdClass();

  $i = 0;
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    foreach ($row as $fld => $val) {
       //echo $val."\n";
      $responce->rows[$i][$fld] = mb_convert_encoding($val, "UTF-8", "auto");
    }
    $i++;
  }

  // JSONに変換して出力 //
  echo json_encode($responce, JSON_PRETTY_PRINT);
  
} catch (Exception $ex) {
  var_dump($ex->getMessage());
}

// 切断 //
$dbm = null;

?>

jQuery id class 名の制限

投稿日: 2019-01-13 投稿者: Hisa

長さの制限はありません。

文字の制限はあります。下で教えていただきました。

jQueyのID指定に使える記号

jQuery-ui テーマの動的変更

投稿日: 2019-01-10 投稿者: Hisa

1) JSPの自作カスタムタグを使った select を使う


<%@ taglib uri="/WEB-INF/htmythema.tld" prefix="MyThema" %>

2) 1) を使いたいところに配置


// マイテーマ選択用 //
      var themasel = "<MyThema:mythema realdir='' themaval='<%=cfg.getSeltheme()%>' />";


          // == 生成完了した時 == //
          gridComplete: function () {

　　　　　　var THEMA_DIV = "<div style='float:right' id='mythemadiv'></div>";　　　　

            // マイテーマ選択用 //
            $("#t_others").append(THEMA_DIV);
            $('#mythemadiv').html("MyTheme " + themasel);
            // テーマ変更 => リロード //
            $('#themasel').on('change', function () {
              $('#thmnm').val($(this).val());
              $('#thmchgform').submit();
            });


    <%-- テーマ変更用 --%>
    <%--<MyThema:mythema realdir="" themaval="<%=cfg.getSeltheme()%>"/>--%>
    <form id="thmchgform" method="post" action="export.jsp">
      <input type="hidden" name="thmchg" value="yes" />
      <input type="hidden" name="thmnm" id="thmnm" value="" />
    </form>

3) 変更リクエストのactionは自ページで、変更内容はクッキーとセッションにセット (どっち使っても良いが、実際はセッションを使ってる)


  // テーマ変更で来た場合 //
  if (request.getParameter("thmchg") != null) {

    //  セッションに格納 //
    String thmnm = request.getParameter("thmnm");
    cfg.setSeltheme(thmnm);

    // クッキーに保存 //
    Cookie cookie = new Cookie("thema", thmnm);
    cookie.setMaxAge(60 * 24 * 60 * 60); //有効期間を60日間に設定
    response.addCookie(cookie);

  }

[ 画面例 ]

jQuery-ui テーマの設定と読込

投稿日: 2019-01-10 投稿者: Hisa

[ 設定と読込 ]

1. データベースにマスタを用意


CREATE TABLE `m_themacol` (
	`NM_THEMA` VARCHAR(20) NOT NULL COMMENT 'テーマ名',
	`NM_MENUCOL` VARCHAR(7) NOT NULL DEFAULT '' COMMENT 'メニュー背景色',
	`IS_DARKTHEME` TINYINT(4) NOT NULL DEFAULT '0',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	`TM_UPDT` DATETIME NOT NULL DEFAULT '2000-01-01 00:00:00' COMMENT '最終更新時刻',
	PRIMARY KEY (`NM_THEMA`)
)
COMMENT='jQueryUIテーマ別色設定'
COLLATE='sjis_japanese_ci'
ENGINE=InnoDB
;

Startupのサーブレットでデータベースを読込、public static な変数に格納
JSPで読込み、pageContextに格納
スタイルシートのファイル名またはディレクトリ名のテーマ名部分を、pageContextの変数にする

多言語化の方法

投稿日: 2019-01-10 投稿者: Hisa

[ 基本的方法 ]

データベースにマスタを用意
JSPでデータベースのデータを読込、Javascriptの連想配列になった文字列を、pageContext に格納
pageContext の連想配列を const した変数に格納
3. を jQuery の text, html に入れて表示。jqGridの場合は、constな変数に格納して使う
2.により、言語変更は、コード簡潔化の為、ページの再読込を必要とする

jqGrid colModel, colNames (JSONファイル読込)

投稿日: 2019-01-10 投稿者: Hisa

列数が多かったり、複雑な設定の colModel の場合、ページと同じファイルに記述すると、長くわかりにくくメンテナンス性低下なので、JSONファイルを読み込んでます。

[ コード例 ]


  // 一覧表のcolModelをファイルから読み込む //
  $.ajaxSetup({async: false});     // <== 非同期を解除
  var shipmentColmodel;
  var tmpname;
  $.getJSON("shipment.json", function (json) {
    shipmentColmodel = json;
    var len = json.length;
    for (var i = 0; i < len; i++) {
      tmpname = shipmentColmodel[i]['name'];

      // ローカルストレージに保存した列幅にする //
      if (name_widthMap[tmpname]) {
        shipmentColmodel[i]['width'] = name_widthMap[tmpname];
      }

    }
  });
  $.ajaxSetup({async: true});   // <== 非同期に戻す

[ JSONファイル例 ]

— 省略 —

jQuery-ui AutoComplete の使い方

投稿日: 2019-01-09 投稿者: Hisa

テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示します。

[ コードサンプル ]


        // ++++ 港名サジェスト ++++ //
        // == 日本 == //
        /* テキストボックスのidに対して、autocompleteを設定 */
        $('#ldnm').autocomplete({
          //minLength: 3, <== 必要に応じてセット、デフォルトは1
          source: function (req, resp) {
            
            /* 検索レスポンスを返すサーブレットにaJaxでリクエスト 
               レスポンスはJSON型式文字列配列
            */
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'j', ldlk: $('#ldnm').val(), dclk: '', cntrycd: curcntrycd, dcnm: $('#dcnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });
        // == 海外 == //
        $('#dcnm').autocomplete({
          source: function (req, resp) {
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'f', ldlk: '', dclk: $('#dcnm').val(), cntrycd: curcntrycd, ldnm: $('#ldnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });

[ 画面例 ]