Question

我正在尝试使用ajax为我的rails项目添加效果。我的页面上有4个div：

<div header></div>
<div menu></div>
<div content></div>
<div footer></div>

单击菜单div中的链接时，页脚应向上滑动，新页面文本应显示在内容div中。当我在公共文件夹中的所有文件中，在rails项目中，代码工作正常，但是当我将文件放在View文件夹中时，它不起作用。知道为什么吗？

我的assets / javascripts文件夹中有一个scripts.js文件。代码是：

  var ajax_loaded = (function(response) {               
  $("#content").slideUp(                            
    "fast",                                         
    function() {                                    
        $("#content")                           
            .html(response)                         
            .slideDown("fast");                     

        $("#content .ajax").on("click",ajax_load);  
        $("#content form").on("submit",form_submit);
    });
});

var form_submit = (function(e) {                    
    e.preventDefault();                             

    var url = $(this).attr("action");               
    var method = $(this).attr("method");            


    var data = {}                                   
    $(this).find("input, textarea").each(function(i){
        var name = $(this).attr("name");            
        var value = $(this).val();                  

        data[name] =value;                          

    }); 

    $.ajax({                                        
        "url": url,                                 
        "type": method,                             
        "data": data,                               
        "success": function () {                    
            history.pop();                          
            $(history.pop()).trigger("click");      
        },
        "error": function () {alert("bad");}        
    });
});


var history = [];                                   

var current_url_method;                             

var ajax_load = (function(e) {                      
    e.preventDefault();                             


    history.push(this);                             

    var url =$(this).attr("href");                  
    var method = $(this).attr("data-method");       

    if (current_url_method != url + method) {       
        current_url_method = url + method;          

        $.ajax({                                    
            "url": url,                             
            "type": method,                         
            "success": ajax_loaded,                 
        });
     }
});

$("#menu a").on("click",ajax_load);                 
$("#menu a.main").trigger("click");

我的assets / stylesheets文件夹中有一个style.css.scss。代码是：

#header {
    background: #333333;
    height:50px;
}

     #menu {
      background: #ffffff;

      }

#content { background: #eeeeee;height:100px;}
#footer {
    background: #333333;
    color: #ffffff;
    height: 100px;
}

在我的路线文件夹中，我有：

 Books::Application.routes.draw do

  get "about_us", :to => "static_pages#about_us"
  get "contact_us", :to => "static_pages#contact_us"
  get "invite_us", :to => "static_pages#invite"
  get "faq", :to => "static_pages#faq"

  root :to => 'books#index'

Books控制器中的索引方法是：

def index
render :layout => "application"
end

在我的视图/布局中，在application.html.erb中，我（我的公共文件夹稍有变化，其中链接的格式为<a href = "/about.html" class = "main">About Us</a>)：

<!DOCTYPE html>
<html>
<head>
  <title>Books</title>
  <%= stylesheet_link_tag "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<div id = "header">My header</div>
<div id = "menu">
          <%= link_to "About Us",about_us_path,:class => "main" %>
          <%= link_to "FAQ", faq_path, :class => "main" %>
          <%= link_to "Invite Others", invite_us_path, :class => "main" %>
          <%= link_to "Contact Us", contact_us_path, :class => "main" %>
</div>

<div id = "content">
<%= yield %>
</div>

<div id = "footer">My footer</div>

<script src = "http://code.jquery.com/jquery-1.9.1.min.js">
</script>
</body>
</html>

无论如何，如果你对什么是错的有任何想法，我将不胜感激，谢谢。就像我说的，它在公共文件夹中吵闹，所以我认为我的scripts.js没问题。可能与'：class =＆gt;有关吗？ “主要”部分？

Answer 1

您可能希望确保在加载页面时提供scripts.js。我看到你在layout文件中包含了application.js.此文件用作Rails资产管道中的清单文件，因此请确保在加载时将其配置为包含scripts.js。它需要有这样的一行：

//= require scripts

在浏览器中，假设您在端口3000上运行rails服务器，您可以访问http://localhost:3000/assets/scripts.js以确保可以访问您的脚本文件。您可以访问http://localhost:3000/assets/application.js来确保它包含在application.js中。

有关资产管道的更多信息：http://guides.rubyonrails.org/asset_pipeline.html

希望这有帮助。

Answer 2

让它排序。我将所有代码都包含在我的scripts.js中的

中

$(document).on("ready", function(){......});

这是主要的事情。

另外，我两次调用jquery库，这可能没有帮助 - // = require jquery，在我的application.js.erb文件中，也来自我的application.html.erb。

无论如何，案件已经解决了！谢谢你的一切。

ajax在我的rails项目中没有工作

2 个答案: