使用jquery在rails中呈现部分内容

时间:2022-10-08 13:17:31

I am trying to setup a navigation bar on my home page that loads a partial into a div element when the user clicks on the links. I have followed the steps in this post and modified them as I thought I needed: Rails 3 - link_to to call partial using jquery ajax

我正在尝试在我的主页上设置一个导航条,当用户单击链接时,该导航条将部分加载到div元素中。我已经按照本文中的步骤进行了修改,并按照我认为需要的方式进行了修改:Rails 3 - link_to使用jquery ajax调用部分

My code:

我的代码:

views/pages/home.html.erb:

视图/页/ home.html.erb:

<%= link_to "Files", :action => 'load_upload_partial', :remote => true %>

. . .

<div id="main_frame"></div>

pages_controller:

pages_controller:

def load_upload_partial  
    respond_to do | format |  
      format.js {render :layout => false}  
    end
end

/views/uploads/load_upload_partial.js.erb:

/视图/上传/ load_upload_partial.js.erb:

$("#main_frame").html( "<%= escape_javascript( render( :partial => "/upload/upload_form" ) %>" );

The partial in this example is just a form. When I click on the link I get a blank page with this is the address bar: http://localhost:3000/load_upload_partial?remote=true

这个例子中的偏导只是一个形式。当我点击链接时,我得到了一个空页面,上面有地址栏:http://localhost:3000/load_upload_partial?remote=true

This makes me think that link is not triggering an ajax GET request (if that's the correct terminology). If that is the case is there anything I need to be adding to my application.js file? I followed the railscast #136 on rails and jquery but couldn't figure out which bits of the application.js code applied to my case. Any thoughts are much appreciated. Thanks. Tom

这使我认为链接并没有触发ajax GET请求(如果这是正确的术语)。如果是这样的话,我是否需要在我的应用程序中添加任何东西。js文件?我在rails和jquery上跟踪了railscast #136,但不知道应用程序的哪些部分。适用于我的情况的js代码。非常感谢您的任何想法。谢谢。汤姆

4 个解决方案

#1


4  

I now tend to avoid using RJS like you're intending to. I prefer creating js templates with tools like handlebars.

我现在倾向于避免使用像您这样的RJS。我更喜欢使用handlebars等工具创建js模板。

I only use ajax to get raw data and then recreate the partial client side. It's much better for server load and data transfer.

我只使用ajax获取原始数据,然后重新创建部分客户端。它更适合服务器负载和数据传输。

#2


0  

I think you have to change your link_to to:

我想你必须把你的链接改为:

<%= link_to "Files", {:action => 'load_upload_partial' }, remote => true %>

The problem is related to the method signature of link_to.

这个问题与link_to的方法签名有关。

#3


0  

ran into this same problem - the hint was in the malformed html produced - take a look at the value of the href attribute of the tag produced by your code. I bet it looks funky. Here's the correct code:

遇到同样的问题——提示出现在生成的格式错误的html中——请查看代码生成的标记的href属性的值。我打赌它看起来很时髦。正确的代码如下:

    <%= link_to "Files", your_path, action: 'load_upload_partial', remote: true %>

#4


-1  

have you tried using .load() instead of .html()?

您尝试过使用.load()而不是.html()吗?

Also, try using this line instead:

同样,试着用这条线代替:

$("#main_frame").html( "<%= escape_javascript( render( :partial => '/upload/upload_form' ) %>" );

#1


4  

I now tend to avoid using RJS like you're intending to. I prefer creating js templates with tools like handlebars.

我现在倾向于避免使用像您这样的RJS。我更喜欢使用handlebars等工具创建js模板。

I only use ajax to get raw data and then recreate the partial client side. It's much better for server load and data transfer.

我只使用ajax获取原始数据,然后重新创建部分客户端。它更适合服务器负载和数据传输。

#2


0  

I think you have to change your link_to to:

我想你必须把你的链接改为:

<%= link_to "Files", {:action => 'load_upload_partial' }, remote => true %>

The problem is related to the method signature of link_to.

这个问题与link_to的方法签名有关。

#3


0  

ran into this same problem - the hint was in the malformed html produced - take a look at the value of the href attribute of the tag produced by your code. I bet it looks funky. Here's the correct code:

遇到同样的问题——提示出现在生成的格式错误的html中——请查看代码生成的标记的href属性的值。我打赌它看起来很时髦。正确的代码如下:

    <%= link_to "Files", your_path, action: 'load_upload_partial', remote: true %>

#4


-1  

have you tried using .load() instead of .html()?

您尝试过使用.load()而不是.html()吗?

Also, try using this line instead:

同样,试着用这条线代替:

$("#main_frame").html( "<%= escape_javascript( render( :partial => '/upload/upload_form' ) %>" );