CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Tony
Tony

Reputation: 1011

Getting jQuery to work on rails app

My page worked locally before when it was just a static html page with jQuery. However, I built it on top of rails because I wanted free web hosting on heroku.

All I did was move the jQuery into the application.js file and changed the application.html.erb file because that's all that's needed, right?

I have the following included in my gemfile:

gem 'sqlite3'
gem 'jquery-rails'
gem 'thor'

Here's my Application.html.erb file:

      <head>
          <title>Me</title>
            <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
  <%= javascript_include_tag "jquery-rails.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.pack.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.css" %>
  <%= javascript_include_tag "jquery.easing-1.3.pack.js" %>
  <%= javascript_include_tag "jquery.mousewheel-3.0.4.pack.js" %>
  <%= render 'layouts/stylesheets' %>
  <%= csrf_meta_tag %>
        </head>

And this is my application.js file:

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn'  : 'none',
                'transitionOut' : 'none'    
            });

            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.9
            });

            $("a#example7").fancybox({
                'titlePosition' : 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition' : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

            $("#various4").fancybox({
                'padding'           : 0,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
        });

Upvotes: 0

Views: 710

Answers (2)

m_x
m_x

Reputation: 12554

have you tried wrapping all these functions in a 

$(document).ready(function(){

  // your scripts here

});

your scripts may have worked locally only because the page was loaded fast enough for the script to find your content already there. Oh, and if you removed javascript_include_tag :default you have to include the application.js by yourself.

Upvotes: 1

Gaurav Shah
Gaurav Shah

Reputation: 5279

Remove

<%= javascript_include_tag :defaults %>

Because that adds prototype (in case you are still with ~ 2.x to 3.0.x).

Also it seems you are trying to use fancybox but have not included the necessary JS file for fancybox.

First copy the jquery.fancybox-x.x.x.pack.js to public/js/ Then include this tag

<%= javascript_include_tag "jquery.fancybox-x.x.x.pack.js" %>

Upvotes: 1

Related Questions