フォームの遅延ロード

フォームの遅延ロード

Ajaxのフォームも遅延ロードで作成可能

ただし、これもただ追加しただけでは
jQueryMobileが適用されないため

フォームコンポーネントを追加した時点で
trigger(“create”)
を呼び出す必要がある

$.ajax({
type:"POST",
url:"./form.html",
dataType:'html',
success: function(data){

//データ追加
$("#corapsible-form").append(data);

//jQueryMobile反映
$("#corapsible-form").trigger("create");

},
error:function(msg){
alert(msg.responseText);
}

});

これで、あとはhtmlで
追加する領域の指定

<div data-role="corapsible" data-corapsed="true" id="acordion" name="acordion">
<h3>動的フォームの挿入</h3>
<form id="corapsible-form"></form>
</div>

続いて、挿入するhtmlファイル

このやり方のメリットは、後から追加できるため
メンテナンスが楽なこと
そして作業の分担ができること

全体的なUIの設定と
フォーム内容担当を分けることができる

アンケートなどではかなりの量になるので
都度アンケート内容だけ変更することもできる

<div data-role="fieldcontain">
<label for="slider">スライダー</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

<fieldset data-role="controlgroup">
<legend>好きなタイプは？</legend>
<input type="checkbox" name="rpg" id="rpg" class="custom"/>
<label for="rpg">RPG</label>

<input type="checkbox" name="action" id="action" class="custom"/>
<label for="action">アクション</label>

<input type="checkbox" name="puzzle" id="puzzle" class="custom"/>
<label for="puzzle">パズル</label>

</fieldset>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>使うosは？</legend>

<input type="radio" name="os" id="android" value="android"/>
<label for="android">Android</label>

<input type="radio" name="os" id="ios" value="ios" checked="checked"/>
<label for="ios">iOS</label>

<input type="radio" name="os" id="other" value="other"/>
<label for="other">両方</label>
</fieldset>
</div>