Ruby on Rails/Twitter Bootstrap Popover not working correctly after jQuery update

Question

I'm using Twitter bootstrap popover in Rails 3.
When I initially load the page (show action), the popover works correctly.

My partials (one calls another) look like this:

<span class="solution_votes_stat" id="<%= 'solution_votes_stat_' + sid.to_s %>">
   <%= render :partial => 'solutions/popover', :locals => {:s => s} %>
</span>

_popover.html.erb looks like this:

<% sid = s.id %>
<% solution_vote_up_count = s.solution_votes.votes_up.count %>

<% all_users_who_voted_up(sid) %>
<span class = "popover-with-html" rel = "popover"  
      data-original-title = "Who likes this" 
      data-content = "<%= render :partial => 'solutions/users_who_voted_up', :locals => {:users_who_voted_up => @users_who_voted_up} %>" 
      id="<%= 'solution_' + sid.to_s + '_up_votes' %>">
  <%= solution_vote_up_count %> 
</span>
<%= solution_vote_up_count==1 ? "Advisor" : "Advisors" %>

This produces HTML like this:

<span class="solution_votes_stat" id="solution_votes_stat_1">
    <span class = "popover-with-html" rel = "popover"  
          data-original-title = "Who likes this" 
          data-content = "<ul><li>Admin</li></ul>" 
          id="solution_1_up_votes">1 
    </span>
       Advisor
</span>

So far, so good => it all works correctly.
The problem is when I try to update this with jQuery.

In my up_votes.js.erb, I have:

update_popover = ('<%= escape_javascript(render(:partial => "solutions/popover", :locals => {:s => @solution}))%>');
$('<%= "#solution_votes_stat_"+@solution.id.to_s %>').html(update_popover);

As a test, I clicked down vote and then up vote. When I look at the HTML produced, it looks EXACTLY the same as the one above except that it does not work now (no popover) for this div; the popover is still working on all the other divs (with the same HTML).

Any ideas on what is happening and how to fix this?

UPDATE: It looks like it's caching it. I clicked down votes to look at what the div HTML is and in Chrome developer, the HTML is correct (0 votes, etc) but when I look at the page source, it hasn't changed (1 vote, etc). Still not sure what to do about this yet... I guess use jQuery directly to modify the data/attr instead of rendering the partials? Still... why isn't the popover working any longer, even with cached data?

Answer 1

Ever felt like giving yourself a swift kick?? :) OK, I figured it out. In my solutions.js.coffee (in the assets folder), I had this jQuery to trigger this when document was loaded:

$('.popover-with-html').popover({ html: true })

When I added this line to my up_votes.js.erb file below where I updated the data, it then reloaded the data and displayed correctly. Ugh - a whole day burned - but I guess you learn that way sometimes. :|