2013/11/14

jQueryでデータベースから動的にボタンを生成してかつイベントを付与する。

やり方簡単に探せないのでメモ やっと動いた

Monacaのサンプルから派生
あらかじめデータベース内に
質問 答え
が入っている。
答えは
"はい、いいえ、わからない"
とか
"ある、ない"
などいろいろあるので、事前にボタンの数も決まってはいない。

    // 問い合わせ成功時のコールバック
    //
    function querySuccess(tx, results) {
        var len = results.rows.length;
        window.alert("データベースには " + len + " 行あります。");
  //ボタンにシリアルナンバーつける。ccとする。
        var cc = 0;
        for (var i=0; i  //もとのHTMLには用意しておく。そこに足していく感じ。
  //質問をまず記入
            $("#add").append(results.rows.item(i).QUESTION + "
");
  //データが0文字の場合にエラーが起きるので回避 二つ以上答えがあるデータを選ぶ
            var s = results.rows.item(i).ANSWER
            var pos = results.rows.item(i).ANSWER.search("、")
            if(pos>0){
                var ss = s.split("、");
                for (j in ss) {
                    var bt = "button" + cc
                    var bt2 = "#button" + cc
                    $('#add').append($(''));
                    //イベントをバインド。変数が$()の中に入ってるのがミソ
         //あとでどのボタンが押されたか、valueをセットしておかないとわからない。重要
         //このevent.data.valueもここで使う分にはエラーが起きないようだ
                    $(bt2).on("click", { value : bt }, function(event) {
                        alert(event.data.value);
                        $('#add').append( event.data.value );
                    });
                    cc++
                }
                $("#add").append("
")
            }
       
        }    
    }

これでデータベースから質問、答えを動的に生成できて、かつどのボタンが押されたかがわかった。
ここにいろいろコードを付加していけば、自由に拡張が出来る問診票が作成できる。
データベースの例はこんな感じ。
    function executeQuery(tx) {
        //質問が入ったテーブル構造です。
        tx.executeSql('DROP TABLE IF EXISTS QuestionnaireTable');
        tx.executeSql('CREATE TABLE IF NOT EXISTS QuestionnaireTable (QUESTION_CODE unique, QUESTION, ANSWER, DESCRIPTION)');
        //定義完了
        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N716","既往歴1(脳血管疾患)","1:はい、2:いいえ","")');
        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N721","既往歴2(心血管疾患)","1:はい、2:いいえ","")');
        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N726","既往歴3(腎不全・人工透析)","1:はい、2:いいえ","")');
        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N731","貧血といわれたことがある","1:はい、2:いいえ","")');
        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N736","現在、たばこを習慣的に吸っている","1:はい、2:いいえ","")');
   }


0 件のコメント:

コメントを投稿