Home/ Questions/Q 8941165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:14:16+00:00

Just trying to get the nivo slider plugin for jquery working on a basic

  • 0

Just trying to get the nivo slider plugin for jquery working on a basic rails app. Tried the simplest proof of concept I could, just putting the demo into a static html page in the public folder, but I still can’t get it to work. Here is the current header I’m using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <script type="text/javascript" src="../vendor/assets/javascripts/nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../vendor/assets/javascripts/nivo-slider/jquery.nivo.slider.js"></script>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../vendor/assets/javascripts/nivo-slider/demo/style.css" type="text/css" media="screen" />

        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
    </script>

</head>

Every time this loads up in heroku though I get the error: ReferenceError: 

$ is not defined    

$(window).load(function() {

I’m fairly new to web development in general, but I just don’t know how to fix this. Ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JQuery is not being loaded. You are using relative paths in rails. If you must manually load your javascripts you should consider using:

    You can <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> to manually add it.

    A better approach is to use the asset pipeline for all javascript.

    You have taken out the javascript_include_tag "application" code from the layout file which is normally in: /app/views/layouts/application.html.erb.

    You should put it back and then use the asset pipeline to take care of jQuery and your code for you.

    Relative paths are allowed in rails, but may not work as expected. Rails only serves assets from the public directory not the vendor directory. Normally you just let rails compile all js/css to one file and it is served out of the public/assets directory.

    • 0