前回は簡単な例を示してフォームコンポーネントである w2ui.form ついて説明をしました。
今回はフォームオブジェクトの actions プロパティについて説明をしていきます。
actions は各ボタン毎のプロパティ名と関数宣言をオブジェクト配列として宣言を行います。
[ボタン名プロパティ]は HTML の中の button タグの name 属性との一致が必要です。
//[actions]プロパティの宣言のみ抜粋
actions: {
[ボタン名プロパティ１]: function () {
[関数宣言１];
},
[ボタン名プロパティ２]: function () {
[関数宣言２];
},
[ボタン名プロパティ３]: function () {
[関数宣言３];
},
...
}
前回の記事から例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
<div id="testForm" style="width: 500px">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>名前:</label>
<div>
<input name="name" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>住所:</label>
<div>
<input name="address" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>備考:</label>
<div>
<textarea name="comment" style="width: 300px; height: 50px;"></textarea>
</div>
</div>
</div>
<div class="w2ui-buttons">
<input type="button" value="リセット" name="reset"/>
<input type="button" value="保存" name="save"/>
</div>
</div>
</body>
<script>
$(function () {
$('#testForm').w2form({
name : 'testForm',
header : 'Test Form',
fields : [
{ field: 'name' , type: 'text', required: true },
{ field: 'address', type: 'text', required: true },
{ field: 'comment', type: 'text'}
],
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save();
}
}
});
});
</script>
</html>
「リセット」ボタンの処理はフォームオブジェクトの actions プロパティの中の reset プロパティで宣言された関数がコールされます。 また、「保存」ボタンの処理は actions プロパティの中の save プロパティで宣言された関数がコールされます。
reset プロパティの関数でフォームオブジェクトの clear メソッドをコールしています。
//[clear]メソッドのコール方法
clear( [ field1, field2, ... ] )
・field1, field2, ... ：クリアされるフィールドを指定
・引数が無い場合 ：全てのフィールドがクリアされる
更に record オブジェクトがクリアされ、 recid が「0」クリア
save プロパティの関数でフォームオブジェクトの save メソッドをコールしています。
//[save]メソッドのコール方法
save( [ postData ] , [ callBack ] )
・postData ：全フィールドのデータの他に追加されるデータ宣言
・callBack ：「save」処理されたプログラムから戻った時にコールされる関数宣言
(通常は PHP でのプログラムを想定していますが、
callBack 関数の引数に PHP からの戻り値が返される様にします)
上記の HTML ファイルをロードしデータ入力後「保存」ボタンをクリックすると何も起こりませんが、「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。
「ERROR: Form cannot be saved because no url is defined.」のメッセージで save 用の url が宣言されていないエラーが表示されます。
そのため url を宣言してやらないといけないのですが、以下の様に行います。
//フォームオブジェクトの[url]プロパティの宣言方法
url : {
save : save用のPHPプログラムのurl,
get : get用のPHPプログラムのurl,
delete : delete用のPHPプログラムのurl,
},
・「save」「get」「delete」はそれぞれ処理用のプロパティで、処理される「url」を宣言
そこで「save」を宣言する様にしたソースを示します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
<div id="testForm" style="width: 500px">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>名前:</label>
<div>
<input name="name" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>住所:</label>
<div>
<input name="address" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>備考:</label>
<div>
<textarea name="comment" style="width: 300px; height: 50px;"></textarea>
</div>
</div>
</div>
<div class="w2ui-buttons">
<input type="button" value="リセット" name="reset"/>
<input type="button" value="保存" name="save"/>
</div>
</div>
</body>
<script>
$(function () {
$('#testForm').w2form({
name : 'testForm',
header : 'Test Form',
fields : [
{ field: 'name' , type: 'text', required: true },
{ field: 'address', type: 'text', required: true },
{ field: 'comment', type: 'text'}
],
url : {
save : 'form-act-2.php',
},
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save();
}
}
});
});
</script>
</html>
なお「save」に宣言された PHP プログラムはテストとして、文字列をテキストファイルに書き出すだけの処理です。 （動作したかを確認するだけですので、簡単なものにしました。）
<?php
// 固定の文字列を「form-act-2.txt」ファイルに登録
file_put_contents("form-act-2.txt", "0123456789\n");
exit();
?>
上記の HTML ファイルをロードし各データを入力後「保存」ボタンをクリックし「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。 （PHP のプログラムで「form-act-2.txt」ファイルは作成されました。）
「コンソール」には以下のエラーが表示されます。
ERROR: server communication failed. The server should return
Object { status: "success" } OR Object { status: "error", message: "error message"
, instead the AJAX request produced this:
Object { status: "parsererror", error: SyntaxError, rawResponseText: "" }
w2ui.form では AJAX でこの「save」の url を処理していて、 処理結果として「status」と「message」を返す必要がある様です。
それでは、先ほどの PHP プログラムをエラーを返すだけのものに変更してみます。
<?php
header('Content-type: application/json');
print json_encode(array("status"=>"error", "message"=>"エラー発生!!"));
?>
再度、「保存」ボタンをクリックすると以下の様な表示になります。
なお「エラー発生!!」のメッセージは自動で表示されます。
再度、先ほどの PHP プログラムを成功を返すだけのものに変更してみます。
<?php
header('Content-type: application/json');
print json_encode(array("status"=>"success"));
?>
再度、「保存」ボタンをクリックするとチラッとメッセージが表示される様ですがそのままなにも起こりません。 このままでは、成功したのかがはっきりしませんので、その対応を行います。
フォームオブジェクトの actions プロパティの中の save プロパティで宣言された関数の中の save メソッドを以下の様に変更します。
■save プロパティで宣言された関数の中の save メソッドを宣言
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
<div id="testForm" style="width: 500px">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>名前:</label>
<div>
<input name="name" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>住所:</label>
<div>
<input name="address" maxlength="100" size="40"/>
</div>
</div>
<div class="w2ui-field">
<label>備考:</label>
<div>
<textarea name="comment" style="width: 300px; height: 50px;"></textarea>
</div>
</div>
</div>
<div class="w2ui-buttons">
<input type="button" value="リセット" name="reset"/>
<input type="button" value="保存" name="save"/>
</div>
</div>
</body>
<script>
$(function () {
$('#testForm').w2form({
name : 'testForm',
header : 'Test Form',
fields : [
{ field: 'name' , type: 'text', required: true },
{ field: 'address', type: 'text', required: true },
{ field: 'comment', type: 'text'}
],
url : {
save : 'form-act-2.php',
},
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save({}, function (data) {
if (data.status === "success") {
alert("OK !!");
return;
}
else if (data.status === "error") {
console.log("ERROR: "+ data.message);
return;
}
});
}
}
});
});
</script>
</html>
これを実行させると以下の様な表示になります。 フォームの中央に薄く「Saving...」の表示が在ることがわかります。（”現在処理中”的な表示でしょうか）
以上、データ登録の簡単な処理方法を示しましたが、実際の場合にはデータ登録の処理が必要になりますが、今回はここまでとします。
昨日に続いてデータの処理に付いて追記します。
■save メソッドで渡されるデータについて
上記の HTML ファイルで「保存」ボタンをクリックした時に save メソッドで渡されるデータは HTTP の POST データとして以下の様な感じで渡されます。{
cmd : 'save', //コマンドとしての「save」
name : フォーム名,
recid : レコードID, //設定しなければ「0」
record : { //レコードデータ
field1 : value1, //フィールド1データ
...
fieldN : valueN //フィールドNデータ
}
}
それでは、先ほどの PHP プログラムにHTTPリクエスト変数を調べる様に変更してみます。 <?php
// HTTP リクエスト変数
$strREQ = print_r($_REQUEST, true);
file_put_contents("form-act-2.txt", $strREQ);
// 成功を返す
header('Content-type: application/json');
print json_encode(array("status"=>"success", "message"=>"OK!!"));
?>
結果「form-act-2.txt」は以下の様に JSON データの形式の内容になります。（[request] => は1行で出力されていたのですが、見やすく改行しました）
Array
(
[request] => {
"cmd":"save",
"recid":0,
"name":"testForm",
"record":{
"name":"田中太郎",
"address":"東京都△△区",
"comment":"あああああああああああああああ"
}
}
)
データ登録処理としてはデータベースのテーブル等に登録することになると思いますが $_REQUEST["request"] の JSON データを連想配列に変換して扱うことになります。
テスト PHP プログラムとしては以下の様な感じになると思います。
<?php
// JSON データ変換
$arrREQ = json_decode($_REQUEST["request"], true);
// レコードデータ配列のみ
$arrRec = $arrREQ["record"];
$strRec = "name :" . $arrRec["name"] . "\n";
$strRec.= "address:" . $arrRec["address"] . "\n";
$strRec.= "comment:" . $arrRec["comment"] . "\n";
file_put_contents("form-act-2.txt", $strRec);
// 成功を返す
header('Content-type: application/json');
print json_encode(array("status"=>"success", "message"=>"OK!!"));
?>
関連する記事
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録２（changesデータにレコードを反映し save）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定（render）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定（editable）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定２（editable, selectType, onCopy, onPaste）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定３（editable, onKeyDown, onCopy, onPaste）
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化（タイトルの2行表示）
PR
コメント