如何在轨道中加载div来响应另一个div的点击？

我对Rails（和web）编程非常陌生，所以我甚至不知道我应该为此寻找什么技术。如何在轨道中加载div来响应另一个div的点击？

我已经下载并运行了Rails tutorial的前五章，但现在有一个非常简单的请求。

在网页的左侧，我会有一张桌子。如果用户点击该表中的某个元素，我想让页面的右侧显示新的内容。

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

<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>

而且我使用bootstrap layouts显示一切。我只是不明白如何根据'span4'中的用户行为来更改'span6'div的内容。

来源

2012-10-09 mmr

这是一个难以回答的问题。这实际上取决于你试图展示什么样的数据以及你在寻找什么样的交互性。

你没有真正提供关于你想要完成什么的很多信息，但是如果我必须猜测，你试图从你的数据库加载数据并将它插入一个元素而不离开当前页面。这就是AJAX的用途（你的教程在第11章中有所介绍）并涉及大量的JavaScript，这通常超出了Ruby等服务器端语言的范围。幸运的是，Rails包含了帮助器，可以轻松地将AJAX功能包含到Web应用程序中，而无需编写大量JavaScript（尽管您必须编写一些JavaScript）。

作为一个例子，假设你的表有一个文章列表，并且你想在一个div中点击一个链接时显示文章的内容。

首先链接：

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

远程选项告诉Rails，它是一个AJAX的链接。

接下来，您需要为您的文章的显示操作呈现一个javascript模板。你将它命名为show.js.erb。

假设你想要的数据被加载到这个样子的股利，

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

，你会希望你的show.js.erb包含以下内容：

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

这个JavaScript（带嵌入红宝石）代码将在单击其中一个远程链接时进行评估，并将用文章内容替换div的内容。

有大量的资源在线给你更多的信息。它看起来像railscasts就在一周前刚刚发布了episode on this topic。它需要订阅才能查看，但非常值得（尤其是如果你刚刚开始）。

来源

2012-10-10 00:31:04

完美，这正是我要找的。我知道我很宽泛，但我不知道如何去做我想做的事。 – mmr

如何在轨道中加载div来响应另一个div的点击？

回答

相关问题