在Rails的部分刷新页面 [英] Reloading page partially in Rails
问题描述
我正在开发的Rails的一个音乐网站。登陆页面被分割并有一个搜索表单，你可以查找存储在数据库中的乐队。里面其他分割我的嵌入式播放器重放一些随机的视频。我希望出现在同一登陆页面上的搜索结果。
I'm developing a music website in Rails. The landing page is divided and has a search form where you can look up bands stored in the DB. Inside the other division I embedded a player reproducing some random videos. I want the search results being displayed on the same landing page.
当我提交表单页面重新加载和播放器重装也并开始播放不同的视频。我真正想要实现的是，虽然搜索表单提交的玩家不会被打断。
When I submit the form the page reloads and the player reloads also and starts playing a different video. What I actually want to achieve is that the player doesn't get interrupted while the search form is submitted.
不知道这是怎么可能，我想要的方式。如果我这样做是正确此链接说明这样做的一种方式，但我没有得到它的工作。
Don't know if and how this is possible the way I want it. If I got it right this link describes one way to do that but I didn't get it to work.
家居控制器
def index
@bands = Band.search(params[:search]).order("name ASC")
@random_band = Band.order("RANDOM()").limit(1)
end
def preview
@bands = Band.search(params[:search]).order("name ASC")
render :partial => 'preview', :content_type => 'text/html'
end
_ preview.html.erb
_preview.html.erb
<table class="table"
<tr>
<th>Title</th>
<th>Year</th>
</tr>
<% @bands.each do |f| %>
<tr>
<td>
<%= f.name %>
</td>
</tr>
<% end %>
</table>
回家＃指数
<!DOCTYPE html>
<html lang="en">
<form class="navbar-form navbar-left" role="search">
<%= form_tag({:action => 'preview'}, id: "search-form", :remote => true, :'data-update-target' => 'update-container') do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Bands" %>
<%= submit_tag "Search" %>
<% end %>
</form>
<div class="row">
<div class="col-md-6">
<div id="update-container">
<%= @random_band.first.name %>
</div>
</div>
<div class="col-md-6">
<%= video_tag("#{@random_band.first.name}.mp4", size: "460x390",
controls: true, autobuffer: true, autoplay: true) %>
</div>
</div>
</html>
的application.js
application.js
$(function() {
/* Convenience for forms or links that return HTML from a remote ajax call.
The returned markup will be inserted into the element id specified.
*/
$('form[data-update-target]').live('ajax:success', function(evt, data) {
var target = $(this).data('update-target');
$('#' + target).html(data);
});
});
第一个问题：形式似乎并没有找到preVIEW行动。
First problem: The form doesn't seem to find the preview action.
第二个问题：如果我更改索引的内容与preVIEW行动确实找到了preVIEW作用明显，但它并没有呈现更新，容器内的搜索结果。相反，它使他们作为一个全新的页面。
Second problem: If I change the content of the index with the preview action it does find the preview action obviously but it doesn't render the search results inside the update-container. Instead it renders them as a whole new page.
顺便说一句，我知道我的路周围的Rails了一点，但我有绝对没有使用Ajax的经验。
By the way, I know my way around Rails a bit but I've got absolutely no experience with Ajax.
推荐答案
你有你的大部分code非常扭曲的，而不是真正的瘦，据我可以告诉。让你的搜索结果更新的短期和非常精简的方式无需重新加载页面（包括播放器）的其余部分可能看起来像这样。该指数函数应该是这样的：
You got most of your code very twisted and not really lean as far as I can tell. The short and very lean way to get your search results updated without reloading the rest of the page (including your player) could look like this. The index function should look like this:
//bands_controller.rb
def index
@bands = Band.search(params[:search])
end
您必须创建搜索方法你带模型里面：
You have to create the search-method inside of your Band-Model:
//Band.rb
def self.search(search)
if search
find(:all, :conditions => ['name LIKE ?', "%#{search}%"])
else
find(:all)
end
end
您需要渲染_ $ P $一个div内pview.html.erb具有一定的ID某处视图中：
You need to render your _preview.html.erb inside a div with a certain ID somewhere inside your view:
<div id="bands"><%= render 'preview' %></div>
您的form_tag有很多争论，你将不再需要的：
Your form_tag has a lot of arguments that you won't need anymore:
<%= form_tag bands_path, :method => 'get', :id => "search_form" do %>
<%= text_field_tag :search, params[:search] %>
<%= submit_tag "Search", :name => nil %>
<% end %>
我用我的方式jQuery的是这样的.. pretty的在我看来很简单：
The jquery I use for my forms looks like this.. Pretty simple in my opinion:
$(function() {
$("#search_form input").keyup(function() {
$.get($("#search_form").attr("action"), $("#search_form").serialize(), null, "script");
return false;
});
});
这将触发index.js.erb的（你必须创建一个）每次你把信塞进你的搜索字段：
This fires the index.js.erb (you will have to create that) everytime you put a letter into your search field:
//index.js.erb (same folder as index.html.erb)
$("#bands").html("<%= escape_javascript(render("preview")) %>");
这应该刷新你的分区。这也许有点工作，但是这是实现一个AJAX搜索功能到你的索引页，我能想到的最简单的方法。
This should refresh your div. It's maybe a little work but that's the easiest way to implement an ajax search function into your index page that I could think of.
来源： Railscast＃27 Railscast＃240
这篇关于在Rails的部分刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
