jQuery Mobileでつまずいたこと。

フォーム(form)などの値をリセットして非表示した時に、

jquery Mobileだと表示上返されていないことがあったので、

その時の対応をメモ。

HTML[

<div id="q1-1">
<p>■色を選んで下さい</p>
<select name="code157">
<option value="">▼お選びください</option>
<option value="1">レッド</option>
<option value="2">ブラック</option>
</select>
</div>

]

JS[

$('#q1-1 select).val("");

]

上記のように書いても、

jquery Mobile上は変わらない。

そこで、

HTML[

<div id="q1-1">
<p>■色を選んで下さい</p>
<select name="code157">
<option value="">▼お選びください</option>
<option value="1">レッド</option>
<option value="2">ブラック</option>
</select>
</div>

]

JS[

$('#q1-1 select).val("");

$('#q1-1 .ui-btn-text').text("▼お選びください");

]

面倒だけども、jquery Mobile時に挿入されるspan.ui-btn-textの値に、

直接リセット時の値を入れてやることで解決した。

次。

一部抜粋ではあるけど、

ラジオボタンやチェックボックスの値がリセットした時に反映されない問題もあった。

これは以下のように解決した。

JS[

//jQuery Mobileはスマホの時だけ実装されるので、スマホだけで実行される命令を

//if文で記述。これが無いと、それが実装されていない時にエラーとなって、止まっちゃう。

if ( (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) && (document.cookie.indexOf('jet_viewmode=PC') == -1) ) {

$(values).prop("checked", false).checkboxradio("refresh");
}else if (_UA.indexOf('Android') > -1 && document.cookie.indexOf('jet_viewmode=PC') == -1) {
$(values).prop("checked", false).checkboxradio("refresh");
}

//ここから下は値をリセットする共通の命令。

$(values).attr('checked', false);

]

これでjquery Mobileに対応しましたよっと。