実際のアプリケーションの UI 部分のみ取り出して、ブラウザでテストできるように構成しました。特に jQuery の ajax を用いたテンプレートとして流用できると思います。 初回の キー入力部分では、$.get で GET 読み込みを行っています。第二パスである更新時は $.ajax で POST を使用して送信しています。( POST では FormData オブジェクトを使用しています ) 更新確認には、bootstrap のダイアログを使用して、一つのフォームで二つのデータ送信がコードとして別々に読めるようになっています。 実際の FORM の中に入力フィールドを配置して、HTML のチェック機能を利用できるようにしています。ブラウザの送信は、preventDefault() でキャンセルして、ajax でデータを送信するスタイルとなっています。 ※ submit_type == "pass1" は、第一パス(キーの送信)です
<!DOCTYPE html>
<html>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<style>
body {
margin: 20px;
}
</style>
<script>
// ▼ このコードのみでのテスト用変数
var submit_type = "pass1";
//var submit_type = "pass2";
$(function(){
if ( submit_type == "pass1" ) {
$("[name^='fld_'],#ref_btn").prop('disabled', true);
}
if ( submit_type == "pass2" ) {
$("input[name='key_code']").prop('readonly', true);
$("[name^='fld_'],#ref_btn").prop('disabled', false);
}
// **************************************
// 確認処理
// **************************************
$("#base").on( "submit", function(event){
// 更新確認ダイアログの表示の為、本来の送信処理はキャンセル
event.preventDefault();
// 入力したコードよりデータを取得する
if ( submit_type == "pass1" ) {
console.log("key_code");
console.log(key_code);
// Ajax で GET する
$.get({
url: "app-get.php",
cache: false,
data: { "key_code" : $(this).find("input[name='key_code']" ).val() }
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
if ( data.status == 0 ) {
// *************************************
// コード部分を入力不可に設定
// *************************************
$("input[name='key_code']").prop('readonly', true);
// *************************************
// 明細部分を入力可能に変更
// *************************************
$("[name^='fld_'],#ref_btn").prop('disabled', false);
// 氏名
$("input[name='fld_name']").val( data.row["氏名"] );
// フリガナ
$("input[name='fld_kana']").val( data.row["フリガナ"] );
// 給与
$("input[name='fld_kyuyo']").val( data.row["給与"] );
// 所属
$("input[name='fld_syozoku']").val( data.row["所属"] );
$("#ref_syozoku").text( data.row["所属名"] );
// 性別
$("select[name='fld_seibetu']").val( data.row["性別"] );
// 生年月日
$("input[name='fld_birth']").val( data.row["生年月日"].substring(0,10) );
// フォーカスを設定
$("input[name='fld_name']").focus();
// コードをローカルストレージに保存
localStorage["code"] = parent.$("input[name='key_code']").val();
// エラーが無ければ次の処理を行えるようにする
submit_type = "pass2";
}
// 対象データが無い場合
if ( data.status == 1 ) {
// エラーメッセージを表示
toastr.error("入力された社員コードは存在しません");
// エラー部分にフォーカスをセット
$("input[name='key_code']").focus();
// エラーが発生したフィールド内の文字列を選択する
$("input[name='key_code']").select();
}
if ( data.status == -1 ) {
// エラーメッセージを表示
toastr.error("システムエラーです : SQL にあやまりがあります");
}
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
// エラーメッセージを表示
toastr.error("システムエラーです");
})
// 常に実行
.always(function() {
})
;
}
// Bootstrap の モーダルダイアログの表示
if ( submit_type == "pass2" ) {
$("#update_check").modal();
}
});
// **************************************
// Bootstrap OK ボタン
// ※ ここで第二パスの送信処理を確定
// **************************************
$("#data_update").on("click", function(){
// Ajax で POSTする
// 新規送信用オブジェクト
var formData = new FormData();
// ファイルオブジェクト
formData.append("key_code", $("input[name='key_code']").val() );
formData.append("fld_name", $("input[name='fld_name']").val() );
formData.append("fld_kana", $("input[name='fld_kana']").val() );
formData.append("fld_seibetu", $("select[name='fld_seibetu']").val() );
formData.append("fld_birth", $("input[name='fld_birth']").val() );
formData.append("fld_kyuyo", $("input[name='fld_kyuyo']").val() );
formData.append("fld_syozoku", $("input[name='fld_syozoku']").val() );
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "app-update.php",
type: "POST",
data: formData,
processData: false, // jQuery がデータを処理しないよう指定
contentType: false // jQuery が contentType を設定しないよう指定
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
// *************************************
// コードを入力可に設定
// *************************************
$("input[name='key_code']").prop('readonly', false);
// *************************************
// 明細部分を入力不可に変更
// *************************************
$("[name^='fld_'],#ref_btn")
.prop('disabled', true);
// 氏名のクリア
$("input[name='fld_name']").val( "" );
// フリガナのクリア
$("input[name='fld_kana']").val( "" );
// 給与のクリア
$("input[name='fld_kyuyo']").val( "" );
// 所属のクリア
$("input[name='fld_syozoku']").val( "" );
$("#ref_syozoku").text("");
// 性別の初期化
$("select[name='fld_seibetu']").val( "0" );
// 生年月日の初期化
$("input[name='fld_birth']").val( "" );
// フォーカスを設定
$("input[name='key_code']").focus();
// エラーが無ければ次の処理を行えるようにする
submit_type = "pass1";
toastr.info("更新されました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "code:" + jqXHR.status );
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
})
.always(function() {
})
;
});
});
</script>
</head>
<body>
<div style='float:right'>
<input
id="action_reset"
type="button"
value="リセット"
class="btn btn-danger mr-3"
onclick="location.href='syain-upd.html'">
<input
id="action_copy"
type="submit"
value="送信"
class="btn btn-primary"
onclick="$('#action').click();">
</div>
<form id="base" method="post" target="_self" style='clear:both'>
<div>
<div class="left">社員コード</div>
<div class="right">
<input
type="text"
id="key_code"
name="key_code"
class="unit"
value="" required >
</div>
</div>
<div>
<div class="left">氏名</div>
<div class="right">
<input
type="text"
id="fld_name"
name="fld_name"
class="unit"
value="" required >
</div>
</div>
<div>
<div class="left">フリガナ</div>
<div class="right">
<input
type="text"
id="fld_kana"
name="fld_kana"
class="unit"
value="" >
</div>
</div>
<div>
<div class="left">給与</div>
<div class="right">
<input
type="text"
id="fld_kyuyo"
name="fld_kyuyo"
class="unit"
value="" required maxlength='7' pattern='\d+' >
</div>
</div>
<div>
<div class="left">所属</div>
<div class="right">
<div class="input-group">
<input
type="text"
id="fld_syozoku"
name="fld_syozoku"
class="unit"
value=""
maxlength="4">
</div>
</div>
</div>
<div>
<div class="left">性別</div>
<div class="right">
<select class="unit" name="fld_seibetu" id="fld_seibetu" >
<option value="0">男性</option>
<option value="1">女性</option>
</select>
</div>
</div>
<div>
<div class="left">生年月日</div>
<div class="right">
<div class="input-group">
<input type="text" id="fld_birth" name="fld_birth">
<button
type="button"
class="btn"
onclick='$(this).prev().val("");'>×</button>
</div>
</div>
</div>
<div>
<input
id="action"
type="submit"
value="送信"
class="btn btn-primary unit mt-5"
title="mt5 は margin-top の略で 1〜5">
</div>
</form>
<div class="modal fade" id="update_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">確認</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
更新しますか?
</div>
<div class="modal-footer">
<button id="data_update" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>
このページのPDF
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
