在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);
  }
});