1

我正在尝试使用 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");

我的资产/样式表文件夹中有一个 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 => "main" ' 部分有关吗？

4

2 回答 2

1

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

//= require scripts

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

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

希望这可以帮助。

于 2013-04-16T23:48:00.627 回答
0

把它整理好了。我将 scripts.js 中的所有代码包装在一个

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

那是主要的。

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

无论如何，案子已经解决了！感谢一切。

于 2013-04-17T23:30:47.413 回答