I'm on Rails 5.2, MacOS 10.13.4, ruby 2.3.7p456. I am following this guide for implementing jquery datatables. Both in development and production, the tables load without datatable formatting, but after a browswer refresh, the tables display perfectly with the datatable formatting. I'm installing using the CDN.
Here is a screenshot on inital load:
Then after refresh:
My application.html.erb:
<head>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
In my html the table has id = 'search'
the search.coffee file:
$(document).ready ->
$('#search').DataTable()
return
and finally the application.js file:
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
I have tried moving the CDN scripts from the application.html.erb to the show page, removing the load jquery script, and using different versions of jquery in the load jquery script. I've tried on Chrome Version 67.0.3396.79 and Safari Version 11.1. All of these resulted in no change.
Has anyone run into this? I saw this question: and tried adding gem 'jquery-turbolinks' to gemfile and adding //= require jquery.turbolinks to application.js, and after bundle install and restarting the server, still no change.
Responding on this from the answer over here - Rails 5: how to use $(document).ready() with turbo-links
At some point the $(document).ready call was depreciated with turbolinks, try:
$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
I completely removed turbolinks from my app in order to get the datatables to act properly.
Related
Intro
This is my first attempt at Ember (existing rails app) and there are some great resources out there on the interWeb, but given that I have read them all and am still wanting more it would be great to check notes here.
I have a new model: Newslink
I have built an api for it: api/v1/newslinks.json
The api works: http://localhost:3000/api/v1/newslinks.json
Data
{"newslinks":[{"id":1,"title":"A Sample Post","navlink":"This will be a simple post record."}]}
Code
The issue is that Ember seems to be letting the route slip through its hands (something I did wrong in the code below, I'm sure):
application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require chosen-jquery
//= require bootstrap
//= require bootstrap-notify
//= require jquery.limit-1.2.source
//= require bootstrap-switch
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require app
app.js
App = Ember.Application.create({
LOG_TRANSITIONS: true,
ready: function() {
console.log('App ready');
}
});
App.Router.map(function() {
this.resource('newslinks', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('newslinks');
}
});
App.NewslinksRoute = Ember.Route.extend({
model: function() {
return App.Newslink.find();
}
});
DS.RESTAdapter.reopen({
namespace: 'api/v1'
});
App.Store = DS.Store.extend({
revision: 13
});
App.Newslink = DS.Model.extend({
name: DS.attr('string')
});
Application.handlebars
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember - Latest" />
<meta charset=utf-8 />
<title>Ember Latest</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Here I am</h2>
</script>
</body>
</html>
Routes.rb
App::Application.routes.draw do
namespace :api do
namespace :v1 do
resources :newslinks
end
end
I'm not even trying to return the data yet. Just want to see the route connect, but I'm getting a routing error. How do I make sure Ember sees the url "/newslinks"?
Let me know if you have any suggestions. Thanks!
Random Unrelated Observation
Ember.js seems a lot like reading Borges' Labyrinths, a good thing, and I can tell it will get much better on subsequent readings until everything just makes perfect sense.
I would use chrome see what URL Ember is requesting. It is likely requesting '/newslinks' which is incorrect based on what you indicated your url was '/newslinks.json'
In which case I would change the route from '/newslinks.json' to a more appropriate REST url format of '/newslinks'
To make it work redirect from your IndexRoute (which is implicit and created automatically) to your newslinks route sonce you have in your router map / as a path for your newslinks resource.
For example add this to your app and it should work:
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('newslinks');
}
});
Working Demo.
Hope it helps.
I have a rails app where I want to choose a date of birth. I'd like to use the jquery-ui datepicker for this but am not sure how to implement it into my rails app.
This is a screenshot of the options I want with the month and years menus to make selecting birthdates easier.
http://cl.ly/image/46152b372N1b
I'm really not sure where to start as far as setting this up in my application.js file as well as in my view.
Right now my view/form looks like this
<%= f.text_field :patient_dob, :id => 'datepicker' %>
Here's my application.js
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
Again, I'd like that to be a a jquery-ui datepicker with the month and years option to make selecting the birthdate easier.
If anyone can throw me some code to get started, I'd appreciate it. Right now when I click the text field, nothing happens.
Make sure you include jquery.js, jquery-ui.js, jquery-ui.css in your head html tag.
jQuery and jQuery-ui javascript files should be declared only once. You can check this by right-clicking your webpage (eg. in chrome) and select View Source Code. Also, on Source Code click the jquery.js, jquery-ui.js, jquery-ui.css and application.js links and make sure that your code is in there (if you don't find the code expected, check your paths).
application.js file should be declared after jquery and jquery-ui.
So your < head > should look like this:
<head>
<meta [your code]>
<title>[your code]</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<%= javascript_include_tag "application.js" %>
</head>
After some searching and experimenting this code worked out for me. It seems what I was using before either wasn't the object or I had it closed wrong.
$(function(){
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:2013'
});
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
I have the following:
application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//
//= require jquery-ui
//= require jquery-ui-1.8.14.custom.min
//= require datatable
//= require highcharts
//= require exporting
//= require turbolinks
$('table').on('click', 'td', function(e) {
$('.create_booking').dialog('open');
});
What I am trying to do is make my <td> elements open the Jquery-ui dialog and render the partial booking_dialog it is not doing that for reason I do not seem to understand. The above should work.
You need to create the dialog first:
$('.create_booking').dialog({
autoOpen: false
});
After that you can use $('.create_booking').dialog('open') to show it. Also consider using an ID instead of a class for your dialog element. You only have one anyway, don't you?
Demo: http://jsfiddle.net/ThiefMaster/uJUuW/ (try clicking "open" first)
I am getting an error in Firebug console:
TypeError: $.on is not a function
$.on('ajax:success', 'a[data-remote]', function(xhr, data, status) {
which is line 8 of my modal.js file - see below. I am using code from gist.github.com/1456815.
I can find the relevant jQuery v1.7.2 minified code in application.js:
f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object")
jQuery and then my modal.js code is being loaded by the asset pipeline, so I don't understand the error, which shows in Firebug when my index page is loaded i.e. before I click on the link.
Versions: Ruby 1.9.3, gem 1.8.24, Rails 3.2.1, Rake 0.9.2.2
My application.js source:
//= require jquery
//= require jquery-ui
//= require jquery.dataTables
//= require TableTools
//= require ZeroClipboard
//= require datatable_highways
//= require datatable_localities
//= require datatable_neighbours
//= require_tree .
//= require modals
As per RailCasts #205 I have downloaded rail.js into /public/javascripts and renamed to jquery.rails.js. Frankly I don't understand this and it is not explicitly included in the asset pipeline. (There seems to be confusion about what to do with rails.js in the forums).
jquery.js is in /vendor/assets/javascripts.
Modal.js.coffee:
# This file should be "required" into your `application.js` via the Asset Pipeline.
$ ->
$modal = $('#modal')
$modal_close = $modal.find('.close')
$modal_container = $('#modal-container')
# Handle modal links with the data-remote attribute
$.on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
$modal
.html(data)
.prepend($modal_close)
.css('top', $(window).scrollTop() + 40)
.show()
$modal_container.show();
$.on 'click', '#modal .close', ->
$modal_container.hide()
$modal.hide()
false
Thanks
John
Do something like this instead:
$('#modal .close').on 'click', ->
# code
Or, even better, to use your code:
$modal_close.on 'click', ->
# code
I feel that I'm missing something very stupid but I was stucked all day with this and didn't found anything to sorted it out. I want to load a map with an user marked in it when a fancybox lightbox is called, the following code is the best and minimal approach that I have but I'm getting:
ReferenceError: Can't find variable: google
= link_to image_tag('map.png'), map_vendor_path(#coupon.vendor), class: 'js-show-map'
:javascript
$(document).ready(function(){
$('.js-show-map').fancybox({
onComplete: function(){
Gmaps.loadMaps();
Gmaps.map.addMarkers([{"lng": "7.859409", "lat": "48.023551"}]);
}
});
});
the following view is called when click in link
map.html.haml
//
it's here just for test
= stylesheet_link_tag 'gmaps4rails.css'
= javascript_include_tag "gmaps4rails/gmaps4rails.base"
= javascript_include_tag "gmaps4rails/gmaps4rails.googlemaps"
= gmaps4rails(#vendor.to_gmaps4rails)
= yield :scripts
application.js
...
//= require_tree ./templates
//= require_tree ./gmaps4rails
application.css
//= require gmaps4rails
I checked head source code and I see
<script src="/assets/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
Map loads fine when not in the lightbox. Any help will be appreciated, thanks.
I guess the problem is the following:
you click the fancybox
it retrieves gmaps4rails html and scripts
external scripts aren't loaded on the fly
So you should:
include manually the js dependencies in your root view
disable the external js dependencies inclusion (not mandatory though)