在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. 您已在remote: true上致电link。我认为这意味着你想在点击链接时激活ajax，而不是“脉冲”（悬停）？
2. 您的Ajax电话无效。如果您是从控制器的js操作中调用它，则不需要ajax，因为您已经在运行异步请求。
3. 我认为你过分复杂应该是一件相对简单的事情。

<强>的Ajax

A 同步 J avascript a nd X ML只是一个技术子集，可让您调用“迷你“通过浏览器请求：



请求的异步慢性意味着它可以与您当前的一起被触发。因此，如果您的链接上有remote: true来电，则只需转到invoke an ajax request。

您正在触发此初始ajax请求，然后告诉您的系统触发另一个。这违反了所有惯例，被视为antipattern。

因此，如果您要使用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来实现悬停效果。

已经有很多资源可以实现这一目标，所以我会让他们帮助你：

• CSSWizard
• TutorialRepublic
• CSSTricks（非常好）

Answer 2

如果您收到路线错误，请在控制台上使用

${row.ACCO60?html}并检查您要传递的路径

你会发现像/ controller / action_name / id_parameter

这样的东西

使用精确路径传递ajax调用

Answer 3

根据您的代码，您似乎忘了使用＆lt;％=％＆gt;。

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