Rails view javascript not loading

Question

I'm currently trying to code a quiz for my rails app on c9 using js but the js doesn't seem to being loaded into the view file. Can anybody tell me what is wrong or suggest a fix?

The home page with the quiz start on it:

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

The view which is supposed to pull the questions from the 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>

The application layout view:

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

The main.js file:

//= 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;
}

Andolasoft Inc · Accepted Answer · 2016-07-05 14:03:46Z

1

Your problem is in the following line

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

It will search from the public path instead of asset path. So change it to

<%= javascript_include_tag 'main'  %>

answered Jul 5, 2016 at 14:03

Andolasoft Inc

1,2961 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Djangert Over a year ago

in the two views, so in new html and the ques one, or within the application layout too? It doesn't seem to work, I can try adding in a precompile into the assets rb?

Djangert Over a year ago

adding in a precompile along with your change sorted the problem, cheers.

oreoluwa · Accepted Answer · 2016-07-05 14:03:26Z

0

What happens when you do:

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

answered Jul 5, 2016 at 14:03

oreoluwa

5,6532 gold badges22 silver badges28 bronze badges

Collectives™ on Stack Overflow

Rails view javascript not loading

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related