Twitter Bootstrap Rails Button Dropdown No Responding to Ajax

Twitter Bootstrap Rails button dropdown no responding to AJAX

So I finally figured this one out. The key was having the workflow down: :remote => true connects to the toggle_in_service method in the controller that then calls the toggle_in_service.js.erb file which finally calls toggle_button.html.erb. I also found that when working in Bootstrap it's probably best to try and target an existing <div> for replacement rather than wrap a piece of bootstrap code in another div. Not sure on that but it seemed to matter. Here is the code that worked:

dashboard.html.erb view snippet:

 <% status_link = tool.in_service ? "Put Out of Service" : "Put In Service" %>
 <% button_link = "#{tool.location}-#{tool.name.singularize}"+'<br>'+" #{tool.serial}" %>
 <div class="btn-group" id="btn<%= tool.id %>" >

    <a class="btn custombutton dropdown-toggle <%= (tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
      <%=  raw(button_link) %>
    </a>

    <ul class="dropdown-menu">
      <li><%= link_to status_link, toggle_in_service_path(:id => tool.id), :method => :post, :remote => true %></li>
      <li><%= link_to "view Details", tool_path(tool.id) %></li>
    </ul>
 </div>

This creates a Bootstrap dropdown menu attached to a button that is color coded by the status of the tool.

The first link in the dropdown menu is a remote ajax call to the toggle_in_service controller, passing the tool.id paramter. The controller method looks like:

def toggle_in_service
   status_change = @tool.in_service ? false : true
   @tool.update(:in_service => status_change)
   respond_to do |format|
     format.html { redirect_to(@tool) }
     format.js
  end
end

The boolean value for tool.in_service gets flipped and then calls toggle_in_service.js.erb:

<% btn_id = "btn#{@tool.id}" %>

$('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>');

Which does an AJAX render of the _toggle_button.html.erb partial:

<% button_link = "#{@tool.location}-#{@tool.name.singularize}"+'<br>'+" #{@tool.serial}" %>
<% status_link = @tool.in_service ? "Put Out of Service" : "Put In Service" %>

<a class="btn custombutton dropdown-toggle <%= (@tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
  <%=  raw(button_link) %>
</a>
<ul class="dropdown-menu">
  <li><%= link_to status_link, toggle_in_service_path(:id => @tool.id), :method => :post, :remote => true %></li>
  <li><%= link_to "view Details", tool_path(@tool.id) %></li>
</ul>

Works great! The entire div for the dropdown and the button get updated by AJAX. I'm posting this in case someone looks for something similar. I search many hours on the web and on Stack Overflow, but never found what I needed. I did some reading up on Rails AJAX to figure out what I was doing wrong.

Rails: Populating bootstrap dropdown with ajax

I would add JavaScript code to make the call:

$(document).ready(function() {
    $('#dLabel').click(function() {
        // Only call notifications when opening the dropdown
        if(!$(this).hasClass('open')) {
           $.ajax({
              type: "GET",
              url: "/notifications",
              async: false,
              dataType: "script"
           });
        }
    });
});

You could also make it asynchronous and put a loading icon into the menu temporarily...

Bootstrap Dropdown menu is not working

Maybe try with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

and see if it will work.

Rails 3.2.2 with Twitter Bootstrap Tabs Ajax not working

Ok, I figured this out. The correct link_to code is:

=link_to "Home", home_path(:format => :js), :remote => true, 'data-toggle' => 'tab'

And I needed to name the js file after the action in the controller, not the controller itself. So instead of calling it home.js I needed to call it index.js and it works.

One thing I noticed also was if I called it index.js.erb is would actually render the jquery code and not execute it. It would execute the alert though. Anyway, naming the file just index.js did the trick. Here was the final outcome for the index.js file:

$('.indexcontent').empty()
$('.indexcontent').append("<%= escape_javascript render(:file => 'home/index', :formats => [:html]) %>");

Bootstrap v5 dropdown is not working (no drop down menu)

You need to apply 2 changes:

data-toggle has been renamed to data-bs-toggle.

Second, add the dependency to popper.js:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

Or use the bootstrap version that has popper compiled in according to https://getbootstrap.com/docs/5.0/getting-started/download/

Bootstrap dropdown menu not working, button only displays

The version of your local jQuery is 2.1.0. The version your are getting from the Google site is 1.11.1.

Download the latest 1.11.x version and use it locally. This will make your setup the same as the one you successfully tested.

The rest is FYI

From jQuery site (with my emphasis):

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

Since IE 8 is still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site.

For other details see jQuery 1.11 and 2.1 Released

---

Related Topics