1

I'm having trouble with a Bootstrap popover inside my navbar. The navbar is in the main application.html.erb. It works once the page is loaded, but once I move onto another page, the popover stops working until the site is refreshed again. Here's the html/ruby: 

<button class = "btn navbar-btn btn-primary" id="popoverFriends" data-placement = "bottom" data-trigger="focus">Workplace Proximity Acquaintances <span class="badge"><%= @user.pending_friends.count %></span></button>

<div id="popoverFriendsHiddenContent" style="display: none">
    <% unless @user.pending_friends.empty? %>
    <% @user.pending_friends.each do |u| %>
    <h3 class="text-center"><%= link_to u.username, user_path(u.id) %>
        <%= link_to 'YAY!', user_friend_path(:user_id => current_user, :friend_id => u), class: "btn btn-warning", :method => :put, :confirm => 'Accept friend request! Are you sure?' %> 
        <%= link_to 'No.', user_friend_path(:user_id => current_user, :friend_id => u), class: "btn btn-danger", :method => :delete, :confirm => 'Reject friend request! Are you sure?' %>
        <% end %>
        <% else %>
        None :(
        <% end %>
    </h3>
</div>  
<div id="popoverFriendsHiddenTitle" style="display: none">
    <h3>Your requests: </h3>
</div> 
</div>

And the .js

$(document).ready(main)
var main = function(){
 $('[data-toggle="popover"]').popover()
 $("#popoverFriends").popover({
    html : true,        
    content: function() {
      return $('#popoverFriendsHiddenContent').html();
    },
    title: function() {
      return $('#popoverFriendsHiddenTitle').html();
    }
});
};

Please let me know if I'm missing something so that the popover stays persistent through the site.

Shehary
  • 9,926
  • 10
  • 42
  • 71
Chris
  • 13
  • 3
  • Check this: http://stackoverflow.com/questions/17881384/jquery-gets-loaded-only-on-page-refresh-in-rails-4-application – AndrewL64 Sep 23 '15 at 20:24

2 Answers2

1

I have had this issue when running a vanilla Rails app that specified the use of turbolinks by default. I had to disable turbolinks. One approach to disabling the functionality is:

http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

This page states:

Remove the gem 'turbolinks' line from your Gemfile.

Remove the //= require turbolinks from your app/assets/javascripts/application.js.

Remove the two "data-turbolinks-track" => true hash key/value pairs from your app/views/layouts/application.html.erb.

Edit

Another approach is to accept that Turbolinks can have some value in certain applications and to hook into its event model. Listen for the event page:change and trigger the Bootstrap popover method to refresh the newly drawn popover elements again. Something like this should work:

$(document).on('page:change', function(){
  $('[data-toggle="popover"]').popover();
});
Community
  • 1
  • 1
Phil
  • 2,797
  • 1
  • 24
  • 30
  • Or you can just disable turbolinks on links leading to the page containing your popover. <%= link_to "page containing popover", popover_page, "data-no-turbolink": true %> – moeabdol Sep 24 '15 at 02:52
  • @moeabdol that's an interesting approach. I feel that once I selectively have to disable a function so central to the operation of the pages, it is probably going to get confusing. Personally, I've had never ending issues with turbolinks, especially as I do a lot of handlebars rendered data and bootstrap things, and they just don't seem to play nice with the lack of events coming from turbolinks. – Phil Sep 24 '15 at 20:05
  • I understand @Phil ... yes it might be cleaner and easier to disable turbolinks altogether, but you have to put in mind that turbolinks is here to stay. Rails 4 had turbolinks in by default, and Rails 5 will follow the same footsteps. Better get used to turbolinks :) – moeabdol Sep 24 '15 at 20:37
  • 1
    @moeabdol - you are possibly right. Though I feel like they used to say that about Prototype! In acknowledgement of this, I edited my response to attempt to play nicely with Turbolinks. – Phil Sep 24 '15 at 22:05
  • @Chris - pleased to hear it. Which approach did you end up using (disabling turbolinks or using the page:change event?). If you get a moment, please mark this answer as accepted. – Phil Sep 28 '15 at 19:43
  • @Phil Done and done -- and I just got rid of Turbolinks. – Chris Sep 29 '15 at 00:03
1

If you are using turbolinks you can always use popover with it on load

$(document).on('turbolinks:load', function () {
  $("[data-toggle='popover']").popover()
})

which may be more specific than to just have it trigger based off page change.

Then you can call it on your button 

<button class="btn navbar-btn btn-primary" id="popoverFriends"
  data: {toggle= "popover" placement="bottom" trigger="focus"}>
It'sJohnny
  • 19
  • 5