samedi 21 janvier 2017

Unable to get coffescript running, making a class into a link

So i am actually following a ruby on rail introductory video tutorial... This part of the course was about to teach me some coffeescript

So the plan is to make this grey container of the follow the same link as my "view answers"

the sample site

the code i am using is as below. i am also told that since i am using turbolinks i should include the "(document).on "page:load", ready" line

"home.coffee"

> ready = ->
> $(".media").on "click", -> 
>    (document).location = $(this).data("target")
>    return false

>$(document).ready(ready)
>$(document).on "page:load", ready

However, after testing it out. Clicking on the grey container, does nothing. Am i missing some sort of script for this to work? Earlier i tested out Console.log("TEST") on the coffee script , and it was able to print out on chrome's inspect .

Current layout of my pages

<!DOCTYPE html>
<html>
<head>
  <title>PROJECT HU</title>
<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://ift.tt/2apRjw3" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>


  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <script src="http://ift.tt/2aHTozy" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://ift.tt/13wBVXk"></script>

  <%= csrf_meta_tags %>
</head>

<body>
    <%= render 'home/navbar' %>

    <%= yield %> <!-- yield is content of the html-->
    <%= render 'home/new_question_form' %>

</body>

</html>

Index Page as below based on my tutorial, i had to add this data-target="<%= question_path(q) %>" into the media

<div class = "well">
    <h1>WELCOME LA</h1>
</div>
<div class='container'>
<!--#loop this html as much as number of question in the database-->
    <div class="boxes">
        <% @questions.each do |q|%> 
            <div class="media" data-target="<%= question_path(q) %>">
                    <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="<%= q.gravatar%>" alt="sampleImg">

                    </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><%= q.email%> asked : </h4>
                        <div class="time"><%= time_ago_in_words q.created_at%></div>
                        <%= q.body %>
                    </div>

                    <div>
                        <a href= "<%= question_path(q)%>" class="btn btn-success btn-xs">View Answers</a>
                    </div>
            </div>
        <%end%>
    </div>
    <% if @questions.empty? %>
        <div class="alert alert-info">Ooops.... There's no questions here.</div>
    <% end %>
</div>

Aucun commentaire:

Enregistrer un commentaire