I have basic onclick functions* in my ruby on rails app, when i look at application.js, they're all available but in the frontend, when i actually click on the element, the function does not trigger, although when i try the HTML version equivalent, its working well.
The app has the jquery-rails Gem installed and just to double confirm, I also tried inserting the jquery.js file in the vendor folder, but neither of these solved it unfortunately
*example
$('#openSidebarButton').on('click', function() {
$('#openSidebarButton').addClass('hidden');
$('#sidebar').removeClass('hidden');
});
Please make sure you have the following in your application.js:
//= require jquery
//= require jquery_ujs
i found the solution..a bit silly of me but essentially, i did not include the function within document.ready, that's why it wasn't working :-)
to summarize, what i did was made the above mentioned on click within a function
$(document).ready(function() {
openSideBar();
});
function openSideBar {
$('#openSidebarButton').on('click', function() {
$('#openSidebarButton').addClass('hidden');
$('#sidebar').removeClass('hidden');
});
}
Related
Trying to implement D Wilhem's Leaflet Slider, a front end to the JQuery UI slider in Rails. I get the error ReferenceError: Can't find variable: L. I've looked at lots of discussions and imagine I've mixed up my syntax. The page loads and 1) my data shows up, 2) the slider control shows up, but the slider doesn't function and I get then aforementioned error.
function makeMap() {
L.mapbox.accessToken = $('body').data("mapboxToken");
var map = L.mapbox.map('map', 'mtnbiker.d7jfhf8u') // Was: mapbox.streets
.setView([34.040951, -118.258579], 13);
L.control.fullscreen().addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/point_data.geojson')
.addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/line_data.geojson')
.addTo(map);
var sliderControl = L.control.sliderControl({range: true, alwaysShowDate: true, timeStrLength: 10, layer: featureLayer});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10));
featureLayer.on('ready', function(e) {
map.fitBounds(featureLayer.getBounds());
});
}
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'leaflet.js'
//= require leaflet
//= require_tree .
The map loads with data (points and lines) and non-functioning slider at localhost. Points are loading at Heroku, but not the lines nor slider. https://secure-shore-68966.herokuapp.com/map.
Answer:
After weeks of trying different things, a friend from MaptimeLA was able to sit down with me at a meeting and found a type. She is very familiar with Rails and debugging.
application.js was:
// require jquery.ui
// require jquery.ui.widget
Fixed
//= require jquery-ui
//= require jquery.ui.widget
Thanks to all who chimed in.
All the code is at https://bitbucket.org/MtnBiker/crores5/.
PS. I can't see the checkbox to say I want to answer my own question.
Looking at your code in the link, you load the following scripts in this order:
<script src="/assets/application-665a36b2268b441400787c68e9f08977c28cc33814ce32a46439c27016b720ec.js" data-turbolinks-track="true"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
I suspect that something is loading out of order or that L is being dropped someplace. Also I do not see where the core jQuery is being loaded.
Looking at the Demo, they load the following:
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script>
So I think all you're missing is the core jQuery and Maybe the LeafletJS. Here is a working JSFiddle based on the example they provide.
https://jsfiddle.net/Twisty/sr0sjzk2/
This is not a complete answer. But working through the asset pipeline in Rails and making changes I've eliminated the error. The problem was probably that in using various tutorial, I'd put in different versions of Leaflet or jQuery in different places in the Ruby on Rails app.
However the page still doesn't work correctly. I get TypeError: $("#leaflet-slider").slider is not a function. (In '$("#leaflet-slider").slider', '$("#leaflet-slider").slider' is undefined) error on localhost. The error is in D Wilhelm's SliderControl.js. On Heroku, no errors but no slider. I'll post a new question. https://secure-shore-68966.herokuapp.com/map.
Thank you Twisty for your help.
In my file dances.html.erb, my test complains:
Failures:
1) Creating dances creates a new dance with non-javascript data
Failure/Error: visit '/dances/new'
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).
ReferenceError: Can't find variable: $
ReferenceError: Can't find variable: $
at http://127.0.0.1:33842/dances/new:81 in global code
I think the offending html code looks like
<script>
$( "#choreographer-autocomplete" ).autocomplete({
source: <%= a_to_safe_str(Choreographer.all.map &:name) %>,
autoFocus: true,
minLength: 0
});
$( "#start-type-autocomplete" ).autocomplete({
source: ["improper","Becket","Becket ccw","four face four","square dance","indecent"],
autoFocus: true,
minLength: 0
});
</script>
and the offending calls to '$' are here.
I think this means JQuery isn't loading?
If I snip them, then the next error is:
Failure/Error: JSON.parse self.figures_json
ActionView::Template::Error:
784: unexpected token at '{{toJson(figures.arr)}}'
Those handlebars are an Angular thing.
Is Angular also not loading?
Here's my Rails application.js:
//= require angular
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .
//= require jquery-ui/autocomplete
//= require angucomplete-alt
This works fine in the Real World, just not in this test.
Is there something I need to do to get these JS libs to load before the body html is executed?
Since you are running the latest PhantomJS the most likely cause is that you have an error in one of your JS files. A big difference between the dev and test environments is that in the test environment rails concatenates all your JS files together. This means that an error in one file can prevent the rest of the JS from being processed. In dev mode they're all separate so an error in one doesn't stop the others from being processed. Check your browsers console log for errors and make sure they are fixed.
I'm working with Rails 4 and AngularJS. I've got my app working. Controllers, directives, services, etc. However, my main app.js file refuses to fire the config and run functions. I've got some console.logs in there to test how far it gets. Here's the code:
angular-app/app.js
'use strict';
console.log('we see the app.js file'); // This works
var app = angular.module('bruno', [])
console.log(app) //This works
// This is where is stops working
app.config(function ($httpProvider) {
alert('config'); // Can't see this
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
})
app.run(function () {
console.log('App is running'); // Can't see this
});
Like I said, my other controllers are working just fine. The console doesn't show any errors and everything loads just as it should.
Rails application.js file:
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
I've re-written this every which way I can think of, but to no avail. I'm kinda stumped. I've done it with and without the var app. Hoping this wonderful community can at least help me see something I can't.
Additional Info
I'm using gem 'angular-rails-templates'
Rails 4.2.3
AngularJS 1.3.16
If you need anything else from me just ask. Who knows, maybe by tomorrow morning I'll see things differently. :-)
As it turns out, I was mistakenly re-using the same module name inside another controller. Which was overwriting the module name in app.js. All fixed now.
I'm having a problem with the fullcalendar js which we use directly through the plugin (not the gem which is currently version incompatible anyway).
I'm upgrading rails from v3.2.6 to v3.2.8
fullcalendar is displaying the calendar ok but clicking to edit a date has a messed up ui (the action button are missgin their labels and there is no 'x' close link) and clicking to add a new event doesn't respond at all (as it's generating js errors).
I am getting these javascript errors:
Edit Event:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'curCSS'
New event:
Uncaught SyntaxError: Unexpected token N
Our code:
LISA.dayClickHandler = function(day, allDay, jsEvent, view) {
$('#event_error_container').hide();
var hours = JSON.parse(day.getHours());
fullcalendar list the jquery-ui version for it as jquery-ui 1.8.23
However the jquery version in my application's vendor/assets/javascripts is 1.8.13 (I see this by literally opening up the file and looking at the comments at the top).
My own app/assets/javascripts library does not have any jquery.js or jquery_ui.js
My app/assets/javsacript directory has application.js which includes
...
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
// more libraries
//= require jquery-ui
//= require jquery-autoSuggest.packed
...
Perhaps it might help to change my apps jquery-ui version from 1.8.13 to 1.8.23 to see if this resolves my issues but I am not sure of the right approach to do that.
This was a jquery-ui change ('curCSS' was removed) that was reversed (it was added back).
http://bugs.jquery.com/ticket/11921
The resolution was to download jquery-ui version 1.8.23 to vendor/assets/javascripts to replace the older version (1.8.11) and restart the server.
If I go to http://localhost:3000/assets/application.js my code (which works fine in 3.0) exists, because I've referenced it fine in the new application.js assets pipeline file:
$(document).ready
(function(){
$('input.ui-date-picker').datepicker({
dateFormat: 'dd-mm-yy'
});
});
But it's not being called. Jquery is present, too, and my gemfile got upgraded ok. What could be wrong?
OK, the problem was that I had a number of bits of code within a .js file I'd called various.js, and not all of them were wrapped in $(document).ready... }); Once I added that to each separate bit of code it worked fine. Also, I have to restart the server each time I make a change to the .js file - just touching it doesn't work for me. I found a simple Hello World alert really useful in debugging this (just in case anyone out there is as new to jquery as me!):
$(document).ready(function() {
alert("Hello world!")
});