jquery-uiruby-on-rails-5jquery-rails

Rails 5.0 and JQuery .dialog() Not Working


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>&nbsp;</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.


Solution

  • 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.