Ajax url still changing

Question

I've been following RailsCasts #240 on adding ajax to my view. Essentially, the problem that I'm running across right now, is that the url is still changing when I sort the table column or go to the next page of the index. I've followed the rails cast exactly, not sure what I'm doing wrong. Does anyone have any ideas?

application.js

//= require jquery
//= require jquery_ujs

$(function() {
  $("#network th a, #network .pagination a").live("click", function() {
    $.getScript(this.href);
    return false;
  });
});

index.html.erb

<h1>Network</h1>

<div class ="network">
  <div class="network-body">

    <div id="network"><%= render 'network' %></div>

  </div>
</div>

<br>

index.js.erb

$("#network").html("<%= escape_javascript(render("network")) %>");

gemfile

source 'https://rubygems.org'
ruby '2.1.2'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.4'
# Use sqlite3 as the database for Active Record
group :development do
  gem 'sqlite3'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails', '>= 3.0.4'
gem 'turbolinks', '>= 1.1.1'
gem 'jbuilder', '~> 2.0'
gem 'bcrypt', '~> 3.1.7'
gem 'devise', '~> 3.3.0'
gem 'orm_adapter', '~> 0.5.0'
gem 'warden', '~> 1.2.3'
gem 'protected_attributes', '~> 1.0.8'
gem 'simple_form', '~> 3.0.2'
gem 'will_paginate', '~>3.0.7'
gem 'bootstrap-will_paginate', '~> 0.0.10'
gem 'ancestry', '~> 2.1'
gem 'whenever', require: false
gem 'geocoder', '~> 1.2'

group :doc do
  gem 'sdoc', '~> 0.4.0', require: false
end

group :production do
  gem 'pg', '~> 0.17.1'
  gem 'rails_12factor', '~> 0.0.2'
end

Answer 1

$(document).on('click', '#network th a, #network .pagination a', function(){
  $.ajax({
    'type': 'get',
    'dataType': 'script',
    'url': this.href,
    'data': {
      // params you want to send to the server
    }
  })
  .complete(function(return_value){
    alert('something!');
    // completed
  });
});

That's typically how I AJAX stuff, because you have some granular control over what's coming and going.

In your case, since you're using that index.js.erb file, we can do one better, and use rails' built in unobtrusive js (that's that jquery_ujs file you see in application.js)

On your link, add remote: true. (home_index_path being whatever you have setup in your routes)

<%= link_to 'something', home_index_path, remote: true %>

Your rendering 'network' twice... not sure you want to be doing that. Anyway... that link will go (in this case) to the home controller, and the index action. remote: true tells it to respond with js. So in that action, you have to have a format block:

respond_to do |format|
  format.html { # html response }
  format.js { # js response # you might need layout: false here if too much is being rendered }
end

Using the 'responder' gem is also pretty neat (which is default behavior in rails 4.1, but is a gem for rails 4.2). That lets you define what the actions respond to at the top of the controller, then respond_with in the actions. Anyway, Once this action responds to the js, it's going to be looking for that js.erb file you have:

$("#network").html("<%= j render partial: 'home/network' %>");

escape_javascript(render()) can be shorthanded to j render, and calling a partial lets you throw other stuff in there, like collections, or locales. That will build the template (starts with an underscore!) and dump it into the #network element. It will not reload the page, and it won't change the address bar.

Hopefully that wasn't too much at once... I started off using rails' UJS, and started using .ajax as I became more comfortable with raw js/coffee. Here's a bit of reading to get you moving in the right direction.

http://guides.rubyonrails.org/layouts_and_rendering.html read that for more info on rendering

http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html read that for info on ujs