I'm having trouble adding javascript into my rails application. I've added the javascript directly into my application.html.erb file and it works just file. Here is the a script below:
//Javascript//
$( "#accordion" ).accordion(); var availableTags = [ ]; $( "#autocomplete" ).autocomplete({ source: availableTags }); $( "#button" ).button(); $( "#radioset" ).buttonset(); $( "#tabs" ).tabs(); $( "#dialog" ).dialog({ autoOpen: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } }, { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] }); // Link to open the dialog $( "#dialog-link" ).click(function( event ) { $( "#dialog" ).dialog( "open" ); event.preventDefault(); }); $( "#datepicker" ).datepicker({ inline: true }); $( "#slider" ).slider({ range: true, values: [ 17, 67 ] }); $( "#progressbar" ).progressbar({ value: 20 }); $( "#spinner" ).spinner(); $( "#menu" ).menu(); $( "#tooltip" ).tooltip(); $( "#selectmenu" ).selectmenu(); // Hover states on the static widgets $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); This was wrapped around <script> tags in my application.html.erb file without any problems. As soon as I created a file called theme.js and put it into "/vendor/assets/javascripts" and updated my application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require_tree . //= require theme It stopped working. I tried putting the theme.js in "app/assets/javascripts" as well and it didn't work either.
This is the head of the application.html.erb file:
<!DOCTYPE html> <html class="bootstrap-layout"> <head> <title>App</title> <!-- Material Design Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Roboto Web Font --> <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', "data-turbolinks-track" => true %> <%= javascript_include_tag 'https://code.jquery.com/jquery-2.2.3.js' %> <%= javascript_include_tag 'https://code.jquery.com/ui/1.11.4/jquery-ui.js' %> <%= csrf_meta_tags %> </head> I'm sure it is something fundamental I'm missing, I just don't know what it is. I also removed turbolinks thinking that could be the issue but, removing it didn't do anything.
