Rails 5.0 and JQuery .dialog() Not Working - jquery-ui

I'm upgrading a rails app from 4.2 to 5.0. The ruby version is 2.6.4
The app has a view that allows the user to click a link to run a scheduling script that assigns students into courses/classes. The script can take several minutes to run to completion, so we show a modal dialog box that, like a progress-bar, shows where the process is currently at. But in the rails 5.0 version, this is not working. There is no error(s), just the popup is not appearing. I figured it was a JQuery thing, so using try/catch blocks, I found it is in the .dialog(...) call. But I'm not sure why it is failing. I believe I have the correct JQuery gems and the assets/files set up correctly for rails 5.0.
Gemfile:
source 'http://rubygems.org'
gem 'rails', '~> 5.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
...
Gemfile.lock:
...
jquery-rails (4.4.0)
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
...
app/assets/application.js:
...
//= require jquery-ui
//= require jquery
//= require jquery_ujs
//= require jquery-ui/widgets/dialog
//= require_tree .
app/assets/stylesheets/application.css
...
*= require_self
*= require_tree .
*= require jquery-ui
*= require jquery-ui/dialog
The popup form:
app/views/elements/_scheduling_dialog_popup.html.erb:
<%
# This partial will attach a Jquery event to a submit button that will display a modal-screen
# during the (potentially) long scheduling process.
%>
<% content_for :head do %>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a#autoschedule").click(function() {
JQuery('div#import_modal_box').dialog({bgiframe: true, modal: true, width:450, draggable: false, closeOnEscape: false, resizable: false});
});
});
</script>
<% end %>
<div id="import_modal_box" style="display:none;">
<p style="float:left;margin-right:1em;"><%= image_tag 'ajax-loader.gif' %></p>
<h3>Auto Class Assignment for <%= pluralize(Student.count,'student') %></h3>
<p>There are <%= pluralize(ClassTime.sum(:enrollment_limit),'spot') %> available in <%= pluralize(ClassTime.count,'class') %> for <%= pluralize(UpcomingCourse.count,'course')%>.</p><p>This may take a few minutes, please wait.</p>
<p> </p>
</div>
I've read through the docs at: ruby-docs. I see I only need to use //= require jquery-ui to require everything , but I added the //= require jquery-ui/widgets/dialog just to be sure.
What am I missing to get this to work?
Thanks for any advise.

I was "finally" able to resolve this issue. It actually had nothing to do with the dialog() function, directly. I brought up the Developer Tools and ran the Console tab/window to see if I was getting any errors or warnings and found I had a ton of ReferenceError: jQuery is not defined .... errors. After some searching I found that Rails 5.2 does not need jquery_ujs, so I removed the //= require jquery_ujs line from my assets/javascripts/application.js file. Now it works.

Related

Twitter bootstrap not working on rails

I am following screencast about twitter bootstrap basics to try to understand bootstrap more, but for some reason when I go to localhost, my app has no styling.
I have tried the steps from github repo https://github.com/seyhunak/twitter-bootstrap-rails as well.
I have also followed instruction from this SO post, but when I added the line *= require bootstrap_and_overrides, it shows FileNotFound error.
Here is what I did, after Rails new app bootstrap_practice:
rails g scaffold Product name price:decimal --skip-stylesheets
rake db:migrate
# added gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' on gemfile (I have also tried just gem 'twitter-bootstrap-rails'
bundle install
rails g bootstrap:install
I checked assets and it has the necessary assets.
Stylesheets (application.css)
*
*= require_tree .
*= require_self
*/
JS:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
Lastly, my application.html.erb has
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
I am pretty sure that is everything needed. Why is my application on localhost not styled?
So, I've used twitter-bootstrap a lot of ways in Rails, and my favorite is with the bh gem. Bootstrap Helpers on github.
# Gemfile
gem 'bh'
# application.html.erb
<%= stylesheet_link_tag bootstrap_css %>
<%= stylesheet_link_tag font_awesome_css %>
<%= javascript_include_tag bootstrap_js %>
All the assets are delivered through the CDN.
An official SASS repo was released since the railscasts was released. (Rails comes with SASS out the box.)
https://github.com/twbs/bootstrap-sass
The repo by seyhunak is maintained in LESS, which requires therubyracer too.

Rails - How do I check if js file exists before requiring it in application.js?

I forked the plutus gem (https://github.com/mbulat/plutus) and it has a requirement of jquery.ui.datepicker. rails-jquery-ui gem 5.0 changed folder name to jquery-ui (previous jquery.ui). Hence, this returns a Sprockets::FileNotFound for my app which depends on rails-jquery-ui 5.0.
How do I conditionally include jquery.ui.datepicker or jquery-ui/datepicker in plutus application.js so that the gem is usable by people who may have any gem version.
Is my approach correct or is there a better way to do this?
You could rename the application.js to application.js.erb and include any ruby conditional in there.
Once you rename it to application.js.erb you could write something like the following:
<% if Jquery::Ui::Rails::VERSION >= '5.0' %>
//= require jquery-ui/datepicker
<% else %>
//= require jquery.ui.datepicker
<% end %>
I have not checked the actual file names or folder structure. Above code is just a pseudo code, adapt it to your need/requirement.

Implementing Bootstrap Toggle Switch

I am trying to implement toggle switches from http://www.bootstraptoggle.com/.
gem 'rails-bootstrap-toggle-buttons'
bundle
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .
and
*= require bootstrap-toggle-buttons
*= require_tree .
*= require_self
*/
view:
<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>
Is just giving me a plain checkbox. Any clues on why this would not be working?
First: you wanted to have the toggle switches from http://www.bootstraptoggle.com/ but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from http://www.bootstrap-switch.org/. This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.
Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.
But: the data-toggle initialization method also didn't work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:
$(document).on('ready page:change', function() {
$('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});
Note the page:change event, which is fired by Turbolinks, in addition to the ready event.
If you're using >Rails 4 and >Ruby 1.9
<%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>
Make sure that your HTML is being generated correctly.
<!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">
Then check the JavaScript console to make sure there are no errors.
And if you want to add style, simple do like:
<%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>

CoffeeScript working strangely with Rails 4

I cannot get CoffeeScript working with Rails. This is the first time I'm using CoffeeScript and I'm also fairly new with Rails too, so I don't know how to make this simple CoffeeScript function to work in the right way. Below is my people.js.coffee file at app/assets/javascript directory.
myFunction = ->
alert "test"
The alert “test” message only shows up when I load the page (app/views/people.html.erb and _form.html.erb partial); not when I click the below button in the form:
<%= submit_tag "Test CoffeeScript", :type => 'button',
:id => 'coffeeScript', :onclick => 'myFunction()' %>
I don't know why this strange behaviour is happening. Why :onclick is not working? The generated source code for the button should be ok:
<input id="coffeeScript" name="commit" onclick="myFunction()"
type="button" value="Test CoffeeScript" />
Below is my application.js file at app/assets/javascript.
...
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
My Ruby version is 2.1.0
Here are some values when I ran bundle show command:
coffee-rails (4.0.1)
coffee-script (2.2.0)
coffee-script-source (1.7.0)
jbuilder (1.5.3)
jquery-rails (3.1.0)
rails (4.0.2)
railties (4.0.2)
sass (3.2.19)
sass-rails (4.0.3)
sprockets (2.11.0)
sprockets-rails (2.0.1)
turbolinks (2.2.2)
My JavaScript files are working ok; I tried similar type of function in JavaScript and it was ok.
It's because the function is in another scope. You can do it either with unobtrusive jquery.
$ ->
myFunction = ->
alert("test")
$("#coffeeScript").on "click", ->
myFunction()
And remove the onclick handler from
<%= submit_tag "Test CoffeeScript", type: 'button', id: 'coffeeScript' %>
or...
root = exports ? this
root.myFunction = () -> alert("test!")
I'd recommend the first one, but that is just my opinion though. Also, you have to be very careful about indentation in CoffeeScript, it works a lot like Python, whitespace matters.
An explanation on scopes and js/coffee is here How do I define global variables in CoffeeScript?

How do I use jQuery in Ruby on Rails 3.2?

I am a newbie in Ruby on Rails and need to know what things we have to be careful about if we are willing to use jQuery in a Ruby on Rails application.
In my view page I have:
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<%= javascript_include_tag "application" %>
<script>
alert("hussain")
alert($('#hussi').val())
</script>
It gives the first alert as expected, but for the second alert it says '$' is not defined.
I have the jquery-rails gem installed.
The browser points out that I have a missing reference in my application.js file.
require jquery;
require jquery_ujs;
I saw some file examples where they mention it like:
= require jquery;
= require jquery_ujs;
But adding'=' raises an IDE error in my IDE.
Add this to you application.js:
//= require jquery
//= require jquery_ujs
and add this to your Gemfile:
gem 'jquery-rails'
Also make sure you have this in you application layout:
<%= javascript_include_tag "application" %>
Just a note: avoid using tags in your code, move your javascript to your assets folder.
There is a typo in your code: text/javas c ript. This causes the script to not be parsed.

Resources