In the application.js file, I have the requirements, and the on JQuery declaration:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.pjax
//= require_tree .
jQuery ->
$('#id').pjax('[data-pjax-container]')
However, I am getting the error Uncaught SyntaxError: Unexpected token > in the console. The jquery.ja and jquery.pjax.js files are loading in the resources and network tab of the inspector, so i know it is at least getting the jquery and pjax.jquery code, however, the shortcut `jQuery -> to signify document.ready, throws the error.
When I switch the code to :
$(document).ready(function() {
$('#ce').pjax('[data-pjax-container]')
});
I don't get the error. What is the correct shortcut for document.ready in Rails? I was following the PJAX tutorial here that says to use this notation.
What your are typing is Coffeescript syntax, that's the reason why its a syntax error.
Related
My mates and I are working on a website using Ruby on Rails.
We managed to plug a bootstrap theme called Boomerang.
I think I kind of figured out our assets work but I have an error that I can't understand.
In the footer there are socials icons with tooltips that should be displayed when you hover them. But they are not displayed.Here is the HTML code I use to display the icons:
<a href="https://www.facebook.com/webpixels/" class="facebook" target="_blank"
data-toggle="tooltip" data-placement='top' title='title'
data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
In the console I see an error:
Error: TOOLTIP: Option "placement" provided type "undefined" but expected type "(string|function)". bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js:7:2581
typeCheckConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
_getConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
i http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
_jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
jQuery 2
_jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
http://localhost:3000/assets/boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js?body=1:900
jQuery 2
It seems that the error is coming from one file (bootstrap.min.js) so I tried to link the full file instead (bootstrap.js) and then the error changed to:
Error: TOOLTIP: Option "placement" provided type "undefined" but expected type "(string|function)". util.js:142:11
typeCheckConfig util.js:142
_getConfig tooltip.js:638
Tooltip tooltip.js:130
_jQueryInterface tooltip.js:694
jQuery 2
_jQueryInterface tooltip.js:685
boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js:900
jQuery 2
It seems like another file is responsible for my error but I don't understand why. I've thought maybe there is a problem with the order the js files are actually loaded.
My javascript.js manifest file looks like :
//= require jquery/jquery.min
//= require popper/popper.min
//= require bootstrap/js/bootstrap
//= require slidebar/slidebar
//= require classie
//= require bootstrap-notify/bootstrap-growl.min
//= require scrollpos-styler/scrollpos-styler
//= require adaptive-backgrounds/adaptive-backgrounds
//= require countdown/js/jquery.countdown.min
//= require dropzone/dropzone.min
//= require easy-pie-chart/jquery.easypiechart.min
//= require fancybox/js/jquery.fancybox.min
//= require flatpickr/flatpickr.min
//= require flip/flip.min
//= require footer-reveal/footer-reveal.min
//= require gradientify/jquery.gradientify.min
//= require headroom/headroom.min
//= require headroom/jquery.headroom.min
//= require input-mask/input-mask.min
//= require instafeed/instafeed
//= require milestone-counter/jquery.countTo
//= require nouislider/js/nouislider.min
//= require paraxify/paraxify.min
//= require select2/js/select2.min
//= require sticky-kit/sticky-kit.min
//= require swiper/js/swiper.min
//= require textarea-autosize/autosize.min
//= require typeahead/typeahead.bundle.min
//= require typed/typed.min
//= require vide/vide.min
//= require viewport-checker/viewportchecker.min
//= require wow/wow.min
//= require isotope/isotope.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require boomerang
The error only happens when I put an HTML tag with the data-toggle="tooltip" whether I put a data-placement in it or not.
I have the same issue when I load the original template/theme locally without touching anything
If you ever encountered this issue please help.
As suggested by a comment that suddenly disappeared I tried adding
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
I noticed an error in the browser console ($ is not defined), I figured out jquery wasn't plugged in properly. Now jquery seems to be working, but still no cool tooltips.
I tried adding https://github.com/ejbeaty/CellEdit to my Rails application. The code in https://github.com/ejbeaty/CellEditworks works perfectly as standalone; but when I include celledit.js inside my Rails application, i get this error in my broswer development console:
TypeError: jQuery.fn.dataTable is undefined
While the same code works fine in standalone application, why am I getting this error in Ruby on Rails app? What does this error mean? And how do I resolve it?
NOTE:
The error is coming from the function definition shown below:
jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
var table = this.table();
jQuery.fn.extend({
Add the jquery rails gem to your Gemfile:
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
Run run bundle install.
Then include the dependencies in the correct order in your app/assets/javascripts.js:
...
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
In this case I just downloaded the files and placed them in app/assets/javascripts.
If you are using Turbolinks you want to hook the initialisation onto the turbolinks:load event as document.ready only happens on the initial page load:
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
$(document).on('turbolinks:load', function(){
var table = $('#myTable').DataTable();
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
});
If you are not using Turbolinks then just use jQuery.ready(function(){...}) instead of $(document).on('turbolinks:load', function(){});.
I am using Rails 5 with react-rails gem. I want to use server-side rendering, but I see this error:
React::ServerRendering::PrerenderError in Home#index
Encountered error "# ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined" when prerendering Main with {}
This is my /assets/javascripts/application.js:
//= require rails-ujs
//= require jquery
//= require react
//= require react_ujs
//= require_tree .
This is javascripts/components.jsx:
class Main extends React.Component{
render(){
return (
<h1>Hello</h1>
);
}
}
and this is the view:
<%= react_component('Main', {}, {prerender: true}) %>
Without prerender option, everything works.
I've had a similar issue and here's how I solved it
run command rails generate react:install
This will create the components folder and some required files under your javascripts/ dir.
Now, place your components.jsx in /assets/javascripts/componets directory
refresh the page.
I'm running rails 4.2.10 and haven't tested rails 5 but I'm guessing this should do the trick.
Let me know how you get on
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 trying to introduce the jQuery UI autocomplete feature to a widget in a Rails 3.1.3 app. It doesn't do anything and on inspecting the scripts in Chrome developer tools, I see the following:
jQuery(function() {
return $("#location").autocomplete({
locations.js:3 Uncaught TypeError: Object #<Object> has no method 'autocomplete'
source: ["foo", "food", "four"]
});
});
I've included jQuery UI in application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
My coffeescript has the following:
jQuery ->
$('#location').autocomplete
source: ["foo", "food", "four"]
What am I missing!?
It turns out that since I also had active_admin, "//=require_tree ." was adding an older version of jQuery from the active_admin/vendor path which was removing the autocomplete method. Got rid of the "//=require_tree ." for now and explicitly added "//=require locations" and it works just fine.