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

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

ただいまの
回答率

87.49%

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

解決済

回答 5

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 2,848
退会済みユーザー

退会済みユーザー

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

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

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

実際のコードは以下です。
    $('#order').appendGrid({
        caption: '',
        initRows: 1,
        columns: [
            { name: '品番', display: '品番', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
            { name: '品名', display: '品名', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '250px'} },
            { name: '色', display: '色', type: 'text', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '100px'} },
            { name: 'サイズ', display: 'サイズ', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
            { name: '数量', display: '数量', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
        ],

    hideButtons: {
        moveUp: true,
        moveDown:true,
        removeLast: true
    }

    });

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

0

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

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--jQuery UI Core, Widget and Button components are mandatory-->

<!--
    jQuery-UI download:
        http://jqueryui.com/download/
    jQUery-Cookie download:
        https://github.com/carhartl/jquery-cookie/releases
    jQuery 1.11.2 download
        http://jquery.com/download/
        Download the compressed, production jQuery 1.11.2
    
    Google Chrome で動作しない件について
        http://goweb.jp/blog/2011/05/27/1497/
        chrome はローカル環境では、クッキーを生成しないとか。
    
    動作確認ブラウザ:
        windows IE9
        windows Firefox 20.0.1(ちょっと古いですね)
        mac osx Safari
    動作確認ができていないブラウザ
        mac osx Chrome
        windows 版はインストールしてないので知らず
        
    
    

-->
<link href="jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"/>
<link href="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="jquery.cookie.js"></script>

<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.js"></script>


<script type="text/javascript">
$.cookie.raw = true;
$(function () {
    
    var tblSelector = "#order";

    var initData = restoreCookies2JsonData();

    // ここからappendGrid 初期化
    $(tblSelector).appendGrid({
        caption:'',
        initRows:1,
        columns:[
            {name:'品番',display:'品番',type:'text',ctrlAttr:{maxlength:100},ctrlCss:{width:'100px'}},
            {name:'品名',display:'品名',type:'text',ctrlAttr:{maxlength:100},ctrlCss:{width:'250px'}},
            {name:'色',display:'色',type:'text',ctrlAttr:{maxlength:20},ctrlCss:{width:'100px'}},
            {name:'サイズ',display:'サイズ',type:'text',ctrlAttr:{maxlength:4},ctrlCss:{width:'40px'}},
            {name:'数量',display:'数量',type:'text',ctrlAttr:{maxlength:4},ctrlCss:{width:'40px'}}
        ],
        hideButtons:{
            moveUp:true,
            moveDown:true,
            removeLast:true
        }
    });

/*
    $(tblSelector).appendGrid({
        caption: 'My CD Collections',
        initRows: 1,
        columns: [
            { name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
            { name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
            { name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
            { name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} },
            { name: 'Poster', display: 'With Poster?', type: 'checkbox' },
            { name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 },
            { name: 'RecordId', type: 'hidden', value: 0 }
        ]
    });
*/
    // クッキー保存値があればそれを復帰する
    if (initData.length > 0) {
        //alert("initData.length = " + initData.length);
        
        $(tblSelector).appendGrid("load", initData);
    }

    $(tblSelector).on("click blur", "input,select",function() {

        window.saveCookie();
    });

    window.saveCookie = function() {
        // シリアライズデータをクッキーに保存
        $.cookie(
            "GRID2",
            $(document.forms[0]).serialize(), 
            1); // 有効期限(1日)
    }
    
    // 初期化ここまで
    // クッキーをデコードし、appendGrid("load",data);
    // を実行する。
    function restoreCookies2JsonData() {
        var cookies = $.cookie("GRID2");

        // このプレフィックスとsuffixの "_x" を除去したものがカラムのラベル名になる
        var colNamePrefix = $(tblSelector).attr("id") + "_";
        var rowOrderName = colNamePrefix + "rowOrder";

        // appendGrid "load" 用 JSON データを作成する
        var initData = [];
    
        //alert(cookies);
        
        if (cookies) {
            var map = [];
            // クッキー登録パラメータを展開する。
            // 変数名_x "_x" が行番号なので、これを取得して各行のマップリストを作成する
            $(cookies.split("&")).each(function() {
                var keyVal = this.split("=");
                var key = decodeURI(keyVal[0]);
                var val = decodeURI(keyVal[1]);
                var rowIndex = key.substring(key.lastIndexOf("_") + 1);
                
                if (!map[rowIndex]) {
                    map[rowIndex] = {};
                }
                map[rowIndex][key] = val;
            });
        
            // 並べ替え順序を退避し、配列に変換する
            var rowOrders = null;
            if (map["rowOrder"][rowOrderName]) {
                rowOrders = eval("[" + 
                map["rowOrder"][rowOrderName].replace(/\%2C/g, ",") + "]");;
            } else {
                rowOrders = [];
            }
            delete map["rowOrder"];
            
            // 仮配列に各行のマップを詰める
            var tmpArr = [];
            for (var x in map) {
                var colMap = [];
                var entryCount = 0;
                for (var z in map[x]) {
                    if (z.indexOf(colNamePrefix) == 0) {
                        var colName = z.substring(colNamePrefix.length);
                        colName = colName.substring(0, colName.lastIndexOf("_"));
                        colMap[colName] = map[x][z] || "";
                        entryCount += 1;
                    }
                }
                if (entryCount > 0) {
                    tmpArr.push(colMap);
                //    alert(map2(colMap));
                }
            }
            // rowOrder を適用する
            // alert(rowOrders);
            for (var i=0;i < rowOrders.length;i++) {
                // 行の順序は、1から始まる。3、1、2のとき、
                // tmpArr は、1、2、3と入っているので、これを
                // 正しい順序に直す。
                
                initData.push(tmpArr[rowOrders[i] - 1]);
            }
        }
        return initData;
    }

    function map2(m) {
        var arr = [];
        for (var a in m) {
            arr.push(a + "=>" + m[a]);
            
        }
        return arr.join(", ");
    }
});
</script>
</head>
<body>
<form>
    Mail:<input type="text" name="mailAddress" /><br />
    Name:<input type="text" name="userName" /><br />
    <div id="gridOuter">
        <table id="order"></table>
    </div>
    <button onclick="saveCookie();">送信</button>
</form>
<hr />
<p>このサンプルが動作するための必要構成</p>
<pre>
   appendGridDemo/
       jquery-1.11.2.min.js
       jquery.cookie.js
           jquery.appendGrid-1.5.1/
           jquery.appendGrid-1.5.1.css
           jquery.appendGrid-1.5.1.js
       jquery-ui-1.11.2.custom/
           jquery-ui.css
           jquery-ui.js
           jquery-ui.min.css
       demo.html (このHTMLのファイル)

※Mac OSX Safari で動作確認済み

※動作内容
 一覧のクリック、フォーカスIN でクッキーに入力内容を保存する。
 送信ボタン(submit)でクッキーに入力内容を保存する。
 ページリロード(F5)では保存されません。注意!!
 再表示(初期表示含む)時、クッキーを読み込み、クッキーに前回の値が
  保存されているときだけ appendGrid の初期データを生成して appendGrid を初期化する
  クッキー保存日数は1日です。
  とりあえず、これをコピペして、そのまま動作させてみてください。
  問題なければ、本番に適用となります。
  手順1:JavaScript を開始・終了タグまるごとコピーし、本番に貼り付けます。
  手順2:appendGrid のテーブルタグをフォームの中に入れてください。
  手順3:appendGrid の id が order ならばこのままでOKです。違う場合は、メソッド戦闘に tblSelector 変数
  があるのでそれを書き換えてください。
  手順4:送信ボタン用のメソッドがあるので、送信ボタンに設定してください。
  jQuery で設定する場合は、
  $("ボタンID").click(function() { window.saveCookie() });
  
  
  追記: appendGrid のテーブル名が"order" で、    他に "order_xxxx" とかフォーム要素が
  あるとまずいことになります。
  
  以上です。
  
</pre>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/04 15:23

    localstrage を検索してください。
    画面をユニークにする仕掛けは、
     ちょうどPHPのHPがありました。
    http://blog.katty.in/5124
    ここに書いてあるUUID 生成が可能ならば、
    テキストボックスにこのIDを入れることで
    画面毎にユニークにすることができます。たぶん。

    冒頭のローカルストレージは、クッキーの保存限界を突破させるための仕組みです。
    クッキーと違う点は解説ページがいっぱいあるので参考にしてください。

    ブラウザ2個起動で確認しましたよね?
    クッキーがドメイン単位なので異なるブラウザ間でデータ共有してしまうのです。
    なので、今のソースだと、"GRID2" というクッキーのキーを利用していますが、
    これを、"GRID2_UUID:xxxxxxyyyyyywwwwwqqq" とかすれば一意の衝突する
    可能性が極めて低いキーにできるのではないか?ということです。

    で、ローカルストレージがどこに絡むのかというと、画面で「+」ボタンを1000回
    押され、1000行入力されたときに、クッキーの容量が破綻します。
    1000行はたとえですね、実際は50行くらいでしょうか。1行 100 文字として。

    ローカルストレージはブラウザ2個でも衝突しないかもしれません。
    やったことないので不明ですけど。衝突しないならお手軽です。ただし
    クッキーと違って永久保存らしいので、時間管理を自前で行う必要は
    あります。
    諦めてPHPカスタムで行くのも良し、とりあえずやれるとこまでやって納得いってから
    諦めるなりそのままやるなり、、、といったとこだと思います。

    別にパスワードじゃ住所など個人的な情報を保存するわけではないので
    クッキーもありだと思いますが、一般的には、こういう画面遷移の情報
    保持にはクッキーは使いません。

    キャンセル

  • 2015/02/04 15:47

    失礼。UUID の生成はJavaScript 側で行う必要がありますね。
    で、テキスト BOXは何に使うのかというと、生成したキーの保存
    に使います。
    appendGrid のように、画面上でフォーム部品を動的に生成する
    タイプの部品はワードプレスが管理してくれない>だからSUBMITすると内容が消えてしまう。
    ということで、ワードプレスが管理するテキストBOXを用意する>SUBMITしても内容が消えない(ブラウザ閉じるまでキーが有効になる=>クッキーにアクセすするためのキーの不変が保証できる)
    ということになります。

    キャンセル

  • 2015/02/06 00:13

    ipadcaron様
    ありがとうございます。
    お返事が遅くなりすみません。
    自分なりに色々試してみたのですが、自分には敷居が高すぎて無理ですので今回は諦めます。貴重なお時間を割いて考えて頂き非常に感謝しております。
    また何かございました際にはよろしくお願い致します。

    キャンセル

0

Demo の Load Data サンプルのHTMLサンプルコードを見ると、初期値は JSON 形式で指定できるようですよ。
クッキー使わなくてもいけるのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/02 15:44

    ご回答ありがとうございます。
    初期値とは最初から表示させる文字の事なのでしょうか?

    当方が実現させたい事は、コンタクトフォームの利用者がテキストボックスに入力した文字をページをリロードしても保持したいのですが、JSON 形式で指定させるのであればどのうように記せば良いのでしょうか?
    よろしくお願いします。

    キャンセル

0

メール送信用データがフォーム送信されてきたら、
再表示用の画面を作る PHP?JSP?内で、

        $('#tblAppendGrid').appendGrid('load', [
            { 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Poster': true, 'Price': 168.9, 'RecordId': 123 },
            { 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Poster': true, 'Price': 152.6, 'RecordId': 125 },
            { 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Poster': false, 'Price': 306.8, 'RecordId': 127 },
            { 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Poster': true, 'Price': 108.6, 'RecordId': 129 },
            { 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Poster': false, 'Price': 138.2, 'RecordId': 131 }
        ]);
こうしてあげれば良いかと。
サンプルそのまま貼り付けただけですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/02 17:03

    実際に使用しているコードは、ヘッダ部分とそのカラムの入力形式を定義したものですよね。僕が言っているのも、あなたが言いたいのも同じだと思うのですが、SUBMIT ボタン押下前と押下後の入力内容が変化しない状態にしたいってことだとおもいます。
    PHPはちょっと知識不足なんですが、JSPで良ければサンプル書きましょうか?

    キャンセル

  • 2015/02/02 17:09

    コンタクトフォームについて、もう少し情報くれますか?
    Java/Jsp なのか、フォーム生成ツール上で動作する画面なのか、jQueryUI を使う時点でHTMLであることは確定していると思うのですが、それ以外の環境がさっぱり見えません。

    キャンセル

  • 2015/02/02 18:21

    ご回答ありがとうございます。
    情報不足ですみません。
    WordPressでMW WP Formと云うプラグインを用いてフォームを作りました。
    MW WP Formでcookieを使用しているのだと思うのですが、MW WP Formで作成した入力欄に入力した情報はsubmitでもF5キーでも保持するのですが、実現したいのはsubmitの時だけで良いです。紛らわしくてすみません。

    キャンセル

0

http://mypacecreator.net/blog/archives/2063
このHPを見ると、入力項目が細かくてフロントの見た目に凝りたい場合はカスタムで!
ってかいてあります。
PHPができないとまずいのでは?
appendGrid は、画面で「+」を押すと入力行が追加され、「−」を押すと入力行が減ります。
つまり、入力可能な行数が可変なのですが、この可変という部分がまずポイントになるかと。
wordpress のHPを結構見てみました。MW_WP_Formメールフォームと jQuery を連携する
場合の具体的なやり方を書いている人が居ないか探しました。
MWメールフォームプラグインの管理画面では、ベタのHTMLはゴリゴリ記述可能なようですが、
appendGrid は入力のパラメータに基づいて画面を動的に構築します。なので、最初に言った
初期値をJSON形式で設定すればいけるんじゃ?ないの、という話は管理画面では記述できない
ようです。そもそも、JavaScript に変数の内容を埋め込む、というやり方も出来なさそうで
すし。

無理やりこじつけで実装する場合もなくはないとおもいますが、僕が知りたいのは以下の通りです。
これがわかればたぶん、appendGrid でもいけるとおもいますが、行数が「可変」するという部分
に関しては制限が必要になるかもしれません。例えば最大10行まで入力可能として、最初から10
行出しておく、あるいは、「+」ボタン押下で最大行数を判定するか、appendGrid に最大行数の
設定が可能かもしれませんが。。。


知りたいこと
(1)ワードプレスで作成したメールフォームのHTMLが知りたい。
   品番、品名、色、数量、を2個ずつ管理画面に記述して、生成された画面のHTMLソースの
   これらの入力欄のHTMLを見せてください。

   管理画面でフォームを記述する場合、同じ名前だと配列で取れるのか、同じ名前はNGで
   部品1個につき固有の名前である必要があるのかを確認してください。


 ※ワードプレスの管理画面に記述したフォームは、F5や画面を更新(SUBMITボタン)しても
  入力内容は保持されるのですよね?

たぶん、上記HPの作者さんは、凝った画面の場合はPHPをガリガリ描いたほうがいいみたいなこと言っているのでワードプレスとPHPに詳しい方の意見も聞いたほうがいいとおもいます。自分は残念ながらPHPは疎いです。

僕の「知りたいこと」から実現可能な画面は、
 (1)「+」ボタンは無限に押せない。最大入力行数に制限をかける必要がある。
 (2)(1)の制限以外はすべて JavaScript で実現し、PHPなどは使わない。
 (3)最大行数が例えば5行のとき、品番、品名、色、数量、サイズ、で合計5項目x5行=25項目を
    あらかじめ定義しておき、画面上見えないように配置する(CSSで非表示にする)。隠しておいた
    フォーム内容を画面の onload で appendGrid に設定する。
 (4)送信ボタン押下時に、イベントをハンドルして、appendGridの入力内容を隠してあるフォームに
    貼り付けてから送信する。

MW_WP_Form プラグインのフォームがF5や送信ボタン押下前後の入力内容が保持されるのは、管理画面に
証跡があるからだと踏んでいます。つまり、管理画面にフォーム部品として定義したものだけが入力内容が
保持されると。なので、最大行数に制限を設ける、というのは管理画面の制約になります。

以上です、考え方間違っているかもしれませんが、PHPで専用フォームを作った方が早いとおもいますが、
PHPに詳しくない自分にはなんとも言えません。JavaScript だけでできる範疇での回答になります。

たぶんですが、送信されるメール内容も、画面の入力行数が5行なら、メール本文も5行固定になる
かもしれません。2行しか入力していなくても、5行(残り3行はブランク?)になります。

JavaScriptだけだとこれが限界だと思いますね。

いっぱい書いといて、、、、最初の質問読み返してふと疑問が・・・
>入力した内容をメールで送信すると云う寸法ですが、メールの送信自体は問題無いのですが 
>入力した内容をCookieで保持したいのですが方法が分かりません。
これって、appendGrid で2行入力しても、メールに2行の入力内容が貼り付けられるとこまでは完成している、ってことですか?だから本当に、知りたいのはクッキーで送信前の値を保持しておいて、入力内容が消えない
ようにしたいってことだけなんですか?

appendGrid のシリアライザーは、
「品番」カラムが3個あるとき、品番1, 品番2, 品番3 て感じで通し番号を割り振ります。
数字部分が行番号になるわけです。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/03 01:24

    wordpress jQuery 使い方
    https://ja.forums.wordpress.org/topic/3246

    wordpress デフォルトのjQuery をキャンセルして、jQueryUI が動くバージョンを
    ロードさせる方法(記事の内容とはちょっと違うけど、jqueyUI を完全動作させるに
    はそのUI が要求する jquery バージョンが必須であり、wordpress デフォルトの
    jquery が UI の要求バージョンと異なっているとうまく動かない可能性があるから)
    http://sensebahn.com/develop/389/

    wordpress jquery.cookie.js の使い方
    http://riyomaru.minibird.jp/wordpress/358/

    なんか、もう少し調べてみると、PHP をちょっと工夫すればできそうな感じが
    してきました。でも、自分はPHP詳しくないので、いっそ、上記HPの方に質問を投げて
    みてはどうでしょうか。

    キャンセル

  • 2015/02/03 08:40

    ご回答ありがとうございます。
    そして色々調べて頂いてありがとうございます。
    今日は朝からバタバタしてまして、お返事させて頂くのが精一杯です。
    夜には内容をまとめてお返事させて頂きますので何卒宜しくお願いします。

    PS. appendGridで追加した複数行に入力した全ての内容がメールで送信出来ております。

    キャンセル

0

>>PS. appendGridで追加した複数行に入力した全ての内容がメールで送信出来ております。
これ聞いて安心しました。複数行がメールフォームに記載できないのでは?と思っていました。

なので、自分の仕事は、当初の目的どおり、クッキーを使った例を示します。

クッキーは1日を設定しました。

別途、保存した情報から自動的に行数を算出して JSON パラメータを作成したものをアップしますね。

<html>
<head>
<!--jQuery UI Core, Widget and Button components are mandatory-->

<!--
    jQuery-UI download:
        http://jqueryui.com/download/
    jQUery-Cookie download:
        ?
    jQuery 1.11.2 download
        jQuery HP
    

-->
<link href="jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"/>
<link href="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="jquery.cookie.js"></script>

<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.appendGrid-1.5.1/jquery.appendGrid-1.5.1.js"></script>


<script type="text/javascript">
$.cookie.raw = true;


$(function () {

    var saveRows = $.cookie("ROWS") || 1;
    
    //alert(saveRows);
    
    $('#tblAppendGrid').appendGrid({
        caption: 'My CD Collections',
        initRows: saveRows,
        columns: [
            { name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
            { name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
            { name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
            { name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} },
            { name: 'Poster', display: 'With Poster?', type: 'checkbox' },
            { name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 },
            { name: 'RecordId', type: 'hidden', value: 0 }
        ]
    });
    
    
    $("#tblAppendGrid").on("blur", "input,select",function() {

        //alert("名前:" + $(this).attr("id") + " / 値:" + $(this).val() + " / 有効日:1");

        //alert($(document.forms[0]).serialize());
        
        // シリアライズデータを退避
        $.cookie(
            "GRID",
            $(document.forms[0]).serialize(),
            1); // 有効期限(1日)


        //alert("f行数は:" + $("#tblAppendGrid tbody")[0].childNodes.length);

        // グリッドの行数を退避
        $.cookie(
            "ROWS", 
            $("#tblAppendGrid tbody")[0].childNodes.length,
            1);

        //alert("クッキー登録済み:" + $.cookie("GRID"));
    });
    
/*
    $("#gridOuter").on("", "",function() {
        // グリッドの行数を退避
        //alert("f行数は:" + $("#tblAppendGrid tbody")[0].childNodes.length);
        $.cookie(
            "ROWS", 
            $("#tblAppendGrid tbody")[0].childNodes.length,
            1);
    });
*/

    var cookies = $.cookie("GRID");
    
    $(cookies.split("&")).each(function() {
        var keyVal = this.split("=");
        var key = decodeURI(keyVal[0]);
        var val = decodeURI(keyVal[1]);
        
        var item = $("#" + key);
        
        // チェックボックスとラジオボタンは、val が "" ブランクのとき、チェック無しとする
        if (/(checkbox|radio)/i.test(item[0].type)) {
            item.attr("checked", val != null && val != "" ? "checked" : "");
        } else {
            item.val(val || "");
        }
    });

});
</script>
</head>
<body>
<form>
    <div id="gridOuter">
        <table id="tblAppendGrid"></table>
    </div>
    <button>送信</button>
</form>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/03 22:29

    ipadcaron様
    ありがとうございます。
    ローカル環境で試してみました。と言っても単にPC上ですが・・・
    そのままHTMLで試すと理想通りの動作でページをリロードしても保持されておりました!
    ただ、実際の環境(と言ってもまだ作成中ですのでVMWareの仮想環境)で試しましたが何かが引っかかってテーブルのレイアウトが崩れ行の追加ボタンなども非表示になってしまいます。厳密に言いますとテキストフィールドが5つだけ表示されるだけです。
    Firebugで見ますと
    TypeError: $.cookie is undefined
    $.cookie.raw = true;
    と表示されておりますが、何かお分かりになりますでしょうか?
    よろしくお願いします。

    キャンセル

  • 2015/02/03 22:46

    jquery.cookie.js が読み込めてないのでしょうかね。
    アップロードし忘れとか?
    昨日見知った知識ですが、header.php に外部ファイルの読み込み関係をまとめるんですよね?
    とりあえずローカルで動作確認できて何よりです。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る