如何在div中响应单击另一个div来加载div？

Question

我是Rails（和Web）编程的新手，所以我什至不确定我应该为此寻找什么技术。

我已经下载并遍历了Rails教程的前五章，但是现在有一个非常简单的请求。

在网页的左侧，我将有一张桌子。 如果用户单击该表中的元素，我希望页面的右侧显示新内容。

我已经有一个页面来显示表格，即：

<div class="center hero-unit">
   <div class="container">
   <h2>2012 Yearly Report</h2>
     <div class="row-fluid">
       <div class="span12">
           <div class="span4">
            <table border="1">
            </table>
           </div>
           <div class="span6">
                <!-- load stuff here based on what someone clicks on in the table -->
           </div>
         </div>
      </div>
   </div>
</div>

我正在使用引导程序布局来显示所有内容。 我只是不了解如何基于“ span4”中的用户行为来更改“ span6” div的内容。

Answer 1

这是一个很难回答的问题。 这实际上取决于您要显示的数据类型以及所需的交互性。

您实际上并没有提供有关您要完成的工作的大量信息，但是如果我不得不猜测，您是在尝试从数据库中加载数据并将其插入到元素中，而无需离开当前页面。 这就是AJAX的目的（您的教程在第11章中进行了一些介绍）并涉及大量的javascript，这通常超出了Ruby之类的服务器端语言的范围。 幸运的是，rails包含了一些帮助程序，这些帮助程序可以轻松地将AJAX功能包含到您的Web应用程序中，而无需编写大量的javascript（尽管您必须编写一些javascript）。

例如，假设您的表中有一个文章列表，并且您想在单击其链接时在div中显示该文章的内容。

首先链接：

<%= link_to article.name, article_url(article), :remote => true %>

remote选项告诉Rails这是一个AJAX链接。

接下来，您需要为您的文章的show action呈现一个javascript模板。 您将其命名为show.js.erb。

假设您要将数据加载到的div如下所示，

<div id='article-content'></div>

您将希望show.js.erb包含以下内容：

$('#article-content').html("<%=javascript_escape @article.content %>");

单击您的一个远程链接时，将评估此javascript（带有嵌入式ruby）代码，并将您div的内容替换为文章的内容。

在线上有大量资源可为您提供更多信息。 看起来railscasts刚刚在一周前发布了有关此主题的一集 。 它需要订阅才能查看，但是非常值得（特别是如果您刚刚开始的话）。