I have a user's dashboard page where the left side has a sidebar with links like Projects, Blogs, etc. I want to be able to click a link such as the "Projects" link and then in the main area, the view for projects would load up (view would be a bullet list of projects) without having to refresh the page. I'm trying to make this happen with AJAX, but things are not working.
我有一个用户的仪表板页面,左侧有一个侧边栏,其中包含项目,博客等链接。我希望能够点击链接,如“项目”链接,然后在主区域,项目视图将加载(视图将是项目的项目符号列表),而无需刷新页面。我试图用AJAX来实现这一点,但事情并没有奏效。
Here's how I think it's supposed to work. The user clicks on the sidebar link in show.html.erb
这就是我认为应该如何运作的方式。用户点击show.html.erb中的侧边栏链接
<%= link_to 'Projects', '/dash', remote: true %>
where /dash
is configured to route to users#show in the config/routes.rb
file like this:
where / dash配置为路由到用户#show在config / routes.rb文件中显示如下:
match '/dash' => 'users#show'
And then, the show
action is called inusers_controller.rb
controller:
然后,show动作被称为inusers_controller.rb控制器:
def show
@user = User.find(params[:id])
@projects = @user.projects
respond_to do |format|
format.html # renders show.html.erb
format.js # renders show.js.erb
end
end
Where show.js.erb
is executed. My show.js.erb
file has this one line:
执行show.js.erb的地方。我的show.js.erb文件有这一行:
$('#ajax').html("<%= escape_javascript(render(:partial => 'projects/index')).html_safe %>");
And that is supposed to modify the #ajax div in my show.html.erb
:
这应该修改我的show.html.erb中的#ajax div:
<div id="ajax">
<%= render :template => 'projects/index' %>
</div>
The app/views/projects/index.html.rb
takes in @projects and gives a list, like this:
app / views / projects / index.html.rb接受@projects并给出一个列表,如下所示:
<% @projects.each do |project| %>
<p><%= project.name %></p>
<% end %>
Obviously, I'm doing things wrong because this is not working. What am I doing wrong? Is there some code I need to change elsewhere? I'm on Rails 3.2.13, so the lines //=jquery
and //=jquery_ujs
under app/assets/javascripts/application.js
should have imported the necessary jQuery and AJAX functionality.
显然,我做错了,因为这不起作用。我究竟做错了什么?我需要在其他地方更改一些代码吗?我在Rails 3.2.13上,所以app / assets / javascripts / application.js下的行// = jquery和// = jquery_ujs应该已经导入了必要的jQuery和AJAX功能。
1 个解决方案
#1
11
The problem is that in your show.js.erb
file you are trying to render a partial but you are passing it a file that is not a partial. Partial files begin with an underscore _
.
问题是,在show.js.erb文件中,您尝试渲染部分文件,但是您传递的文件不是部分文件。部分文件以下划线_开头。
So, to avoid duplicating code, here's what I'd do:
所以,为了避免重复代码,这就是我要做的:
# app/views/projects/show.js.erb
$('#ajax').html("<%= escape_javascript(render :partial => 'index', :locals => { :projects => @projects } ) %>");
# app/views/projects/index.html.erb
<%= render :partial => 'index', :locals => { :projects => @projects } %>
# app/views/projects/**_**index.html.erb
# Include here the code that you previously had in index.html.erb
# Don't forget to change @projects to projects
<% projects.each do |project| %>
<p><%= project.name %></p>
<% end %>
Also, you shouldn't use match
in your routes, as you pretty much will never need your routes to be accessible by both GET and POST methods. So try to use get
instead of match
.
此外,您不应该在路由中使用匹配,因为您几乎不需要GET和POST方法都可以访问您的路由。所以尽量使用get而不是match。
#1
11
The problem is that in your show.js.erb
file you are trying to render a partial but you are passing it a file that is not a partial. Partial files begin with an underscore _
.
问题是,在show.js.erb文件中,您尝试渲染部分文件,但是您传递的文件不是部分文件。部分文件以下划线_开头。
So, to avoid duplicating code, here's what I'd do:
所以,为了避免重复代码,这就是我要做的:
# app/views/projects/show.js.erb
$('#ajax').html("<%= escape_javascript(render :partial => 'index', :locals => { :projects => @projects } ) %>");
# app/views/projects/index.html.erb
<%= render :partial => 'index', :locals => { :projects => @projects } %>
# app/views/projects/**_**index.html.erb
# Include here the code that you previously had in index.html.erb
# Don't forget to change @projects to projects
<% projects.each do |project| %>
<p><%= project.name %></p>
<% end %>
Also, you shouldn't use match
in your routes, as you pretty much will never need your routes to be accessible by both GET and POST methods. So try to use get
instead of match
.
此外,您不应该在路由中使用匹配,因为您几乎不需要GET和POST方法都可以访问您的路由。所以尽量使用get而不是match。