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');
});
Related
I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.
This is a proof-of-concept before we invest in refactoring the entire frontend of the application.
The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
</head>
<body>
<div id="el">
... vue template ...
</div>
<script>
...
var vm = new Vue({
el : '#el',
data : {
config : <% config.json %> // this is server-rendered, using server templating
...
},
...
});
...
</script>
</body>
</html>
The page does work. However, I get the following error/warning within the Vue console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.
I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.
And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...
Thank you!
One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/... all use this approach.
window.__STATE__ = <% config.json %>
In your JS file you can then refer to the window.__STATE__ object.
var vm = new Vue({
el: '#el',
data: {
config: window.__STATE__
}
})
Ofcourse the order is important here:
<body>
<script>
window.__STATE__ = <% config.json %>
</script>
<script src="app.js"></script>
</body>
Grrr, after several days after enduring this error, I discovered this:
<fieldset id="el">
...
<div id="el">
...
</div>
...
</fieldset>
So the issue was repeating #el within same page.
My mistake.
Just wish the error message emitted by Vue had been a bit more useful!
Bottom line: The pattern described in the origional question works just fine without NPM/CLI.
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.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
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)
I have a form in my rails 3 app that is used to create new tags. This page is opened in a new window and I would like for that window to close after a successful submission of a new tag. How should I go about doing that.
I tried <%= f.submit "Create Tag", :onclick => "window.close()" %> and that didn't work - it still followed through with the redirection.
How might I redirect to a javascript file that would close the window?
Here I tried to redirect to another html page, but it still doesn't close when I use rails, even though it works when I just load it manually.
> <!DOCTYPE html> <html> <head>
> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
> </head>
>
> <body id="sample"
> onload="window.close()">
> This page was meant to close itself immediately using javascript.
> If it has not, please close it
> manually. </body> </html>
You can use render :text => '<script type="text/javascript"> window.close() </script> in your controller to close the window afterwards.
An alternative solution could be render :action => "window_closer" with windows_closer.html.erb being a HTML file with the same code (and maybe a body and a "Please close window now" text).
I used the best answer on this forum and it seems to work ... I'm not quite sure why.
http://www.google.com/support/forum/p/Chrome/thread?tid=23c03746e3aa03f9&hl=en
window.open('', '_self', '');
window.close();