jQueryMobileでハッシュ付きURLだと真っ白になったり遷移しない

この前のチェックボックスの件とかもそうだし、
jQueryMobileは便利なのは分かるのだけれど、いらんことをしてくれる。

今回ドはまりしたのは、EC-CUBEにスマホ版で

example.com/index#link
のような、ハッシュ付きURLにアクセスすると画面が真っ白になる件。

と、

<div id="sample">ほげ！</div>
<a href="#sample">ほげにとぶ</a>
というようなアンカーリンクをクリックしても遷移しない件。


分かってみれば「またお前か」という感じ。

ハッシュ付きURLをたたいても真っ白になる件の解決方法は、
/data/html/user_data/packages/sphone/js/config.js
この中の、jQueryMobile用のイニシャライズをしているところに

$.mobile.hashListeningEnabled = false;

これを追加してあげるだけ。

リファレンスには・・・

jQuery Mobileは自動的に location.hash の変更を見張り、制御します。この値を false にすると、jQuery Mobileはハッシュ変更時の制御を止めます。それにより、制御を自分自身で行ったり、あるいはディープリンクをそのままにして指定したIDへ自動スクロールさせるようなことが出来ます。

とある。
(参考サイト　jQueryMobileの日本語リファレンス＞グローバル設定)

つまり、jQeuryMobileが動いている環境で特に設定がされてない場合、ハッシュがついていてもそれをなかったことにしちゃう系のことみたい。ちゃんと設定をバインドしてあげたらハッシュ付きURLでアクセスしても真っ白にはならなくなった。

アンカーリンクで遷移しない件は・・・
<a href="xxxx.html" data-ajax="false">リンク先</a>
とaタグに追加してあげるとちゃんと遷移した。

rel="external"でもいいみたいなことが書いてあったのだけれど、自分の場合はうまくいかず。
このdata-ajaxを逐一書くのが面倒なら、さっきのconfig.jsに

$.mobile.pushStateEnabled = false;

って書いてあげればOK。


jQueryMobile面白いかも。

Smartyが吐き出すチェックボックスタグをjQueryMobileで綺麗に読ませる方法

jQueryMobileとSmartyがある環境でうまいことカスタムされたチェックボックスが表示できなくてドハマリした。

結論から言うと、jQueryMobileがその便利機能をもってしておされチェックボックスを表示しているのはちゃんとしたチェックボックス＋ラベルタグがあるからだった。

そもそもの流れは、EC-CUBEのスマホ版で商品検索画面で検索フォームをある程度フレキシブルにしたいっていうところから始まった。PC版ではDBのマスタデータからもってきた項目を検索要素として出してるのだけれどそのコードをそのまま利用したかった。

が…Smartyのhtml_checkboxesを利用してチェックボックスタグを出すと、ラベルタグは出してくれるけどそのラベルタグにforはないし、チェックボックスタグにforに紐づくidもない。

何もしないとこんな感じ。

<label><input type="checkbox" name="box" value="1">項目1</label>

でも、jQueryMobileで綺麗に読み取るには…

<label for="box1"><input type="checkbox" name="box" value="1" id="box1">項目1</label>

みたいになってないとダメだった。

なるほど…。道理ですごい崩れていたわけね。

ここまでわかれば簡単な話。

ただすでにPC版のサイトがあってそれに影響を出すわけにいかないから、既存のSmartyの関数をどうこうするわけにいかない…。じゃあスマホ用に作りゃいいかってことでカスタム関数を追加するかーなんて考えながら、カスタム関数ディレクトリを見てみた。

EC-CUBEの場合は、data/smarty_extends

なんて関数名にするかなぁーとか思いながらすでにある関数ファイルを眺めてみると…
ん？！

function.html_checkboxes_ex.php　だと？

中身を見てみたところ、

if ($labels) {
　if ($label_ids) {
　　$_id = smarty_function_escape_special_chars(preg_replace('![^\w\-\.]!', '_', $name . '_' . $value));
　　$_output .= '<label for="' . $_id . '">';
　} else {
　　$_output .= '<label>';
　}
}

ちゃんとそれっぽいのがあった。
昨日半日悩んでたのはなんなんだろう。

なので…Smartyで関数を呼ぶ時には

<!--{html_checkboxes_ex ～}-->

にしたらいいってことらしい。

やっぱ同じようなことは先人たちも詰まってるんだなぁと思うと自分はまだまだだなって感じる。詰まること自体いいことではないんだけれど、誰もつまったことないところで詰まりたい。