0

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.

John Cowan
  • 1,452
  • 5
  • 25
  • 39
  • what is `bgiframe`? I do not see this as an option: https://api.jqueryui.com/dialog/ – Twisty Jun 09 '20 at 16:24
  • I actually removed the `bigiframe: true`, but it made no difference. To answer your question, with what little I've found on it is "I think" it has something to do with getting things to work in IE6. Since we no longer work to support IE6, I removed that code. But I could be wrong :( – John Cowan Jun 10 '20 at 12:16

1 Answers1

0

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.

John Cowan
  • 1,452
  • 5
  • 25
  • 39