CODEWITHSUNDEEP
jqueryruby-on-railsrubyajax
RubesMN
RubesMN

Reputation: 949

Rails 3.0 migration link_to :remote=>true Ajax + JQuery ujs not working

I've been migrating from Rails 2.3.14 to Rails 3.0.20 and I'm at a loss why I cant get Ajax calls to work through a link_to with :remote=>true.

Gemfile

gem "jquery-rails", "~> 1.0.19"

Command line:

    rails generate jquery:install --ui
      remove  public/javascripts/prototype.js
      remove  public/javascripts/effects.js
      remove  public/javascripts/dragdrop.js
      remove  public/javascripts/controls.js
     copying  jQuery (1.7.1)
   identical  public/javascripts/jquery.js
   identical  public/javascripts/jquery.min.js
     copying  jQuery UI (1.8.16)
   identical  public/javascripts/jquery-ui.js
   identical  public/javascripts/jquery-ui.min.js
     copying  jQuery UJS adapter (822920)
      remove  public/javascripts/rails.js
   identical  public/javascripts/jquery_ujs.js

In head:

  <%= csrf_meta_tag %>
  <%= javascript_include_tag :defaults %>

Which resulted in:

<meta name="csrf-token" content="qH17FbbfwQNFTHWte&#47;CBYopzfEvf5gnHxGEUdDBfV+Y="/>
  <script src="/javascripts/jquery.js?1381981377" type="text/javascript"></script>
  <script src="/javascripts/jquery-ui.js?1381981377" type="text/javascript"></script>
  <script src="/javascripts/jquery_ujs.js?1381981377" type="text/javascript"></script>
  <script src="/javascripts/application.js?1381984319" type="text/javascript"></script>

Link tag that wont work:

<%= link_to image_tag("review-icon2_16x16.png", :border=>0),
                      {:controller=>"sponjson", :action=>"review", :id=>"#{sponsor.id}"},
                      {:remote=>true, :id=>"review_spon_id_#{sponsor.id}", :alt=>"Flag for Review", :title=>"Flag for Review", :confirm => "Review ...  Are you sure?" }
                      %><br/>

EDIT. Add link tag expanded HTML:

<a href="/sponjson/review/77" alt="Flag for Review" data-confirm="Review .. Are you sure?" data-remote="true" id="review_spon_id_77" title="Flag for Review"><img alt="Review-icon2_16x16" border="0" src="/images/review-icon2_16x16.png?1338407096" /></a>

With supporting UJS:

<%=  raw("<script type='text/javascript'>
              $('#review_spon_id_#{sponsor.id}').bind('ajax:before', function(evt, status, data, xhr) {
                  beforeAjaxStatus('sstatus_#{sponsor.id}')
              });
              $('#review_spon_id_#{sponsor.id}').bind('ajax:complete', function(evt, status, data, xhr) {
                  completeAjaxStatusReview('sstatus_#{sponsor.id}')
              });
        </script>" )%>

THE PROBLEM: When I click on the link, it is NOT an AJAX request. Calls the controller just fine with this response:

    respond_to do |format|
      format.html { (head :ok) }
      format.js { (head :ok) }
      format.xml  { (head :ok) }
    end

EDIT: with routes:

/sponjson/review/:id(.:format) {:controller=>"sponsors", :action=>"review"}     
/sponjson/:id(.:format) {:controller=>"sponsors", :action=>"update"}   
/:controller(/:action(/:id))(.:format)

Upvotes: 1

Views: 672

Answers (2)

RubesMN
RubesMN

Reputation: 949

The problem is that I was missing "data-type"=>"json". This made the controller be able to detect it as a json call (with appropriate content-type) and therefore respond accordingly:

<%= link_to image_tag("review-icon2_16x16.png", :border=>0),
                      {:controller=>"sponjson", :action=>"review", :id=>"#{sponsor.id}"},
                      {:remote=>true, "data-type"=>"json", :id=>"review_spon_id_#{sponsor.id}", :alt=>"Flag for Review", :title=>"Flag for Review", :confirm => "Review ...  Are you sure?" }
                      %><br/>

Upvotes: 0

Jonathan Bender
Jonathan Bender

Reputation: 1909

It looks like you're attaching your JS events to the data-id rather than the link's id. You're also setting a border on the image, which isn't supported (supported params listed here).

Try changing your link to the following:

<%= link_to review_sponjson(sponsor), remote: true, confirm: "Are you sure?", id: "review_spon_id_#{sponsor.id}" do %>
  <%= image_tag("review-icon2_16x16.png", alt: "Flag for Review") %>
<% end %>

Upvotes: 0

Related Questions