vendredi 25 septembre 2015

Rails 4/Ajax ujs/Turbolinks - Ajax activated bootstrap Modal does not change content despite value in database changing

I have a Ruby on Rails app (plus Bootstrap on frontend).

I'm using ajax to load a modal.

Here is what I want to do:

  1. On a Deal page, the user clicks on a link called "view opportunities'

  2. A modal appears and inside the text you can see: "the latest opportunity is Star Wars 3 DVD" (hat's an example) (see code below). so it retrieved data from the table/model Opportunity to show it to the user. => this works perfectly thanks to ajax and all

  3. Now here is the bug, i.e my problem: When the user closes the modal, and then REclick (;.e. he clicks another time) on the same link "view opportunities", the modal appears but instead of going back to the database/table 'Opportunity' to check what is the latest Opportunity, it just displays again the same content ("Star Wars 3 DVD") where as it should show something else(I manually changed inside the database the latest opportunity he should show).

My first thought was to think it might be due to Turbolinks which can cache heaps of stuff behind the scene BUT I'm not sure now. Indeed, I tried to put data-no-turbolink on parent container, still had the same problem. then added data-no-turbolink on , still the same problem. I even tried to put inside "Turbolinks.disableRequestCaching(); .

There are many people who had trouble with turbolinks and bootstrap modals (here for example) and I might have problem because my javascript is not sent into the head but the ? I'm confused...

If I could describe with rookie words what's happening, it's that something is preventing me to click on the link and send a new ajax/xhr request to the database and instead is sending the same content to the view.

Can anyone help?

Here are my files:

controller/deals_controller.rb

# used so that old urls created for deals redirects to the new ones created
# indeed with friendly_id, the url is taken from the title :/deals/title
# but if we edit the deal title to deal/title2, the old url was still    working
# we need to redirect the old url
# source - http://ift.tt/1Fm4JUL
before_filter :find_deal,
   :only => [  :showcase ]
before_filter :ensure_canonical_deal_path!,
  :only => [  :showcase ] 

def showcase    
    @deal = Deal.friendly.find(params[:id])   

    respond_to do |format|
      format.html # showcase.html.erb
      format.json { render json: @deal }
    end
end 

def show_opportunities
    @deal = Deal.friendly.find(params[:id])
    @opportunity = Opportunity.where('deal_id = ? AND deal_type = ?',
                             @deal.id, "high tech").first

    respond_to do |format|
      format.js
    end
end

protected

def find_deal
   @deal = Deal.friendly.find params[:id]
end
def ensure_canonical_deal_path!
   if request.path != deal_page_path(@deal)
        redirect_to deal_page_path(@deal, :format => params[:format]), :status => :moved_permanently
        return false
   end
end

app/views/deals/showcase.html.erb

<% if @deal.present? %>
   this is the beginning
   <%= render 'deals/deal_info_zone' %>
   this is the end
<% end %>

views/deals/_deal_info_zone.html.erb

<div id="zoneA">      
  <div style="color:red;padding-top: 150px;">
    <%= link_to "view infos of the latest Opportunity", deal_opportunities_modal_path, remote: true %>
  </div>
</div>

views/deals/deal_opportunities_modal.js.erb

Here is the modal trigger via ajax: views/deals/opportunity_modal. Note here how I tried here to pass Deal but without success so that the line

$('body').append('<%= j render partial: "deals/deal_opportunities_modal" %>');
$('#myModal').modal('show');

/app/views/deals/_deal_opportunities_modal.html.erb

Here is the modal view/content now:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-body"> 

          this the the latest opportunity: <%= @opportunity.name %> <br/>     

      </div>

    </div>
  </div>
</div>

routes.rb

match '/deals/:id', # this is the Deal page
    to:   'deals#showcase',
    via:  'get',
    as:   :deal_page

match '/deals/:id/opportunity_modal',
  to: 'deals#show_opportunities',
  via: 'get',
  as: :deal_opportunities_modal

gemfile has included: gem 'jquery-turbolinks'

assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.cookie
//= require twitter/bootstrap
//= require paloma
//= require html5shiv-printshiv
//= require turbolinks
//= require_directory .

Tell me if some other files would useful to find the answer

Aucun commentaire:

Enregistrer un commentaire