READING.JP

~日記で学ぶソフトウェア開発~

jQuery Mobile で動的にテキストボックスを追加

23 Nov 2013

jQuery Mobile を使ったビューで以下のようなフォームを作成します。

<%= form_for @member do |f| %>
  <table>
    <tr><td>名前:<%= f.text_field :name %></td></tr>
    <tr><td>家族:</td></tr>
    
    <% @family_members.each do |fm| %>
      <%= f.fields_for "family_members", fm do |f| %>
      <tr>
        <td>
          <%= f.text_field :name %>
          <%= f.hidden_field :id %>
        </td>
      </tr>
      <% end %>
    <% end %>

    <tr id='add_family_member'>
      <td align='right'><a href='' onclick='add_family_member();'>家族追加</a></td>
    </tr>
  </table>

  <div><%= f.submit '更新' %></div>
<% end %>

家族追加リンクをクリックすることで家族を一人追加するためのテキストボックスを動的に追加しています。 ですが、もともと存在するテキストボックスのようにCSSが適用されないんですよね。

add_family_member() では以下のような処理をしています。

<script>
  function add_family_member() {
    var params = {format: 'html'};

    $.get('<%= url_for :action => 'add_family_member' %>', params, function(html) {
      $('#add_family_member').before(html);
    });
  }
</script>

ここで取得している html は、もともとのページ上の タグと同じです。

jQuery Mobile は画面の初期化処理中に見た目を動的に調整しているので、画面を表示した後では、 同じ効果を得るには明示的に処理を実行する必要があります。

ので、以下のように明示的に処理を呼び出します。

<script>
  function add_family_member() {
    var params = {format: 'html'};

    $.get('<%= url_for :action => 'add_family_member' %>', params, function(html) {
      $('#add_family_member').before(html);
      $('[type="text"]').textinput(); // この部分
    });
  }
</script>

ここではフォーム上のテキストボックスに対して

$('[type="text"]').textinput();

の処理を実行することで jQuery Mobile のデザインチックになりました。