Rails 5.0 和 JQuery .dialog() 不工作
Rails 5.0 and JQuery .dialog() Not Working
我正在将 rails 应用程序从 4.2
升级到 5.0
。 ruby 版本是 2.6.4
该应用程序有一个视图,允许用户单击 link 到 运行 将学生分配到 courses/classes 的计划脚本。该脚本可能需要几分钟才能 运行 完成,因此我们显示一个模态对话框,就像一个进度条,显示进程当前所在的位置。但在 rails 5.0
版本中,这不起作用。没有错误,只是没有出现弹出窗口。我认为这是 JQuery 的东西,所以使用 try/catch 块,我发现它在 .dialog(...)
调用中。但我不确定为什么会失败。我相信我有正确的 JQuery
gem 并且 assets/files 为 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
弹窗形式:
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>
我已通读文档:ruby-docs。我看到我只需要使用 //= require jquery-ui
来要求所有内容,但我添加了 //= require jquery-ui/widgets/dialog
只是为了确定。
我缺少什么才能让它工作?
感谢您的建议。
我 "finally" 能够解决这个问题。它实际上与 dialog() 函数没有直接关系。我调出了开发人员工具和 运行 控制台 tab/window 来查看我是否收到任何错误或警告,并发现我有大量 ReferenceError: jQuery is not defined ....
错误。经过一些搜索,我发现 Rails 5.2 不需要 jquery_ujs
,所以我从 assets/javascripts/application.js
文件中删除了 //= require jquery_ujs
行。现在可以了。
我正在将 rails 应用程序从 4.2
升级到 5.0
。 ruby 版本是 2.6.4
该应用程序有一个视图,允许用户单击 link 到 运行 将学生分配到 courses/classes 的计划脚本。该脚本可能需要几分钟才能 运行 完成,因此我们显示一个模态对话框,就像一个进度条,显示进程当前所在的位置。但在 rails 5.0
版本中,这不起作用。没有错误,只是没有出现弹出窗口。我认为这是 JQuery 的东西,所以使用 try/catch 块,我发现它在 .dialog(...)
调用中。但我不确定为什么会失败。我相信我有正确的 JQuery
gem 并且 assets/files 为 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
弹窗形式:
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>
我已通读文档:ruby-docs。我看到我只需要使用 //= require jquery-ui
来要求所有内容,但我添加了 //= require jquery-ui/widgets/dialog
只是为了确定。
我缺少什么才能让它工作?
感谢您的建议。
我 "finally" 能够解决这个问题。它实际上与 dialog() 函数没有直接关系。我调出了开发人员工具和 运行 控制台 tab/window 来查看我是否收到任何错误或警告,并发现我有大量 ReferenceError: jQuery is not defined ....
错误。经过一些搜索,我发现 Rails 5.2 不需要 jquery_ujs
,所以我从 assets/javascripts/application.js
文件中删除了 //= require jquery_ujs
行。现在可以了。