在Rails应用程序中，如何在div中加载链接而不是刷新整个页面？

Question

我仍然是Web开发的初学者。 这不是我的专业。 所以轻松点。

我今天开始构建Rails应用程序，并意识到，如果我可以让某些链接显示在单独的div中而不是新页面中，或者刷新整个页面，它将使我的应用程序变得更好。 我不太确定该如何搜索，我一直在用Google追赶红鲱鱼。

基本上，我在页面左侧的div中有一个列表，当单击该列表中的一项时，它应该出现在右侧的div中。 （该页面上的其他任何内容都无需更改）

那真的很简单。 我需要为此使用Javascript吗？ 我可以摆脱Rails js的默认设置，还是应该使用JQuery？

没有JavaScript，有没有办法做到这一点？ 我真的只需要在这里朝着正确的方向推进，我甚至不知道如何搜索此内容，或者我应该阅读哪些文档，这让我感到厌倦。

就像我说的，放松一点，您应该继续前进，谨慎一点，并假设我一无所知。 认真。 :)

提前致谢，

-Kevin

（顺便说一下，我正在开发Rails 3）

Answer 1

创建视图（以及控制器）以显示在div中，左侧菜单上的每个项目。 可以说我们现在具有以下结构：

Item1（单击它将获取： http : //myapp.com/item1 ）
Item2（单击它将获取： http : //myapp.com/item2 ）

依此类推...确保只渲染要放在内容div中的html。 不应包含<head> <body> etc.标签

在您的主页中，您可能会有这样的标记>

<div id="leftMenu">
<a href="http://myapp.com/item1">Item 1</a>
<a href="http://myapp.com/item2">Item 2</a>
</div>

<div id="content">
Please click on an item on the left menu to load content here
</div>

最后，添加以下Javascript（您需要jQuery；相信我，这是一个不错的决定）。

$("#leftMenu a").click(function () {

   $("#content").load($(this).attr("href")); //load html from the url and put it in the #content element

   return false; //prevent the default href action

});

Answer 2

如果要避免重新加载页面，则需要JavaScript。 您可以将link_to用于列表中的链接，并且需要使用:remote => true使其发送AJAX请求到服务器。 服务器将需要适当地响应并为您的div提供HTML。

link_to文档在这里： http : //api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to （当然，它对AJAX功能不是很有用）。

该线程的最后一篇文章显示了您可以使用的一种可能的解决方案。

在Rails应用程序中，如何在div中加载链接而不是刷新整个页面？

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-06-19 23:35:16

解决方案2
0 2011-06-19 23:34:38

在Rails应用程序中，如何在div中加载链接而不是刷新整个页面？

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-06-19 23:35:16

解决方案2 0 2011-06-19 23:34:38

解决方案1
1 已采纳 2011-06-19 23:35:16

解决方案2
0 2011-06-19 23:34:38