jQuery UI appendGridの内容の保持について

http://appendgrid.apphb.com/で紹介されているappendGridをコンタクトフォームに埋め込んでいます。

appendGridのデモ。
http://appendgrid.apphb.com/Demo

入力した内容をメールで送信すると云う寸法ですが、メールの送信自体は問題無いのですが
入力した内容をCookieで保持したいのですが方法が分かりません。
名前や住所等を必須項目にしておりますが、必須項目を空白のまま送信しようとした場合、
送信せずにページはそのままで注意を表示するようになっていますが、現状はappendGridに入力した文字が消えてしまいます。
これを短時間でも良いので保持できればと思っております。
よろしくお願いします。

実際のコードは以下です。

lang
1	$('#order').appendGrid({
2		caption: '',
3		initRows: 1,
4		columns: [
5			{ name: '品番', display: '品番', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
6			{ name: '品名', display: '品名', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '250px'} },
7			{ name: '色', display: '色', type: 'text', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '100px'} },
8			{ name: 'サイズ', display: 'サイズ', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
9			{ name: '数量', display: '数量', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
10		],
11
12	hideButtons: {
13		moveUp: true,
14		moveDown:true,
15		removeLast: true
16	}
17
18	});
19
20});

行動規範の内容に同意します

回答5件

ベストアンサー

クッキー対応版
F５だけ不具合があります。カラムの上下移動にも対応しています。
コピペして一切修正せずに、ローカルで動作確認完了したら、本番に反映してください。

lang
1<html>
2<head>
3<meta http-equiv="content-type" content="text/html;charset=utf-8" />
4<!--jQuery UI Core, Widget and Button components are mandatory-->
5
6<!--
7    jQuery-UI download:
8        http://jqueryui.com/download/
9    jQUery-Cookie download:
10        https://github.com/carhartl/jquery-cookie/releases
11    jQuery 1.11.2 download
12        http://jquery.com/download/
13		Download the compressed, production jQuery 1.11.2
14	
15	Google Chrome で動作しない件について
16		http://goweb.jp/blog/2011/05/27/1497/
17		chrome はローカル環境では、クッキーを生成しないとか。
18	
19	動作確認ブラウザ：
20		windows IE9
21		windows Firefox 20.0.1（ちょっと古いですね）
22		mac osx Safari
23	動作確認ができていないブラウザ
24		mac osx Chrome
25		windows 版はインストールしてないので知らず
26		
27    
28	
29
30-->
31<link href="jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"/>
32<link href="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.css" rel="stylesheet"/>
33<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
34
35<script type="text/javascript" src="jquery.cookie.js"></script>
36
37<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
38<script type="text/javascript" src="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.js"></script>
39
40
41<script type="text/javascript">
42$.cookie.raw = true;
43$(function () {
44	
45	var tblSelector = "#order";
46
47	var initData = restoreCookies2JsonData();
48
49	// ここからappendGrid 初期化
50	$(tblSelector).appendGrid({
51		caption:'',
52		initRows:1,
53		columns:[
54			{name:'品番',display:'品番',type:'text',ctrlAttr:{maxlength:100},ctrlCss:{width:'100px'}},
55			{name:'品名',display:'品名',type:'text',ctrlAttr:{maxlength:100},ctrlCss:{width:'250px'}},
56			{name:'色',display:'色',type:'text',ctrlAttr:{maxlength:20},ctrlCss:{width:'100px'}},
57			{name:'サイズ',display:'サイズ',type:'text',ctrlAttr:{maxlength:4},ctrlCss:{width:'40px'}},
58			{name:'数量',display:'数量',type:'text',ctrlAttr:{maxlength:4},ctrlCss:{width:'40px'}}
59		],
60		hideButtons:{
61			moveUp:true,
62			moveDown:true,
63			removeLast:true
64		}
65	});
66
67/*
68	$(tblSelector).appendGrid({
69        caption: 'My CD Collections',
70        initRows: 1,
71        columns: [
72            { name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
73            { name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
74            { name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
75            { name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} },
76            { name: 'Poster', display: 'With Poster?', type: 'checkbox' },
77            { name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 },
78            { name: 'RecordId', type: 'hidden', value: 0 }
79        ]
80    });
81*/
82	// クッキー保存値があればそれを復帰する
83	if (initData.length > 0) {
84		//alert("initData.length = " + initData.length);
85		
86		$(tblSelector).appendGrid("load", initData);
87	}
88
89    $(tblSelector).on("click blur", "input,select",function() {
90
91		window.saveCookie();
92    });
93
94	window.saveCookie = function() {
95        // シリアライズデータをクッキーに保存
96        $.cookie(
97            "GRID2",
98            $(document.forms[0]).serialize(), 
99            1); // 有効期限（１日）
100	}
101	
102    // 初期化ここまで
103    // クッキーをデコードし、appendGrid("load",data);
104	// を実行する。
105    function restoreCookies2JsonData() {
106	    var cookies = $.cookie("GRID2");
107
108		// このプレフィックスとsuffixの "_x" を除去したものがカラムのラベル名になる
109		var colNamePrefix = $(tblSelector).attr("id") + "_";
110		var rowOrderName = colNamePrefix + "rowOrder";
111
112		// appendGrid "load" 用 JSON データを作成する
113		var initData = [];
114	
115		//alert(cookies);
116		
117		if (cookies) {
118			var map = [];
119			// クッキー登録パラメータを展開する。
120			// 変数名_x "_x" が行番号なので、これを取得して各行のマップリストを作成する
121		    $(cookies.split("&")).each(function() {
122		        var keyVal = this.split("=");
123	    	    var key = decodeURI(keyVal[0]);
124	        	var val = decodeURI(keyVal[1]);
125	        	var rowIndex = key.substring(key.lastIndexOf("_") + 1);
126				
127				if (!map[rowIndex]) {
128					map[rowIndex] = {};
129				}
130				map[rowIndex][key] = val;
131	        });
132		
133			// 並べ替え順序を退避し、配列に変換する
134			var rowOrders = null;
135			if (map["rowOrder"][rowOrderName]) {
136				rowOrders = eval("[" + 
137				map["rowOrder"][rowOrderName].replace(/\%2C/g, ",") + "]");;
138			} else {
139				rowOrders = [];
140			}
141			delete map["rowOrder"];
142			
143			// 仮配列に各行のマップを詰める
144			var tmpArr = [];
145			for (var x in map) {
146				var colMap = [];
147				var entryCount = 0;
148				for (var z in map[x]) {
149					if (z.indexOf(colNamePrefix) == 0) {
150						var colName = z.substring(colNamePrefix.length);
151						colName = colName.substring(0, colName.lastIndexOf("_"));
152						colMap[colName] = map[x][z] || "";
153						entryCount += 1;
154					}
155				}
156				if (entryCount > 0) {
157					tmpArr.push(colMap);
158				//	alert(map2(colMap));
159				}
160			}
161			// rowOrder を適用する
162			// alert(rowOrders);
163			for (var i=0;i < rowOrders.length;i++) {
164				// 行の順序は、１から始まる。３、１、２のとき、
165				// tmpArr は、１、２、３と入っているので、これを
166				// 正しい順序に直す。
167				
168				initData.push(tmpArr[rowOrders[i] - 1]);
169			}
170		}
171		return initData;
172	}
173
174	function map2(m) {
175		var arr = [];
176		for (var a in m) {
177			arr.push(a + "=>" + m[a]);
178			
179		}
180		return arr.join(", ");
181	}
182});
183</script>
184</head>
185<body>
186<form>
187	Mail:<input type="text" name="mailAddress" /><br />
188	Name:<input type="text" name="userName" /><br />
189    <div id="gridOuter">
190        <table id="order"></table>
191    </div>
192    <button onclick="saveCookie();">送信</button>
193</form>
194<hr />
195<p>このサンプルが動作するための必要構成</p>
196<pre>
197   appendGridDemo/
198       jquery-1.11.2.min.js
199       jquery.cookie.js
200           jquery.appendGrid-1.5.1/
201           jquery.appendGrid-1.5.1.css
202           jquery.appendGrid-1.5.1.js
203       jquery-ui-1.11.2.custom/
204           jquery-ui.css
205           jquery-ui.js
206           jquery-ui.min.css
207       demo.html （このHTMLのファイル）
208
209※Mac OSX Safari で動作確認済み
210
211※動作内容
212　一覧のクリック、フォーカスIN でクッキーに入力内容を保存する。
213　送信ボタン（submit）でクッキーに入力内容を保存する。
214　ページリロード（F５）では保存されません。注意！！
215　再表示（初期表示含む）時、クッキーを読み込み、クッキーに前回の値が
216  保存されているときだけ appendGrid の初期データを生成して appendGrid を初期化する
217  クッキー保存日数は１日です。
218  とりあえず、これをコピペして、そのまま動作させてみてください。
219  問題なければ、本番に適用となります。
220  手順１：JavaScript を開始・終了タグまるごとコピーし、本番に貼り付けます。
221  手順２：appendGrid のテーブルタグをフォームの中に入れてください。
222  手順３：appendGrid の id が order ならばこのままでOKです。違う場合は、メソッド戦闘に tblSelector 変数
223  があるのでそれを書き換えてください。
224  手順４：送信ボタン用のメソッドがあるので、送信ボタンに設定してください。
225  jQuery で設定する場合は、
226  $("ボタンID").click(function() { window.saveCookie() });
227  
228  
229  追記： appendGrid のテーブル名が"order" で、	他に "order_xxxx" とかフォーム要素が
230  あるとまずいことになります。
231  
232  以上です。
233  
234</pre>
235
236</body>
237</html>
238
239
240

投稿2015/02/03 08:07

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問