问题描述:

Basically, what I am trying to get dropdown button from rails button_to, this is done via ajax, when someone clicks on that button, it shows rendered cart <ul> tag via ajax render.

bootstrap:

<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge"><%="#{@cart.line_items_count}" %></span></button>

rails button_to:

%= button_to navbar_cart_path, {remote :true, method: :get, :class => 'btn btn-primary dropdown-toggle', data_toggle: "dropdown"} do %>

<span class="glyphicon glyphicon-shopping-cart"></span>

<span class="badge" id="cart-badge-id"><%="#{@cart.line_items_count}" %></span>

<% end %>

This generates similar button tags, except when looking at html source code, bootstrap button has attribute type="button", but rails generates type="submit"

bootstrap:

<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge">5</span></button>

rails:

<form class="button_to" method="get" action="/navbar_cart data-remote="true">

<button class="btn btn-primary dropdown-toggle" data_toggle="dropdown" type="submit">

<span class="glyphicon glyphicon-shopping-cart"></span>

<span class="badge" id="cart-badge-id">5</span>

</button></form>

Another great question if whether or not it is even possible to even make a dropdown menu this way.

网友答案:

If you just want a drop down you could use select_tag('attr', options_for_select()) to get your drop down and then do something like this to kick off any ajax stuff you want to do:

$('#my_select_dropdown').change(function(){
  //do stuff here
});

EDIT: Here is a link to look at select_tag docs in case you want more details: http://apidock.com/rails/ActionView/Helpers/FormTagHelper/select_tag

网友答案:

Just override the type attribute in the html_options argument of the method which is the same hash you are passing the class name for your element:

  <%= button_to navbar_carth_path, {remote: true, method: :get}, {"class": "btn btn-primary dropdown-toggle", "data-toggle": "dropdown", "type": "button"}  do %>

I think yo were also adding the html options within the same hash as the options hash which are not the same, the options hash (the first) are options for the rails helper per se, the second hash corresponds to attribute values that you want to apply to the rendered element:

button_to(name = nil, options = nil, html_options = nil, &block) 

Check the signature of the method here.

Update You were also passing the remote :true parameter wrong, you have a space between the remote word and the actual value so it parses as a symbol, it should be: remote: true. On the other hand, I advice to enclose all html options of helpers (like data-toggle) between quotes and not only its values so that you can use hyphens instead of dashes (bootstrap option is data-toggle AFAIK, not data_toggle

网友答案:

So it seems like when using rails button_to and adding data: attributes doesnt overwrite type="button", so I tryed experimanting and came up with this.

<%= link_to navbar_cart_path, { method: :get, remote: true, class: "btn btn-primary dropdown-toggle", "id": "cart-button", "type": "button", "data-toggle": "dropdown" }  do %>
          <span class="glyphicon glyphicon-shopping-cart"></span>
          <span class="badge" ><%="#{@cart.line_items_count}" %></span>
      <% end %>

This generates HTML code:

a class="btn btn-primary dropdown-toggle" id="cart-button" type="button" data-toggle="dropdown" data-remote="true" data-method="get" href="/navbar_cart">
          <span class="glyphicon glyphicon-shopping-cart"></span>
          <span class="badge" >5</span>

Where I can then use AJAX GET to render @cart partial in dropdown tags

相关阅读:
Top