2016-07-05 37 views
1

我目前正在嘗試編碼我的rails應用程序在c9上使用js的測驗,但js似乎並未被加載到視圖文件中。有人可以告訴我什麼是錯誤的或建議修復?Rails視圖javascript的未加載

與測驗的主頁上開始:

<div class = "signinstyle"> 
    <div class = "row"> 


    <div id="wrapAll"> 
     <div id="wrapper"> 

       <img id="logo" src="img/geek.png" alt=""><br> 
       <h1>Help us recommend a <span>Course</span></h1> 

       </div> 
       </div> 
       </div> 
       <div class ="row"> 
        <div id="wrapper"> 
       <input class="start-btn" type="submit" value="Start!" onclick="redirect('ques.html')"> 

     </div> 
    </div> 



</div> 


    <script src='main.js' type='text/javascript'></script> 

這是應該從JS拉問題的看法:

<!--Functionality of recommender?? --> 
    <% provide(:title, '') %> 


    <!--containers for design/layout --> 
    <div class = "signinstyle"> 
     <div class = "row"> 
     <!--Page information --> 


     <div id="wrapAll"> 
      <div id="wrapper"> 

        <div class="ques-wrap"> 
         <h2 id="ques">This is question</h2> 
         <input class="btn1" type="submit" id="opt1" value="Option 1" onclick="optionClick('1')"> 
         <input class="btn2" type="submit" id="opt2" value="Option 2" onclick="optionClick('0')"> 
         <div class="clear"></div> 

       </div> 
      </div> 
     </div> 

     </div> 
     </div> 
     <script src='main.js' type='text/javascript'></script> 
     <script type='text/javascript'> 
      window.onload = function(){ 
       generate(); 
      }; 
     </script> 

應用佈局來看:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title><%= yield(:title) %> | Uni2choose</title> 

    <%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 

</head> 
<body> 

    <%= render 'layouts/navbar' %> 
    <%= render 'layouts/header' %> 

<br><br><br><br> 

     <% flash.each do |message_type, message| %> 
     <div class="alert alert-<%= message_type %>"><%= message %></div> 
     <% end %> 


     <%= yield %> 




<%= render 'layouts/footer' %> 
</body> 





</html> 

main.js文件:

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require chartkick 
//= require turbolinks 
//= require_tree . 



var data = { 
    questions: [{ 
      question: "Which interests you most?", 
      options: [ "Medicine" , "Drama" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Biology" , "Music" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Chemistry" , "Sculpting" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Psychology" , "Design" ] 
     }, { 
      question: "Which interests you most", 
      options: [ "Animals" , "Art" ] 
     }, { 
      question: "Which interests you most", 
      options: [ "Maths" , "Outdoors" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Engineering" , "English" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Computing" , "Ancient history" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Physics ", "Dance" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Geography" , "Fashion" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "History" , "Dentistry" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Debating" , "Photography" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Creative Writing" , "Accounting" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Archaeology " , "Hospitality" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Construction " , "Teaching" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Graphics" , "Philosophy" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Business" , "Drawing" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Nutrition" , "Politics" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Sports" , "IT" ] 
     }, { 
      question: "Which interests you most?", 
      options: [ "Economics" , "Languages" ] 
     },], 
    geeks: [ 
     { 
      name: "Linus Torvalds", 
      info: "Linus Benedict Torvalds is a Finnish American software engineer, who was the principal force behind the development of the Linux kernel that became the most popular kernel for operating systems." 
     }, { 
      name: "Dennis Ritchie", 
      info: "Dennis MacAlistair Ritchie was an American computer scientist. He created the C programming language and, with long-time colleague Ken Thompson, the Unix operating system." 
     }, { 
      name: "Bill Gates", 
      info: "William Henry 'Bill' Gates III is an American business magnate, philanthropist, investor, computer programmer, and inventor." 
     }, { 
      name: "Steve Jobs", 
      info: "Steven Paul 'Steve' Jobs was an American entrepreneur, marketer, and inventor, who was the cofounder, chairman, and CEO of Apple Inc." 
     }, { 
      name: "Steve Wozniak", 
      info: "Stephen Gary 'Steve' Wozniak, known as 'Woz', is an American inventor, electronics engineer, and computer programmer who co-founded Apple Computer with Steve Jobs and Ronald Wayne." 
     }, { 
      name: "Mark Zuckerberg", 
      info: "Mark Elliot Zuckerberg is an American computer programmer and Internet entrepreneur. He is best known as one of five co-founders of the social networking website Facebook. Zuckerberg is the chairman and chief executive of Facebook, Inc." 
     }, { 
      name: "Tim Berners-Lee", 
      info: "Sir Timothy John 'Tim' Berners-Lee, also known as TimBL, is an English computer scientist, best known as the inventor of the World Wide Web." 
     }] 
}; 

var qIndex = 0, 
    index = 0, 
    aString = "", 
    maxQ = 20, 
    q = document.getElementById('ques'), 
    opt1 = document.getElementById('opt1'), 
    opt2 = document.getElementById('opt2'); 

function generate(){ 
    q.innerHTML= data.questions[qIndex].question; 
    opt1.value= data.questions[qIndex].options[0]; 
    opt2.value= data.questions[qIndex].options[1]; 
} 

function optionClick(ans) { 
    if(qIndex%2==0){ 
     aString+=ans; 
     index++; 
    } 
    qIndex++; 
    if(qIndex == maxQ){ 
     redirect("result.html?" + generateResult(aString)); 
    } else{ 
     generate(); 
    } 
} 

function generateResult(answers) { 
    if(answers=="11110" || answers=="11000" || answers=="01000") return 0; 
    else if(answers=="11111" || answers=="01010") return 1; 
    else if(answers=="10011" || answers=="00111" || answers=="00101") return 2; 
    else if(answers=="10100" || answers=="00110" || answers=="00000") return 3; 
    else if(answers=="10101") return 4; 
    else if(answers=="11101" || answers=="10010" || answers=="01111") return 5; 
    else return 6; 
} 

function showResult() { 
    var id = window.location.search.substring(1); 
    var Geeks = data.geeks; 
    var totalGeeks = Object.keys(Geeks).length - 1; 
    if(id > totalGeeks || id < 0 || !id) redirect("index.html"); 
    var name = document.getElementById("geekName"); 
    var info = document.getElementById("geekInfo"); 
    var img = document.getElementById("geekImage"); 
    name.innerHTML = Geeks[id].name; 
    img.src = "img/"+id+".png"; 
    img.alt =Geeks[id].name; 
    info.innerHTML = Geeks[id].info; 
} 

function redirect(url) { 
    window.location = url; 
} 

回答

1

您的問題是在下面的行

<script src='main.js' type='text/javascript'></script> 

它將從公共路徑,而不是資產的路徑搜索。所以將它改爲

<%= javascript_include_tag 'main' %> 
+0

在這兩個視圖中,所以在新的html和ques之一,還是在應用程序佈局中呢?它似乎沒有工作,我可以嘗試添加一個預編譯到資產rb? – Djangert

+1

在預編譯中加入您的更改,排序問題,歡呼聲。 – Djangert

0

當你這樣做會發生什麼:

<%= javascript_include_tag 'application', 'main', 'data-turbolinks-track' => true %>