CakePHP上でJavascriptによるタグ機能実装

今日やること

• tag表示（サーバからtagのデータを取得してtag一覧表示）

  • tagsを取得する

• javascriptで追加tagのデータをサーバに送信

• tagの送信が終わった後に、コールバックで（tagを再度表示）

CakePHP2でjavascript

• jshelper（非推奨 CakePHP3からはなくなる）

• htmlヘルパーで書く方法　HtmlHelper::script(mixed $url, mixed $options)¶


  • webrootにかく
  • 直接書く

htmlヘルパー js

• $this->Html->scriptStart(array('inline' => false)); $this->Html->scriptEnd(array('inline' => false));
  • javascriptだけで書くの難しいっぽい。調べ不足
• jsを外部定義する
  • javascriptだけで書けそう

tag表示

done

• jsでfor文を回して、データ数に応じたセレクトボックスを作成（仮データ）

document.write('<input type="checkbox" name="genre" value="' + value + '" id="genre_' + index + '">');

• json_encodeで実際のデータでタグ表示　http://maa123lq.hatenablog.com/entry/2015/10/10/191809

こんな感じで、javascriptでhtmlを書きたいときは、文字列としてwriteなので書き込む。

document.write('<label for="genre_' + i + '">' + tags[i] + '</label>');

tagがついているものをチェック済みとして表示する

以下のように条件にマッチする場合、inputタグの表示を変えるようにした。

if(Object.values(selected_json).indexOf(String(i))>=0){
        document.write('<input type="checkbox" name="data[tag][]" value="' + i + '" checked="checked" id="Tag' + i + '">');
    }else{
        document.write('<input type="checkbox" name="data[tag][]" value="' + i + '" id="Tag' + i + '">');
    }

学びメモ

PHPからJavaScriptに配列を渡す
json形式に変換した上で受け渡しをする。
https://qiita.com/tksnino/items/c8c542f1f0a7bf9d6031

• セレクトボックスは、cakephpのformヘルパーのcreateとendの間に記述した。こうすることで、formとしてrequest->dataに保存されサーバに送ることができる。結局、formヘルパーもサーバ上でhtmlに変換されているから、htmlでクライアント側でhtmlを追加しても同じように表示できる。
• オブジェクトは、値チェックを直接することが難しそう。今回も配列になおしてindexOfで判定している。