CakePHPとjQuery Mobileでサイトを構築した時にタイトル属性の中身が消えた

CakePHPとjQuery MobileでWebサービスを構築しているときに、
特定のページでTitleタグの中身が消える現象が起きた。

正確に言うと、
「デスクトップPCのタブブラウザのタブの部分にコントローラーで設定したタイトルの文字列が表示されていない」
という状況です。

原因調査の為、他のページを確認したとこと、しっかりとTitleが表示されていることを確認…と思いきや、
よく見るとページロード中→後で微妙に文字列が変化していることに気が付いた。
(ココに早く気が付いていればもっと早く解決したかもしれないところが悔やまれる…)

jQuery Mobileはdata-titleでtitle属性を指定できるが、
省略した場合は、data-role=”header”内のクラスにui-titleが設定されたタグ(H1~6タグ)の内容が全て反映されるもよう。

対策としてdata-titleの値に、$title_for_layout(テキストはController側でセット)で解決しました。

jQuery Mobileはフレームワーク側で色々と自動で要素を追加してくれる反面、
しっかりと仕様を理解していないと思わぬ落とし穴があるという教訓でした。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る