阿賈克斯不工作在我的鐵軌項目

我想添加一個效果到我的鐵軌項目使用阿賈克斯。有4個格我的網頁上：阿賈克斯不工作在我的鐵軌項目

<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'

指數的方法是：

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」部分有關嗎？

來源

2013-04-16 CHarris

當代碼在你的'public'文件夾中工作時，你使用了哪些文件？ – summea

嗨Summea，我正在使用index.html（它包含我的application.html.erb代碼），scripts.js，style.css，about.html，contact_us.html，home。html – CHarris

當你正常運行應用程序（使用Rails）時，你在瀏覽器中看到任何JavaScript錯誤？ *（我發現你寫過JavaScript在'public'文件夾中運行時的工作原理......但只是想知道是否有可能會在JavaScript控制檯中顯示的東西丟失。）* :) – summea

對它進行排序。我將所有的代碼包裝在我的scripts.js中

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

這是主要的。

此外，我調用jquery庫兩次，這可能沒有幫助 -// =要求jquery，在我的application.js.erb文件，也從我的application.html.erb。

無論如何，案件已解決！謝謝你的一切。

來源

2013-04-17 23:30:47 CHarris

啊！很高興你把事情解決了。 – mchail

您可能需要確保在加載頁面時正在提供scripts.js。我發現你的佈局文件中包含了application.js。此文件在Rails資產管道中用作清單文件，因此請確保在加載時將其配置爲包含scripts.js。這將需要有這樣一行：

//= require scripts

在瀏覽器中，假設你在3000端口上運行的軌道服務器，你可以確保你的腳本文件是通過訪問http://localhost:3000/assets/scripts.js訪問。您可以通過訪問http://localhost:3000/assets/application.js來確保它包含在application.js中。在資產管道

希望這有助於。

來源

2013-04-16 23:48:00 mchail

嗨，謝謝。 scripts.js在那裏，我確實在我的application.js.erb文件中放入了// = require腳本。 erb擴展名可以嗎？但是當我在瀏覽器中放置http：// localhost：3000/assets/application.js時，代碼與application.js.erb不同，我將需要的細節放入。那對嗎？ – CHarris

我沒有在資產流水線JavaScript中使用erb，但根據文檔，你可以做到這一點。當您在瀏覽器中加載application.js時，您是否看到scripts.js中的javascript？你的'ajax_loaded'函數和那個文件的其餘部分一起嗎？我沒有看到任何其他明顯的區域來檢查你的代碼，但我會給它另一個閱讀。讓我知道如果你有github回購，我可以克隆和調試。 – mchail

嗨，在我的application.js.erb文件中，我可以看到我的ajax_loaded函數以及其餘的scripts.js文件。但我無法在任何地方看到我的'需要腳本'代碼。事實上，沒有「要求」任何文件。 – CHarris

阿賈克斯不工作在我的鐵軌項目

回答

相關問題