Question

我还是网络开发的初学者。这不是我的职业。所以放轻松。

我今天开始构建一个rails应用程序，并意识到如果我能够在单独的div而不是新页面中显示某些链接或刷新整个页面，它将使我的应用程序变得更好。我不太确定如何搜索这个，我一直在用谷歌追逐红色鲱鱼。

基本上，我在页面左侧的div中有一个列表，当点击该列表中的一个项目时，它应该出现在右边的div中。（页面上没有其他内容需要更改）

这真的很简单。我需要使用Javascript吗？我可以使用rails js默认值，或者我应该使用JQuery吗？

有没有办法在没有javascript的情况下执行此操作？我真的只需要在这里推进正确的方向，我已经厌倦了甚至不知道如何搜索这个，或者我应该阅读哪些文档。

就像我说的那样，轻松一点，你应该继续前行并谨慎行事，并假设我什么都不知道。认真。：）

提前致谢，

-Kevin

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

Answer 1

创建您的视图（以及控制器）以显示在左侧菜单中每个项目的div内。假设我们现在有以下结构：

第1项（点击它将获取： http://myapp.com/item1）
Item2（点击它将获取： http://myapp.com/item2）

依旧...... 确保只渲染要放在内容div中的html。不应包含<head> <body> etc.代码

在您的主页面中，您可能会有这样的标记＆gt;

<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功能不是很有用）。

this thread中的最后一篇文章显示了您可以使用的一种可能解决方案。

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

2 个答案: