デモ( ログインはハンバーガメニューより選んで下さい )
※ 実際の更新はできません
新規登録テンプレートを元に、クラスメンバを修正する２会話のアプリケーションのサンプルです。新規登録と違う所は殆ど無く、データの存在チェックで内容を表示しています。
// データベース参照
var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );
// **************************************
// データ存在チェック
// **************************************
myFirebaseRef.once('value',
function(snapshot) {
if ( !snapshot.exists() ) {
options.error( "データが存在しません" );
return;
}
// 第二会話へ変更
options.pass2();
// フォーカス
if ( !$.isMobile ) {
$("#row2_fld").focus();
}
var user_data = snapshot.val();
$("#row2_fld").val(user_data.name);
$("#row3_fld").val(user_data.furi);
$("#row4_fld").val(user_data.kyuyo);
$("#row5_fld").val(user_data.sex);
$("#row6_fld").prop( "checked", user_data.kanri );
},
function(error){
$(".result").each(function(){
$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
});
options.error( "Firebase エラーです" );
console.dir(error);
}
);
※ データの更新は、新規も修正も同じです。 左の画像は、toastr.js で表示されたエラーメッセージを表示したところですが、PC の場合は、ページ上部の中央に表示されます。 右の画像は、HTML の pattern 属性によるチェックが行われ、メッセージが表示されています。 データフォーマットソースコード ダウンロードパッケージの中は、php としてテンプレート化されています。メインのコードは、view_main.php で、index.php から読み込まれます。
<?php
// *************************************
// セッション変数
// *************************************
session_start();
// *************************************
// ブラウザに対する指示
// *************************************
header( "Content-Type: text/html; charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "x-ua-compatible: IE=11" );
require_once("view_main.php");
?>
view_main.php
<?php
// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "２会話・テンプレート(修正)";
$GLOBALS['comment'] = 'ようこそ jQuery + Bootstrap(css) + mmenu + Firebase';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<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">
<title><?= $GLOBALS['title'] ?></title>
<?php require_once('../std/libs.php') ?>
<link rel="stylesheet" href="../std/mmenu.css">
<link rel="stylesheet" href="../std/basic.css">
<?php require_once('../std/firebase.php') ?>
<style>
.fields {
width: 90px;
font-size: 12px;
vertical-align: middle!important;
}
legend {
font-size: 18px;
padding-left: 6px;
}
</style>
<script>
<?php require_once('../std/js.php') ?>
var options = {
key : { title :"クラス", css : { width : "100px" }, attr : { pattern : "[0-9]+", type: "tel" } },
row2 : { title : "氏名" },
row3 : { title : "フリガナ" },
row4 : { title : "給与", attr : { pattern : "[0-9]+", type: "tel" } },
row5 : { title : "性別", css : { height : "40px" } },
row6 : { title : "管理者", label : "部下の有無" },
row_last : { title :"メッセージ" },
erow1 : { title : "code" },
erow2 : { title : "message" },
curbtn: "",
pass1 : function(){
// 第一会話へ変更
$("#form_head").prop("disabled", false );
$("#form_body").prop("disabled", true );
},
pass2 : function(){
// 第二会話へ変更
$("#form_head").prop("disabled", true );
$("#form_body").prop("disabled", false );
},
clear : function(){
// 全てクリア
$(".fields").next().find("input[type='text'],input[type='tel']").val("");
$(".fields").next().find("input[type='checkbox']").prop("checked", false);
$(".fields").next().find("select").prop("selectedIndex", 0);
},
error : function(message){
$("#row_last").next().text( message );
toastr.error(message);
},
info : function(message){
$("#row_last").next().text( message );
toastr.success(message);
}
};
$(function(){
// 1) options による行とフィールドの設定
// 2) Bootstrap 用 form-control クラスの追加
$(".fields").each(function(){
if ( options[ $(this).prop("id") ] ) {
$(this).text( options[ $(this).prop("id") ].title );
// 個別 css
if ( options[ $(this).prop("id") ].css ) {
$(this).next().find("input,select").css( options[ $(this).prop("id") ].css );
}
// 入力チェック用属性
if ( options[ $(this).prop("id") ].attr ) {
$(this).next().find("input,select").attr( options[ $(this).prop("id") ].attr );
}
// 行内個別 ラベル
if ( options[ $(this).prop("id") ].label ) {
$(this).next().find("label").text( options[ $(this).prop("id") ].label );
}
}
// Bootstrap form
$(this).next().find("input,select").addClass("form-control");
});
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css("visibility","visible");
// 第一会話
options.pass1();
// 初期フォーカス
setTimeout( function(){$('#key_fld').focus();}, 100 );
// 確認処理
$("#frm").submit( function(event){
// 本来の送信処理はキャンセル
event.preventDefault();
// エラーメッセージエリアをクリア
$(".error").next().text( "" );
// 確認ボタン
if ( options.curbtn == "button_head" ) {
// **************************************
// 第一会話入力チェック
// **************************************
if ( $("#key_fld").val().trim() == "" ) {
options.error( options['key'].title + " を入力して下さい" );
return;
}
// **************************************
// Firebase ログインチェック
// **************************************
user = firebase.auth().currentUser;
if ( user == null ) {
options.error( "ログインされていません" );
return;
}
// データベース参照
var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );
// **************************************
// データ存在チェック
// **************************************
myFirebaseRef.once('value',
function(snapshot) {
if ( !snapshot.exists() ) {
options.error( "データが存在しません" );
return;
}
// 第二会話へ変更
options.pass2();
// フォーカス
if ( !$.isMobile ) {
$("#row2_fld").focus();
}
var user_data = snapshot.val();
$("#row2_fld").val(user_data.name);
$("#row3_fld").val(user_data.furi);
$("#row4_fld").val(user_data.kyuyo);
$("#row5_fld").val(user_data.sex);
$("#row6_fld").prop( "checked", user_data.kanri );
},
function(error){
$(".result").each(function(){
$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
});
options.error( "Firebase エラーです" );
console.dir(error);
}
);
}
// 更新ボタン
if ( options.curbtn == "button_body" ) {
// **************************************
// 第ニ会話入力チェック
// **************************************
if ( $("#row2_fld").val().trim() == "" ) {
options.error( options['row2'].title + " を入力して下さい" );
return;
}
// **************************************
// Firebase ログインチェック
// **************************************
user = firebase.auth().currentUser;
if ( user == null ) {
options.error( "ログインされていません" );
alert("第一会話へ移動します");
// 第一会話へ変更
options.pass1();
return;
}
// データベース参照
var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );
// **************************************
// データ存在チェック
// **************************************
myFirebaseRef.once('value', function(snapshot) {
if ( !snapshot.exists() ) {
options.error( "データが存在しません" );
alert("第一会話へ移動します");
// 第一会話へ変更
options.pass1();
return;
}
if ( !confirm("更新してよろしいですか?") ) {
return false;
}
// **************************************
// 更新
// **************************************
// 更新用 JSON
var update_data = {
"code" : $("#key_fld").val(),
"name" : $("#row2_fld").val(),
"furi" : $("#row3_fld").val(),
"kyuyo" : $("#row4_fld").val(),
"sex" : $("#row5_fld").val(),
"kanri" : $("#row6_fld").prop("checked")
}
// 更新
myFirebaseRef.set(update_data).then(
function(){
options.info( "更新に成功しました" );
// 第一会話へ変更
options.pass1();
// 全てクリア
options.clear();
// フォーカス
$("#key_fld").focus();
},
function(error){
$(".result").each(function(){
$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
});
options.error( "Firebase エラーです" );
console.dir(error);
}
);
});
}
} );
// **************************************
// mmenu
// **************************************
$("#mmenu_left").mmenu({
navbar: {
title: "メニュー"
},
offCanvas: {
position : "left",
zposition : "next"
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<script>
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css( "visibility", "hidden" );
</script>
<div id="head">
<?php require_once('../std/view_hamburger.php') ?>
<div id="title"><?= $GLOBALS['title'] ?></div>
</div>
<div id="body">
<form id="frm" class="form-inline">
<fieldset id="form_head">
<table class="table table-condensed">
<tr>
<td class="fields" id="key"></td>
<td>
<div class="input-group">
<input type="text" id="key_fld" name="key_fld">
<button id="button_head" type="submit" class="btn btn-primary btn-sm m-l" onclick="options.curbtn=this.id">確認</button>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset id="form_body">
<table class="table table-condensed">
<tr>
<td class="fields" id="row2"></td>
<td>
<input type="text" id="row2_fld" name="row2_fld">
</td>
</tr>
<tr>
<td class="fields" id="row3"></td>
<td>
<input type="text" id="row3_fld" name="row3_fld">
</td>
</tr>
<tr>
<td class="fields" id="row4"></td>
<td>
<input type="text" id="row4_fld" name="row4_fld">
</td>
</tr>
<tr>
<td class="fields" id="row5"></td>
<td>
<select name="row5_fld" id="row5_fld">
<option value="0">男性</option>
<option value="1">女性</option>
</select>
</td>
</tr>
<tr>
<td class="fields" id="row6"></td>
<td>
<div class="input-group">
<label for="row6_fld">有り無し</label>
<input
type="checkbox"
id="row6_fld"
name="row6_fld">
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<button id="button_body" type="submit" class="btn btn-primary btn-sm" onclick="options.curbtn=this.id">更新</button>
<button
type="button"
class="btn btn-primary btn-warning btn-sm m-l-lg"
value="キャンセル"
onclick='location="index.php"'>キャンセル</button>
</td>
</tr>
<tr>
<td class="fields error" id="row_last"></td>
<td></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Firebase エラー</legend>
<table class="table table-condensed">
<tr><td class="fields result error" id="erow1"></td><td></td></tr>
<tr><td class="fields result error" id="erow2"></td><td></td></tr>
</table>
</fieldset>
</form>
</div>
<div id="comment">
<?= $GLOBALS['comment'] ?>
</div>
</div>
<?php require_once('unit_menu.php') ?>
</body>
</html>
minimum-scale=1.0 maximum-scale=1.0 user-scalable=no は、スマホで mmenu を表示する場合に必要です。
25行目の width: 90px; で、フィールドのタイトル幅が決定します。
options.curbtn は、submit ボタンが submit 前に click イベントで自身の id をセットし、どのボタンで submit されたか判定する為にあります。(314行 と 371行)
スマホでのロード時のちらつきを、$("#wrapper").css( "visibility", "hidden" ); で、画面表示を消していますが、JavaScript が無効の場合に画面がなくならないように、JS で非表示にしています。元々、addClass("form-control"); を後から jQuery で設定する為に発生するちらつきですが、画面定義に一様にクラス設定してしまうと汎用性に欠けると思ったのでそうしました。
関連する記事
jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート
jQuery + Bootstrap(css) + mmenu : Firebase 新規登録テンプレート
|
|
【Googleの最新記事】
- Google 共有ドライブの容量の上限について
- Google Classroom は無料の G Suite for Education アカウントが必要
- 教室と一対一のフォルダより新しく登録されたフォルダの中にあるZoom動画ファイルを該当するClassroom の コース内の該当するトピックに登録する
- Google Apps Script : 動画を添付して Classroom の指定のトピックへ課題として投稿する
- Google Classroom のテーマ画像のサイズと既存画像をテーマ画像として使用してみた手順
- Google Chrome でスマホのソースコードをごく普通に表示して利用する
- Gmail に 実行可能なファイルの拡張子を持つファイルを格納した zip 書庫は送れません
- Gmail で添付できないファイルをエクスプローラで検索する為の文字列
- jQuery で既存 table より Firebase Database のデータを作成する
- jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート
- jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート
- Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法
- Google サイト内検索の FORM 要素による設置
- ブラウザの geolocation で Google MAP に現在地を表示。ライブラリでさらに詳細情報。API の geocoder で名称・住所から Google MAP を表示して、ライブラリで..
- Google+ に投稿するテキスト内の文字列を太字(ボールド)にしたりイタリックにしたりする方法
- Google の Plus API を使って Google+ 投稿データを jQuery UI のアコーディオン(accordion)で表示する
- Google の タスク API(ToDoリスト) を使ってタスクリストとタスクのタイトルを jQuery のプラグインでメニュー化する
- Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る( 添付ファイル付き )
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る
