通过AJAX渲染部分刷新数据

时间:2014-02-28 03:34:42

标签: javascript jquery ruby-on-rails ruby ajax

我对JS很新,但我希望我错过了一些简单的东西。我正在尝试重新加载一个异步显示图像的部分。当用户点击下面的链接时,它会记录他们的投票,然后(它应该)使用数据库中的新图像来呈现部分图钉。

index.html.erb(链接)

<%= link_to 'Less', {:controller => "pins", 
                     :action => "create_view", 
                     :rank => 0,
                     :user_id => current_user.id, 
                     :pin_id => @pins.id
                     },
                     :method => "post", :remote => true %>

pins_controller.rb(通过链接调用的方法)

def create_view
  @view = View.new
  @view.user_id = params[:user_id]
  @view.pin_id = params[:pin_id]
  @view.rank = params[:rank]

  if @view.save
   respond_to do |format|
    format.html { redirect_to root_path }
    format.js
   end
  else
   render action: "new"
  end
end

pins_controller.rb(生成@pins的方法)

def index
  seen = Array.new
  max_pins = 20
  sex = current_user.sex
  views = View.user_views(current_user)
  seen = views.map(&:pin_id)
  @pins = Pin.new_pin(seen, sex)

models / pins.rb

def self.new_pin(pin_ids, sex)
  b = TRUE
  self.find(:first, :conditions => ["sex = ? AND active = ? AND id not in (?)", sex, b,    pin_ids], :order => "created_at desc" )
end

index.html.erb(DIV和部分)

<div id="main_well">
     <%= render @pins %>
</div>

create_views.js.erb(点击时触发的javascript)

$('#main_well').html("<%= escape_javascript(render (partial: "pin", :locals => { pin: @pins})) %>");

_pin.html.erb(由JS重新加载的部分)

<div class="row">
 <div class="center_well">
   <div class="well" style="background-image: url('<%= pin.image %>')" onclick="window.open('<%= pin.product_url %>','mywindow');"></div>
 </div>
</div>

我已经有一段时间了。这就是我所知道的。单击该链接可远程更新数据库。如果我将JS更改为$('#main_well')。remove(),单击该链接会异步删除图像。但是,我不能为我的生活获取图像更新onclick而不刷新页面。在此先感谢您的帮助。

修改

如下面的答案所示,实例变量@pins在create_views方法中并不领先。因此,重新生成实例变量链接似乎可以解决问题。

pins_controller.rb

def create
 seen = Array.new
 max_pins = 20
 sex = current_user.sex
 views = View.user_views(current_user)
 seen = views.map(&:pin_id)
 @pins = Pin.new_pin(seen, sex)

 @view = View.new
 @view.user_id = params[:user_id]
 @view.pin_id = params[:pin_id]
 @view.rank = params[:rank]

 if @view.save
  respond_to do |format|
     format.html { redirect_to root_path }
     format.js
  end
 else
  render action: "new"
 end
end

但是,此解决方案仅用于成功重新加载部分一次。如果单击该链接,则会重新加载图像。但是,如果我再次单击该链接,则没有任何反应。但是,如果我改变功能,那么它可以完美地运行:

pins_controller.rb

def create
 seen = Array.new
 max_pins = 20
 offset = rand(Pin.count)
 @pins = Pin.first(:offset => offset)

 @view = View.new
 @view.user_id = params[:user_id]
 @view.pin_id = params[:pin_id]
 @view.rank = params[:rank]

 if @view.save
  respond_to do |format|
     format.html { redirect_to root_path }
     format.js
  end
 else
  render action: "new"
 end
end

第二次单击链接时似乎没有重新加载局部变量“view”。我不知道为什么。任何帮助将不胜感激。

views.rb

def self.user_views(user)
  self.find(:all, :conditions => ['user_id = ?', user])
end

2 个答案:

答案 0 :(得分:1)

<强>更新

参考评论,这有效:

def index
  seen = Array.new
  max_pins = 20
  sex = current_user.sex
  views = View.user_views(current_user)
  seen = views.map(&:pin_id)
  @pins = Pin.new_pin(seen, sex)
end

def create
  seen = Array.new
  max_pins = 20
  sex = current_user.sex
  views = View.user_views(current_user)
  seen = views.map(&:pin_id)
  @pins = Pin.new_pin(seen, sex)

  @view = View.new
  @view.user_id = params[:user_id]
  @view.pin_id = params[:pin_id]
  @view.rank = params[:rank]

  if @view.save
     respond_to do |format|
         format.html { redirect_to root_path }
         format.js
     end
  else
     render action: "new"
  end
end

原始答案

从查看代码开始,它似乎应该工作,但我想有语法问题阻止它这样做


<强> @pins

您在全新的操作中调用@pins

问题是您的ajax请求是一个新请求(您的实例在初始HTTP请求结束后结束)。这意味着您的@pins实例变量不会通过ajax调用持久化,这可能是您的部分无法正确呈现的原因

尝试:

#app/controllers/pins_controller.rb
def index
    @pins = Pin.new_pin(seen, sex)
end

def create
    @pins = Pin.find(params[:id])
end

<强>部分

调用你的部分时,你可以试试这个:

$('#main_well').html("<%=j render partial: "pin", :locals => { pin: @pins} %>");

如果您的@pins变量被正确调用

,这应该有效

<强>更新

def self.user_views(user)
   where(user_id: user.id)
end

答案 1 :(得分:0)

尝试更改此内容:

$('#main_well').html("<%= escape_javascript(render (partial: "pin", :locals => { pin: @pins})) %>");

到此(将html_safe添加到escape_javascript调用的末尾):

$('#main_well').html("<%= escape_javascript(render :partial => 'pin', :locals => { pin: @pins}).html_safe %>");

修改

问题可能与部分渲染方式有关。这有用吗?

$('#main_well').html("<%= escape_javascript("#{image_tag pin.image}").html_safe %>")