SQLの窓

2018年02月08日


jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート

実際のアプリケーションの UI 部分のみ取り出して、ブラウザでテストできるように構成しました。特に jQuery の ajax を用いたテンプレートとして流用できると思います。

初回の キー入力部分では、$.get で GET 読み込みを行っています。第二パスである更新時は $.ajax で POST を使用して送信しています。( POST では FormData オブジェクトを使用しています )

更新確認には、bootstrap のダイアログを使用して、一つのフォームで二つのデータ送信がコードとして別々に読めるようになっています。

実際の FORM の中に入力フィールドを配置して、HTML のチェック機能を利用できるようにしています。ブラウザの送信は、preventDefault() でキャンセルして、ajax でデータを送信するスタイルとなっています。

※ submit_type == "pass1" は、第一パス(キーの送信)です
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>

<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>


<input
	id="action_copy"
	type="submit"
	value="送信"
	class="btn btn-primary"
	onclick="$('#action').click();"
	style='float:right'>

<input
	id="action_reset"
	type="button"
	value="リセット"
	class="btn btn-danger mr-3"
	onclick="location.href='/access-1129/app/syain-upd/syain.php'"
	style='float:right'>

<form id="base" method="post" target="_self">
	<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 form-control"
					value=""
					maxlength="4"
					readonly>
		
				<span class="ml-2 pl-2 pt-2" id="ref_syozoku"></span>

				<input class="ml-2" type="button" value="参照" id="ref_btn">
			</div>
		</div>
	</div>
 
	<div>
		<div class="left">性別</div>
		<div class="right">
			<select class="unit form-control" 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 readonly type="text" id="fld_birth" name="fld_birth">
				<button
					type="button"
					class="btn"
					onclick='$(this).prev().val("");'>×</button>
			</div>
		</div>
	</div>

	<div style='height:60px'>
		<div class="left"><label for="fld_skbn">正社員</label></div>
		<div class="right">
			<input type="checkbox" id="fld_skbn" name="fld_skbn" class="unit form-control" value="1" style="width: 1rem;margin-top: 14px;height 1rem">
		</div>
	</div>

	<div>
		<div class="left">年代</div>
		<div class="right">
			<div class="input-group">
				<label for="fld_nendai_a" class="mt-2">20代</label>
				<input type="radio" id="fld_nendai_a" name="fld_nendai" class="ml-1 mr-3" value="A" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_b" class="mt-2">30代</label>
				<input type="radio" id="fld_nendai_b" name="fld_nendai" class="ml-1 mr-3" value="B" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_c"  class="mt-2">40代</label>
				<input type="radio" id="fld_nendai_c" name="fld_nendai" class="ml-1 mr-3" value="C" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_d"  class="mt-2">50代</label>
				<input type="radio" id="fld_nendai_d" name="fld_nendai" class="ml-1" value="D" style="width: 1rem;margin-top: 0.75rem;">
			</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">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">確認</h4>
			</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>





【jQueryの最新記事】
posted by lightbox at 2018-02-08 10:03 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり