Rails 5.0升级后jQuery .dialog()模态框无法弹出问题求助

我帮你梳理几个大概率的问题点，都是Rails 4.2升5.0时容易踩的坑：

1. 致命的大小写拼写错误 #

你的脚本里有一个大小写错误，JavaScript是严格区分大小写的：

// 错误写法：开头大写的JQuery
JQuery('div#import_modal_box').dialog(...)

// 正确写法：全小写开头的jQuery（和你前面的调用保持一致）
jQuery('div#import_modal_box').dialog(...)

这个错误会直接导致dialog()方法调用失败，因为浏览器找不到JQuery这个对象——你前面一直用的是小写开头的jQuery，这里突然大写，肯定出问题。

2. JavaScript引入顺序完全颠倒 #

看你的app/assets/application.js，你先引入了jquery-ui，再引入jquery，这完全搞反了！jquery-ui的所有组件都依赖jQuery核心库，必须先加载jQuery才能让jQuery UI的方法生效。正确的顺序应该是：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui/widgets/dialog
//= require_tree .

另外，其实引入jquery-ui就已经包含了dialog组件，额外加jquery-ui/widgets/dialog没问题，但顺序绝对不能错。

3. Turbolinks的影响（Rails 5默认启用） #

Rails 5默认开启了Turbolinks，它会让页面切换时不刷新整个页面，这就导致传统的jQuery(document).ready()只会在第一次页面加载时触发，后续页面切换后不会重新绑定事件。你需要改用Turbolinks的专属事件：

jQuery(document).on('turbolinks:load', function() {
  // 先解绑旧事件，防止多次绑定重复触发
  jQuery("a#autoschedule").off('click').on('click', function() {
    jQuery('div#import_modal_box').dialog({
      bgiframe: true, 
      modal: true, 
      width:450, 
      draggable: false, 
      closeOnEscape: false, 
      resizable: false
    });
  });
});

4. 确认Content_for的渲染位置 #

你用了content_for :head来插入脚本，必须确保你的布局文件（比如app/views/layouts/application.html.erb）的<head>标签内有<%= yield :head %>，否则这段脚本根本不会被渲染到页面里，自然无法生效。

5. 检查CSS资源是否加载成功 #

打开浏览器的开发者工具（F12），切换到Network标签，刷新页面后搜索jquery-ui，确认对应的CSS文件是否成功加载（状态码200）。如果是404，可能是jquery-ui-rails gem的版本兼容性问题，你当前用的6.0.1是兼容Rails 5的，但可以尝试重新安装gem：

bundle install

按照这几个步骤逐一排查，应该就能解决弹窗不显示的问题了！

内容的提问来源于stack exchange，提问作者John Cowan