如何从Rails中的数据库获取第一条记录，然后使用Ajax加载其他数据？

我有一个包含许多图像的滑块。我想加载第一张图片，然后在页面加载完成后，逐个加载Ajax。如何从Rails中的数据库获取第一条记录，然后使用Ajax加载其他数据？

我想运行滑块，如果它至少有两个图像。如果加载了第三张图像，则会将其附加到其他图像，等等，除非加载了所有图像。

我使用Rails 3.2和jQuery。是否有意义？我怎样才能做到这一点？

pages_controller.rb 
def show 
    @slider_items = @page.slider_items.where(:visible => true) 
end 

show.html.haml 
%table.slider 
    %tr 
    - @slider_items.each do |item| 
     %td.si 
     .slider_item= image_tag(item.slider_image)

来源

2012-09-18 Kovalev Vyacheslav

这是出于性能原因，你想保持网站的响应情况下，有大量的图像？你可以用两种方法做，第一种是加载一个，以滑块形式显示，然后加载所有其他的并显示，或者＃2加载一个，以滑块形式显示，在滑块中加载另一个显示，加载第三个，显示全部三个在滑块等... – RadBrad

没关系，你解释了你想要的，一个接一个。我会制作一个答案 – RadBrad

好吧，我要假设你的滑块是某种需要表结构的javascript gizmo。所以你必须弄清楚的第一件事是如何将行插入到现有的表中。

假设您正在生成的初始页面加载后，下面的HTML只有一个形象：

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
</table>

您需要能够，通过JavaScript，将新行插入该表。我将不得不假设你现在正在使用jquery。下面是一些jQuery的：

$('#slider:last-child').append("<tr><td>Hi!</td></tr>");

如果会导致jQuery来执行，你的DOM随后将包含：

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
    <tr><td>Hi!</td></tr> 
</table>

再次执行相同的JavaScript，然后：

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
    <tr><td>Hi!</td></tr> 
    <tr><td>Hi!</td></tr> 
</table>

这一个关键的jQuery代码，但它到底是什么，以及如何使它正确？

那么，调用jQuery代码需要发生后，每个AJAX调用得到的下一个图像。所以你必须解决的下一个问题是你如何迭代所有的图像，一次一个通过AJAX？

这将涉及JavaScript变量在浏览器中进行维护，该变量是所有图像的索引。至少，您必须在页面加载时捕获最大数量的图像。你可以这样做：

show.html.erb：

<script type='text/javascript'> 
    $(document).ready(function() { 
    var maximage = <%= @maximage %>; 
    var curimage = 0; 
    }); 
</script>

为了这个工作，你必须设置@maximage。

应用程序/控制器/ pages_controller.rb：

class PagesController < ApplicationController 
    before_filter :prep_images , :only => [:show] 
    def prep_images 
    @maximage = @page.slider_items.length 
    end 
end

所以当DOM已准备就绪事件触发，感谢该局扩展，你的HTML将包含一个包含脚本部分：

var maximage = 12; 
var curimage = 0;

假设有12个图像。

在这一点上，我不得不提到命名空间冲突，maximage可以很好地用于其他使用的JavaScript库的变量。如果你发现这种情况，你必须解决这个问题，但我会认为没有冲突。

好的，我一直在构建这篇文章一段时间了。如果您认为我的方向正确，请告诉我，我会填写其余的详细信息。

来源

2012-09-19 01:43:53 RadBrad

如何从Rails中的数据库获取第一条记录，然后使用Ajax加载其他数据？

回答

相关问题