2

erbを使用してrailsのform_forで、コメントフィールドからのコメントとともに送信されたtwitter-bootstrap data-toggle="buttons-radio"から値を取得しようとしています。私はこれらの投稿を見ましたが、おそらくjavascriptを知らないために、ドットを完全に接続することはできません。

Twitterのブートストラップラジオボタンが機能しない

twitter-bootstrapを使用してbtn-groupに値を定義します

Twitter Bootstrapトグルラジオボタンを使用して、フォーム入力を取得するためのクリーンな方法は何ですか？

<%= form_for @approval, :url => approve_path, :method => :put, :html => { :id => "other_version_form" }  do |f| %>
  <fieldset>
      <p>
      <b>Comments:</b><br>
      <%= f.text_area :comments, :size => "200x3" %>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{@latest}" %>"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
        <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{v}" %>"><%= "#{v}" %></button>
      <% end %>
    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', approvals_path, :class => 'btn' %>
    </div>

  </fieldset>
<% end %>

フォームは次のようになります。

<form accept-charset="UTF-8" action="/approvals/approve/1394" class="edit_approval" id="other_version_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=" /></div>
  <fieldset>
    <p>
      <b>Comments:</b><br>
      <textarea cols="200" id="approval_comments" name="approval[comments]" rows="3"></textarea>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.13">3.29.13</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.12">3.29.12</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.11">3.29.11</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.10">3.29.10</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.9">3.29.9</button>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" name="commit" type="submit" value="Update Approval" />
      <a href="/approvals" class="btn">Cancel</a>
    </div>
  </fieldset>
</form>

しかし、フォームを送信してコントローラーからパラメーターを検査すると、コメントのみが取得され、選択した値を渡す必要もあります。

{"utf8"=>"✓", "_method"=>"put", "authenticity_token"=>"Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=", "approval"=>{"comments"=>"here is the deal"}, "commit"=>"Update Approval", "controller"=>"approvals", "action"=>"approve", "id"=>"1394"}

ありがとう。

===Tried http://dan.doezema.com/2012/03/twitter-bootstrap-radio-button-form-inputs/ ===
===ALL GOOD====
<script type="text/javascript">
jQuery(function($) {
    $('div.btn-group[data-toggle-name=*]').each(function(){
        var group   = $(this);
        var form    = group.parents('form').eq(0);
        var name    = group.attr('data-toggle-name');
        var hidden  = $('input[name="' + name + '"]', form);
        $('button', group).each(function(){
            var button = $(this);
            button.live('click', function(){
                hidden.val($(this).val());
            });
            if(button.val() == hidden.val()) {
                button.addClass('active');
            }
        });
    });
});
</script>
    <div class="btn-group" data-toggle-name="version" data-toggle="buttons-radio" >
      <button type="button" value="<%= "#{@latest}" %>" class="btn btn-info" data-toggle="button"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
          <button type="button" value="<%= "#{v}" %>" class="btn btn-info" data-toggle="button"><%= "#{v}" %></button>
      <% end %>
    </div>
    <input type="hidden" name="version" value="0" />
4

2 に答える 2

2

<input type="radio"...代わりに使用してみてください<button type="button"...

于 2012-09-28T17:02:59.050 に答える
1

私の答えはhttps://stackoverflow.com/a/16214643/1111662に基づいています

あなたの見解では（私はHAMLを使用していますが、必要に応じてERBに変換します）

.btn-group{data:{toggle: "buttons-radio"}}
  %label.btn
    = f.radio_button :gender, "Male"
    Male
  %label.btn
    = f.radio_button :gender, "Female"
    Female

ビュー固有のJavaScriptの例（ここでも、CoffeeScriptを使用していますpages.js.coffeeが、必要に応じてプレーンなJS JQueryに変換します）

$ ->
  $('.btn-group label.btn input[type=radio]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

JSは、ビューが読み込まれたときにボタンが「選択された」ように見えるようにするためのものです。最初にラジオボタンを非表示にし、次にチェーンされたJQuery構文を介して、TwitterBootstrapクラス「アクティブ」を非表示になっているがまだ選択されているラジオボタンに追加します。疑似クラス:checkedを使用すると、適切なラジオボタンを見つけることができます。

そして、単一のチェックボタンの場合

ビュー（HAML）

.btn{data:{toggle: "buttons-radio"}}
  = f.check_box :public
  Public

JS（CoffeeScript）

activateRadioButton = ($element) ->
  hiddenField = $element.children('input[type=hidden]')
  toggleInputValue hiddenField

toggleInputValue = ($input) ->
  switch $input.val()
    when "0" then $input.val('1')
    when "1" then $input.val('0') 

$ ->
  $('.btn input[type=checkbox]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

Railsはチェックボタンに非表示フィールドを使用するため（RubyOnRails APIを参照）、非表示フィールドを変更するにはonclickハンドラーを追加する必要があります

注意：これを機能させるには、submit_tagではなくf.submitを使用してください

于 2013-06-19T00:42:08.907 に答える