在div中异步加载，Ruby On Rails + AJAX

Question

首先，我将解释我想做什么。 我有一个带有导航栏的主页面和一个区域（“ div”为“ principal”），当我在导航栏上脉动时，我想以异步方式在其中加载相应的区域。 为此，我使用RoR + AJAX。 我遇到的问题是，当我尝试上载我正在使用的其他控制器的视图时（“ principal_controller”）告诉我它找不到路径。

index.html.erb：

<%= link_to(principal_noticias_path, :class=>"mdl-navigation__link", remote: true) do %>
        <i class="mdl-color-text--blue-purple-400 material-icons" role="presentation">description</i>Noticias
      <% end %>
....
      <main id="demo-contenido" class="mdl-layout__content mdl-color--grey-100">
  </main>

noticias.js.erb

$.ajax({
url: "xmlposts_path",
cache: false,
success: function(html){
  $("#demo-contenido").append(html);
}
});
$('#demo-contenido').slideDown(350);

问题是“ xmlposts_path”是其他控制器。 我不知道我解释得很好。 谢谢。

Answer 1

我有一个带有导航栏的主页面和一个区域（“ div”为“ principal”），当我在导航栏上脉动时，我想在其中以异步方式加载对应的区域

正确的术语是hover （不是脉冲）。

好的，您的代码有很多问题。 特别：

1. 您已将link称为remote: true 。 我认为这意味着您想在单击链接时触发ajax，而不是“ pulse”（悬停）吗？
2. 您的Ajax调用没有任何作用。 如果要通过控制器的js操作调用它，则不需要ajax，因为您已经在操作异步请求。
3. 我认为您过于复杂，这应该是相对简单的事情。

---

阿贾克斯

一个同步Ĵavascript 一个次X ML是一个简单的技术子集，它允许你打电话通过浏览器的“迷你”的要求：

异步请求的长期性意味着它可以与您当前的请求一起被触发。 这样，如果您的链接上有一个remote: true调用，则只需调用ajax request即可 。

您正在触发此初始ajax请求，然后告诉系统触发另一个。 这违反所有约定，被认为是反模式 。

因此，如果要使用remote: true ，则应该期望直接从控制器方法返回菜单字段：

#app/controllers/noticias_controller.rb (?)
class NoticiasController < ApplicationController
   def your_action
      @data = Data.all
      respond_to do |format|
         format.js #-> invokes app/views/noticias/your_action.js.erb
      end
   end
end

#app/views/noticias/your_action.js.erb
$("#demo-contenido").append(<%= @data %>);

这只是一个例子，但是应该解释您的Ajax结构的主要问题。

---

方法

接下来，我们介绍您的方法。

为什么要尝试使用Ajax拉菜单项？ 您将不必要地ping服务器。 只需将它们全部保存在_partial.html.erb ：

#app/views/common/_menu.html.erb
# menu items hard coded here

然后可以将菜单集成到布局中，如下所示：

#app/views/layouts/application.html.erb
<%= render "common/menu" %>

您可以使用CSS或JS来实现悬停效果。

已经有很多资源可以实现这一目标，因此，我将让他们为您提供帮助：

• CSS向导
• TutorialRepublic
• CSS技巧 （非常好）

Answer 2

如果出现路由错误，请在控制台上使用

rake routes并检查您要通过的路径

您会发现类似/ controller / action_name / id_parameter的信息

使用精确路径传递ajax调用

Answer 3

通过您的代码，看来您只是忘记使用<％=％>。

$.ajax({
  url: "<%= xmlposts_path %>",
  cache: false,
  success: function(html){
    $("#demo-contenido").append(html);
  }
});