JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/03/13] [PR] (No.)
[2020/05/01] JavaScript jQueryでAjaxを使いJSONファイルから一連のデータを設定する方法 (select, ul) (No.167)
[2020/04/30] JavaScript jQueryで Form のSUMITを処理する方法（ submit() ） (No.166)
[2020/04/29] JavaScript jQueryで要素を追加する方法（append,appendTo,before,after） (No.165)
[2020/04/28] JavaScript jQueryでAjaxの逐次処理を jQuery.when で行う方法 (No.164)
[2020/04/11] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定（editable） (No.163)

≪ [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] ≫

- 2025/03/13
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2020/05/01

JavaScript jQueryでAjaxを使いJSONファイルから一連のデータを設定する方法 (select, ul)

今回は Ajax を使い JSON ファイルから配列データを取得し select などに設定する例を示します。
今回の例は都道府県のコードと名称を読込んで select に設定することを行います。

先ずは以下の様な都道府県のコードと名称のリストである JSON ファイルを用意します。

[
  {"id":"01", "name":"北海道"},
  {"id":"02", "name":"青森県"},
  {"id":"03", "name":"岩手県"},
  {"id":"04", "name":"宮城県"},
  {"id":"05", "name":"秋田県"},
  {"id":"06", "name":"山形県"},
  {"id":"07", "name":"福島県"},
  {"id":"08", "name":"茨城県"},
  {"id":"09", "name":"栃木県"},
  {"id":"10", "name":"群馬県"},
  {"id":"11", "name":"埼玉県"},
  {"id":"12", "name":"千葉県"},
  {"id":"13", "name":"東京都"},
  {"id":"14", "name":"神奈川県"},
  {"id":"15", "name":"新潟県"},
  {"id":"16", "name":"富山県"},
  {"id":"17", "name":"石川県"},
  {"id":"18", "name":"福井県"},
  {"id":"19", "name":"山梨県"},
  {"id":"20", "name":"長野県"},
  {"id":"21", "name":"岐阜県"},
  {"id":"22", "name":"静岡県"},
  {"id":"23", "name":"愛知県"},
  {"id":"24", "name":"三重県"},
  {"id":"25", "name":"滋賀県"},
  {"id":"26", "name":"京都府"},
  {"id":"27", "name":"大阪府"},
  {"id":"28", "name":"兵庫県"},
  {"id":"29", "name":"奈良県"},
  {"id":"30", "name":"和歌山県"},
  {"id":"31", "name":"鳥取県"},
  {"id":"32", "name":"島根県"},
  {"id":"33", "name":"岡山県"},
  {"id":"34", "name":"広島県"},
  {"id":"35", "name":"山口県"},
  {"id":"36", "name":"徳島県"},
  {"id":"37", "name":"香川県"},
  {"id":"38", "name":"愛媛県"},
  {"id":"39", "name":"高知県"},
  {"id":"40", "name":"福岡県"},
  {"id":"41", "name":"佐賀県"},
  {"id":"42", "name":"長崎県"},
  {"id":"43", "name":"熊本県"},
  {"id":"44", "name":"大分県"},
  {"id":"45", "name":"宮崎県"},
  {"id":"46", "name":"鹿児島県"},
  {"id":"47", "name":"沖縄県"}
]

HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、引数には JSON データの配列が返りますのでそれを option 句のリストとして整形してやり select の子要素に追加します。

■Ajaxを使いJSONファイルからデータを取得

<html>
<head>
<meta charset="utf-8">
<title>test ajax json file</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <h2>test ajax json file</h2>
  都道府県：
  <select name="SelectPref" id="SelectPref">
    <option value=""></option>
  </select>
  <button onclick="getPrefData();">Ajax</button>

<script type="text/javascript">
function getPrefData() {
    $.ajax({
        type: "GET",
        url: "pref.json",
        dataType: "json",
        cache: false,
        success: function(PrefData) {
            // select の内容削除
            $("#SelectPref").empty();
            var append = '<option value=""></option>&#10;';
            // JSON データを option に展開生成
            for(var i = 0; i < PrefData.length; i++) {
                append += '<option value="' + PrefData[i].id + '" >';
                append += PrefData[i].name;
                append += '</option>';
                append += '&#10;';
            }
/*          forループを以下の様にしてもOK
            $.each(PrefData, function(i) {
                append += '";
                append += PrefData[i].name;
                append += '';
                append += '&#10;";
            });
*/
            // select の内容に設定
            $("#SelectPref").append(append);
        }
    });
    return false;
}
</script>
</body>
</html>

簡単なマスタデータを JSON ファイルにまとめて上記の様に取得すれば、区分データぐらいであれば特にデータベースを使わないでもいけると思います。

JavaScript
0CM

2020/04/30

JavaScript jQueryで Form のSUMITを処理する方法（ submit() ）

今回は jQuery でForm のSUMITを処理する為に用意されている submit 関数ついて説明します。
先ずは1個のテキスト入力と SUMIT ボタンを宣言したフォームをもつHTMLを以下に示します。これは特に難しくは無いと思います。ちなみにアクション先の PHP のソースをその下に示します。

■簡単なFormとSUBMITについて

<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form method="post" action="stest.php">
    <input type="text" name="data1" value="">
    <input type="submit" value="送信">
</form>
</body>
</html>

■アクション先のPHP

<?php
$data1 = "";
if (isset($_POST["data1"]) == true) {
    $data1 = $_POST["data1"];
}
// データを表示
echo("data1=".$data1);
?>

ここで jQuery の submit 関数を導入します。 submit 宣言で無名関数を宣言しています。この無名関数はアラート表示を行っていますが、アラートが表示されて「OK」ボタンを押下すると上記の stest.php のプログラムに遷移します。

■submit 関数

<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form method="post" action="stest.php">
    <input type="text" name="data1" value="">
    <input type="submit" value="送信">
</form>
<script type="text/javascript">
// jquery でSUBMIT処理
$('form').submit(function(){
    alert("送信します。");
    return true;
});
</script>
</body>
</html>

この処理はそこまで必要は感じられませんが無名関数の最後で return false; とすれば SUBMIT 処理が中断します。
つまりこの関数の中で入力データの必須チェック等を行うことで正しいデータをアクション先に送信できます。では、テキストボックスにデータが入力されていない場合にエラー表示をする様にします。

■submit 関数の中でチェック処理を行いエラーの場合 return false;

<html>
<head>
<meta charset="utf-8">
<title>jquery submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit</h1>
<form id="SForm" method="post" action="stest.php">
    <input type="text" id="data1" name="data1" value="">
    <input type="submit" value="送信">
</form>
<script type="text/javascript">
// jquery でSUBMIT処理
$('form').submit(function(){
    if ($('#data1').val() == '') {
        alert("データを入力して下さい。");
        return false;
    }
    alert("送信します。");
    return true;
});
</script>
</body>
</html>

ところで jQuery のプログラムからフォームを生成し非表示の input ボックスを追加し SUBMIT 処理を行う例を示します。
尚、コメントで囲まれた処理は jQuery ではなく JavaScript のみで記述した場合を示します。

■jQuery プログラムによるフォーム生成と SUBMIT 処理

<html>
<head>
<meta charset="utf-8">
<title>jquery submit2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>jquery submit2</h1>
<button onclick="doSubmit();">送信</button>
<script type="text/javascript">
// jquery でSUBMIT処理
function doSubmit() {
    // from オブジェクト
    var form = $("<form></form>").attr('method', 'post').attr('action', 'stest.php');
    $('body').append(form);
    // input オブジェクト
    var inp = $("<input>");
    inp.attr("type", "hidden").attr("name", "data1").attr("value", 123);
    // input オブジェクトをformに追加
    form.append(inp);
    // SUBMIT処理
    form.submit();
    return false;

/*
    // 純粋なJacaScriptでの記述
    var form = document.createElement("form");
    form.action = "stest.php";
    form.method = "POST";
    form.style.visibility = "hidden";
    document.body.appendChild(form);

    var elem = document.createElement("input");
    elem.name = "data1";
    elem.type = "hidden";
    elem.value = "123";
    form.appendChild(elem);

    form.submit();
*/
}
</script>
</body>
</html>

JavaScript
0CM

2020/04/29

JavaScript jQueryで要素を追加する方法（append,appendTo,before,after）

今回は jQuery で用意されている append , appendTo , before , after 関数を使って要素の追加を行う方法について説明します。

■各関数の定義について

関数名	書式	引数	戻り値
append	$.(セレクタ).append(content)	セレクタ：追加対象要素を指し示す文字列 content：追加する文字列、DOM Elementおよび　　　　　jQueryオブジェクト	jQueryオブジェクト
appendTo	$.(セレクタ).appendTo(content)	セレクタ：追加する要素を指し示す文字列または、　　　　　追加文字列 content：追加対象要素を指し示す文字列　　　　　(セレクタ)	jQueryオブジェクト
before	$.(セレクタ).before(content)	セレクタ：追加対象要素を指し示す文字列　　　　　(実際はこのセレクタの外側の前方に追加) content：追加する文字列、DOM Elementおよび　　　　　jQueryオブジェクト	jQueryオブジェクト
after	$.(セレクタ).after(content)	セレクタ：追加対象要素を指し示す文字列　　　　　(実際はこのセレクタの外側の後方に追加) content：追加する文字列、DOM Elementおよび　　　　　jQueryオブジェクト	jQueryオブジェクト

ここで注意するのは appendTo 関数で append とは逆の指定となり、 appendTo の引数（content）で指定されたセレクタの子要素の最後に $.(セレクタ) の「セレクタ」部分が追加されます。
また before , after 関数は指定されたセレクタの外側の前後へ、指定文字列等（content）が追加されます。
では実際の例を以下に示します。

■要素を追加する方法（append,appendTo,before,after）

<html>
<head>
<meta charset="utf-8">
<title>jquery append</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var i = 1;

// append による指定要素の最後にHTML文字列の追加
function doAppend() {
    $("#maindiv").append("<p>追加の要素(" + i + "):append</p>\n");
    i++;    // これを無くして上の「i」⇒「(i++)」でもOK
    return false;
}
// appendTo によりHTML文字列を指定要素の最後に追加
function doAppendTo() {
    $("<p>追加の要素(" + (i++) + "):appendTo</p>\n").appendTo("#maindiv");
    return false;
}
// before による要素の追加
function doBefore() {
    $("#maindiv").before("<div>追加の要素(" + (i++) + "):before</div>\n");
    return false;
}
// after による要素の追加
function doAfter() {
    $("#maindiv").after("\n<div>追加の要素(" + (i++) + "):after</div>");
    return false;
}
</script>
</head>
<body>
<h1>jquery append</h1>
<div id="maindiv">
</div>
<button onclick="doAppend();">append</button> 
<button onclick="doAppendTo();">appendTo</button> 
<button onclick="doBefore();">before</button> 
<button onclick="doAfter();">after</button>
</body>
</html>

上記のソースを実行し、「append」ボタンを2回押下後、「appendTo」「before」「after」ボタンを順に押下すると、HTML内のソースは以下の様になります。

<h1>jquery append</h1>
<div>追加の要素(4):before</div>
<div id="maindiv">
<p>追加の要素(1):append</p>
<p>追加の要素(2):append</p>
<p>追加の要素(3):appendTo</p></div>
<div>追加の要素(5):after</div>

上記では appendTo 関数は追加処理と説明しましたが、実は移動処理が本当の処理なのです。
「$.(セレクタ).appendTo」のセレクタの中がHTMLのDOMのなかで、存在しないものであれば、その文字列そのものを追加処理し、存在するセレクタであればそれ自身を移動します。
それでは、以下のソースを見て下さい。

■appendToについて

<html>
<head>
<meta charset="utf-8">
<title>jquery append2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// appendTo によりHTML文字列を指定要素の最後に追加
function doAppendTo1() {
    $("<p>追加の要素:appendTo</p>\n").appendTo("#maindiv");
    return false;
}
// appendTo によりセレクタで指定されたHTML文字列を指定要素の最後に移動
function doAppendTo2() {
    $("#padd").appendTo("#maindiv");
    return false;
}
</script>
</head>
<body>
<h1>jquery append2</h1>
<p id="padd">「id=padd」の行</p>
<div id="maindiv">
    <p>「id=maindiv」の中の最初の行</p>
</div>
<button onclick="doAppendTo1();">appendTo1</button> 
<button onclick="doAppendTo2();">appendTo2</button> 
</body>
</html>

「appendTo1」ボタンを押下すると常に「<p>追加の要素:appendTo</p>」が追加され、「appendTo2」ボタンを押下すると「id="padd"」の行が追いかける様に最後の行に移動するのが分かると思います。

appendTo 関数は子要素の最後に移動しますが、先頭に追加するには prependTo 関数があります。また append 関数に対しては prepend 関数があります。

JavaScript
0CM

- 2020/04/28
JavaScript jQueryでAjaxの逐次処理を jQuery.when で行う方法
今回は jQuery で用意されている when 関数を使って Ajax の逐次処理を行う方法について説明します。

先ずは Ajax でよくある勘違いに付いてですが Ajax の処理が終わった時点で行いたい処理を記述する以下の様な場合です。以下のソースは Ajax の終了後 test1() が処理されることを期待しています。

しかし実際には、この場合 $.ajax(); の処理が行われた直後に test1() が実行されて、その後で testajax() が実行されるはずです。 $.ajax(); で実行される url はネットを通して行われるため通信に時間が掛かります。通信が終了後、結果として done で宣言された関数の中の testajax() が実行されます。

$.ajax(); はあくまで関数宣言であり、最初は非同期通信の発火を行うだけです。非同期通信の結果としての関数を done や fail で宣言します。

■$.ajax の終了処理の勘違い

<script type="text/javascript"> // Ajax処理 $.ajax({ type: "POST", url: "hoge.php" }).done(function(data){ // 正常処理 testajax(); }); // 次の処理 test1(); </script>

上記の様に $.ajax(); の後に記述した処理を、本当に $.ajax(); の処理の終了後に行いたい場合に使うのが when です。
when の使い方ですが、以下の様な感じで when の中に Ajax 処理を行い when の done で行いたい処理を記述します。

<whenの例> $.when( // ajax 等の処理 $.ajax({ type: "POST", url: "hoge.php" }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }), // 次の処理 test1() ).done(function(){ // 後処理 }); <when の中の処理> ・複数の関数を呼出す場合は「,」(カンマ)で区切ること。 <メソッド> ・done(function(data){}：when の中の処理が終了した場合に呼ばれる関数宣言。

上では Ajax 処理としていますが、別に Ajax にこだわらなくても、通常の関数処理でもOKです。それでは Ajax ではない簡単な例を以下に示します。

■when の使い方HTMLファイル

<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //when関数 function goWhen() { $.when( console.log("test-1"), console.log("test-2") ).done(function(){ // 後処理 console.log("test-end"); }); return false; } </script> </head> <body> <h2>test jquery when</h2> <button onclick="goWhen();">test when</button> </body> </html>

「test when」ボタンを押下するとコンソール画面に "test-1" "test-2" "test-end" の文字列が順次表示されるはずです。

それでは、以下の Ajax のページの処理に when を適用してみます。
⇒JavaScript jQueryでAjaxを使いPHPからデータを取得する方法

■when を適用：Ajaxを使いPHPからデータを取得するHTMLファイル

<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Ajax関数 function getData() { $.when( // マスタデータの取得 $.ajax({ type: "POST" , url: "./ajax1.php" , data: { id: $("#id").val() } }).done(function(res){ // ajaxがOK $("#msg").text(JSON.parse(res)); }).fail(function() { // 取得エラー alert('取得エラー'); }).always(function() { // 後処理(処理することが在れば) }) ).done(function(){ alert("ajax-end"); }); return false; } </script> </head> <body> <h2>test ajax json</h2> ID:<input type="text" id="id" size="10" maxlength="10" /><br /> <p id="msg">テストメッセージ</p> <button onclick="getData();">Ajax</button> </body> </html>

このソースで「Ajax」ボタンを押下した場合 $.ajax(); の処理が正常に行われればメッセージ領域へのデータ表示の後にアラートで「ajax-end」の表示がされるはずです。

■外部PHPファイル ajax1.php

<?php // 処理モードの取得 $id = -1; if (isset($_POST["id"]) == true && $_POST["id"] != "") { $id = intval($_POST["id"]); } // マスタ風の仮のデータ $arrData = array( 0 => "@@@@@@" ,1 => "AAAAAA" ,2 => "BBBB" ,3 => "CCCCCCCC" ); $strRet = ""; if (0 <= $id && $id <= 3) { $strRet = $arrData[$id]; } // 結果を返す echo(json_encode($strRet));
- JavaScript
- 0CM

2020/04/11

JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定（editable）

今回は w2ui.grid のセルの編集設定の方法について説明します。
セルに対して入力出来る様に編集の種類を設定する場合は、グリッドのカラム宣言である columns プロパティの中の editable プロパティで行います。

■editable の内部プロパティについて

プロパティ	プロパティ名	説明
type	編集タイプ	宣言できるタイプは以下の通りです。 text :文字型 int :整数型 float :実数型 hex :16進数 money :通貨型 percent :パーセント currency :通貨型 alphaNumeric:英数字 date :日付型 time :時刻型 datetime :日付時刻型 color :色設定 check :チェックボックス list :ドロップダウンリスト combo :ドロップダウンリスト select :ドロップダウンリスト
min	入力最小値	数値項目で有効
max	入力最大値	数値項目で有効
precision	小数点以下桁数	precision:NN (NNは小数点以下の桁数) 数値項目で有効
items	選択肢配列	items:items_array (items_arrayは静的変数の配列データ) <例> 　var items_array = [ 　　{id:1, text:"text1"}, 　　{id:2, text:"text2"}, 　　{id:3, text:"text3"} 　] list、combo、select で有効
style	セルのスタイル	<td> タグに追加するスタイル
format	日付セルの書式	<例> format:yyyy.mm.dd

この editable を使った簡単な例を以下に示します。

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid - editable</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 600px; height: 240px;"></div>
  <br>
  <button class="w2ui-btn" onclick="showChanged()">変更データ表示</button>
<script>
//  性別データ
var arrSex = [ {id:1, text:"男性"}, {id:2, text:"女性"} ];
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columns: [
      { field: 'recid' , caption: 'ID'      , size: '50px'  , attr: "align=center", frozen: true },
      { field: 'check' , caption: '対象'    , size: '60px'  , 
            editable: { type:"checkbox" }
      },
      { field: 'name'  , caption: '名前'    , size: '100px' , 
            editable: { type:"text" }
      },
      { field: 'age'   , caption: '年齢'    , size: '60px'  , 
            editable: { type:"int", min: 10, max: 99 }
      },
      { field: 'sex'   , caption: '性別'    , size: '100px' , 
            editable: { type:"select", items: arrSex  } ,
            render: function (record, index, col_index) {
                    var html = '';
                    for (var idx in arrSex) {
                        if (arrSex[idx].id == this.getCellValue(index, col_index)) {
                            html = arrSex[idx].text;
                        }
                    }
                    return html;
            }
      },
      { field: 'birth' , caption: '生年月日', size: '100px' , render: 'date:yyyy/mm/dd',
            editable: { type:"date", format: "yyyy/mm/dd" }
      },
      { field: "height", caption: "身長"    , size: "50px"  , render : "float:1", 
            editable: { type:"float", min: 1, max: 999.9 }
      },
      { field: "weight", caption: "体重"    , size: "50px"  , render : "float:1", 
            editable: { type:"float", min: 1, max: 999.9 }
      }
    ],
    records: [
      { recid:1, check:true , name:"田中太郎", age:"35", sex:"1", birth:"1985/03/01", height:"170.1", weight:"48.5" },
      { recid:2, check:true , name:"田中花子", age:"30", sex:"2", birth:"1990/03/12", height:"160.0", weight:"45.0" },
      { recid:3, check:true , name:"山田一郎", age:"20", sex:"1", birth:"2000/03/13", height:"165.1", weight:"58.5" },
      { recid:4, check:false, name:"山田二郎", age:"18", sex:"1", birth:"2002/03/24", height:"172.5", weight:"68.2" },
      { recid:5, check:true , name:"山田良子", age:"25", sex:"2", birth:"1995/03/25", height:"158.0", weight:"47.0" },
      { recid:6, check:false, name:"山本桃子", age:"40", sex:"2", birth:"1980/03/26", height:"162.2", weight:"49.5" },
      { recid:7, check:true , name:"山本次郎", age:"44", sex:"1", birth:"1976/03/27", height:"168.5", weight:"62.1" },
      { recid:8, check:true , name:"阿部博"  , age:"48", sex:"1", birth:"1972/03/28", height:"180.4", weight:"75.2" }
    ]
  });  
});

function showChanged() {
    console.log(w2ui['grid'].getChanges()); 
    w2alert('コンソールに変更データを表示しました');
}
</script>
</body>
</html>

※「生年月日」の render の書式と editable 内の書式（format）を同じにしないと、カレンダーで変更後の表示がおかしくなります。
これを実行させると以下の様な表示になります。（結構簡単にグリッドによるデータ表示が実現できると思います）

このグリッドの中で６行目の対象チェックボックスと性別、７行目の性別を変更し、変更データをコンソールに表示させてみると以下の様に配列データとして取得できます。尚、性別データは文字列では無く ID の値が返されるのが分かります。

この性別のセルで注目点は render の関数宣言です。関数の引数としては以下の様になっています。

render: function(record, [index], [column_index]) { }
<引数>
・record：対象レコード
・index ：対象レコードのインデックス値
・column_index：対象レコード内のカラムインデックス値

性別のセルの処理では現在のセルの値が arrSex の配列の中で同じ id のものが見つかった時に対応する text の値を表示させています。

JavaScript
0CM