2014-10-06 4 views
0

Я слежу за RailsCasts # 240 за добавление ajax к моему представлению. По сути, проблема, с которой я столкнулась сейчас, заключается в том, что URL-адрес все еще меняется, когда я сортирую столбец таблицы или перехожу на следующую страницу индекса. Я следил за рельсами, точно, не уверен, что я делаю неправильно. У кого-нибудь есть идеи?Ajax url все еще меняется

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 
+0

'.live' осуждается. попробуйте '$ (document) .on (" click "," #network th a, #network .pagination a ", function()'. Вам также может потребоваться передать переменные этой функции 'getScript', чтобы привязать возвращаемые значения к 'function (data, textStatus, jqxhr)', например. Хотя, я обычно использую '$ .ajax', поскольку у вас есть немного больше контроля над ним. – Dudo

+0

Не уверен, что я понимаю, извините за вопрос новичков, но вы говорите, что я должен заменить $ (function) на $ (document) или $ .ajax? Можете ли вы дать мне пример того, что вы подразумеваете под переменными, используя код, который у меня выше? –

ответ

0
$(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 
    }); 
}); 

Как правило, это материал AJAX, потому что у вас есть определенный контроль над тем, что происходит и что происходит.

В вашем случае, так как вы используете этот файл index.js.erb, мы можем сделать один лучше и использовать рельсы, построенный в ненавязчивой JS (это что jquery_ujs файл, который вы видите в application.js)

По вашей ссылке добавьте remote: true. (Home_index_path того, что вы настроили в маршрутах)

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

Ваш рендеринг «сеть» дважды ... не уверен, что вы хотите делать это. В любом случае ... эта ссылка пойдет (в данном случае) на домашний контроллер и действие индекса. remote: true сообщает, что отвечает js. Так что в этом действии, вы должны иметь формат блока:

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 

Использование «» ответчика камень также очень аккуратно (это поведение по умолчанию в рельсах 4.1, но является драгоценным камнем для рельсов 4.2). Это позволяет вам определить, на что реагируют действия в верхней части контроллера, а затем respond_with в действиях. Во всяком случае, только это действие отвечает на JS, он будет искать для этого js.erb файла у вас есть:

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

escape_javascript(render()) может быть обсчитывается в j render, и вызывая частичный позволяет бросать другие вещи там, как коллекции или локали. Это создаст шаблон (начинается с подчеркивания!) И выгружает его в элемент #network. Он не перезагрузит страницу, и она не изменит адресную строку.

Надеюсь, это было не так уж и много ... Я начал использовать рельсы UJS и начал использовать .ajax, поскольку мне стало комфортно работать с сырым js/coffee. Вот немного чтения, чтобы вы двигались в правильном направлении.

http://guides.rubyonrails.org/layouts_and_rendering.html прочитал, что для получения более подробной информации об оказании

http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html прочитал, что для получения информации о UJS

Смежные вопросы