远程模式 RoR 中的 jQuery UI 自动完成

Posted 2023-05-08

【中文标题】远程模式 RoR 中的 jQuery UI 自动完成

【英文标题】：jQuery UI autocomplete in remote modal RoR

【发布时间】：2018-06-06 00:42:00

【问题描述】：

我正在尝试在我的远程模式中实现jquery ui autocomplete，但它不起作用，而autocomplete 在常规静态页面上起作用。

对于远程模式，我使用 gem 的组合：modal-responder-rails 和 rails-bootstrap-modal

这是我的autocomplete 代码：

jQuery(function() 
  var data = $('#book_subcategory_name').data('autocomplete-source');
  var NoResultsLabel = "No Results";
  return $('[id*="book_subcategory_name"]').autocomplete(
    delay: 0,
  position: 
    my: "left+0 top+4"
  ,
  source: function(request, response) 
            var results = $.ui.autocomplete.filter(data, request.term);
            if (!results.length) 
              results = [NoResultsLabel];
            
            response(results);
           ,
  select: function (event, ui) 
            if (ui.item.label === NoResultsLabel) 
              event.preventDefault();
            
          ,
  focus: function (event, ui) 
           if (ui.item.label === NoResultsLabel) 
             event.preventDefault();
           
         
  ); // End of return
); // End of jQuery



// Sets autocomplete drop down width equal to the root element width
jQuery.ui.autocomplete.prototype._resizeMenu = function () 
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());

这是我的模态，我从 article 复制的。

模态：

$(function() 
  var modal_holder_selector, modal_selector;
    modal_holder_selector = '#modal-holder';
    modal_selector = '.modal';
  $(document).on('click', 'a[data-modal]', function() 
    var location;
    location = $(this).attr('href');
    $.get(location, function(data) 
      return 
      $(modal_holder_selector).html(data).find(modal_selector).modal();
    );
    return false;
  );
  return $(document).on('ajax:success', 'form[data-modal]', 

  function(event, data, status, xhr) 
    var url;
    url = xhr.getResponseHeader('Location');
    if (url) 
      window.location = url;
     else 
      $('.modal-backdrop').remove();
      $(modal_holder_selector).html(data).find(modal_selector).modal();
    
    return false;
  );
);

这个想法是创建一个远程模态控制器，您可以在其中添加一本新书。我有一个多步骤注册，这意味着我的模式必须重定向到新页面：general information 如果信息正确但我无法验证表单，因为我的javascript 不起作用...

我尝试覆盖z-index 并尝试在我的CSS 中使用!important，但它仍然不起作用。另外，如果我查看浏览器控制台，我可以清楚地看到所有数据都出现在我的input 字段中（注意：我的所有数据都来自数据库），如下所示：

<input data-autocomplete-source="["Sci-fi","Adventure"...] />

我没有发现代码有任何问题，也无法找出问题所在。有人可以帮我解决问题吗？ 非常感谢您的帮助和时间。

更新：

据我了解，我的问题来自渲染的操作页面。由于我正在渲染我的模态体，javascript 不起作用。

我找到的解决方案之一是添加

respond_to do |format|
  format.js  ... 
end

在您的 create 方法（或操作）中的某个位置，它将识别您资产中的 create.js.erb。但是，如果您想渲染 static 内容（例如地图），我不确定在这里做什么，因为为了定义模式，您必须在控制器中添加 respond_with_modal @books想用。

【问题讨论】：

你的数据属性中真的有不正确的嵌套双引号吗？

@muistooshort 是的，它在每个页面上的任何其他表单上都可以正常工作，除了模式（据我所知）

尝试先修复数据属性，它应该看起来更像<input data-autocomplete-source="['Sci-fi','Adventure'...]" /> 不是吗？至少你会从有效的 HTML 开始。

$('[id*="book_subcategory_name"]') 是否在您的模态中找到任何内容？我的第一个猜测是时间问题（可能在“我正在寻找的元素不存在，因为模态不在 DOM 中”变体中）。

$(modal_holder_selector).html(data) 是暗示性的，你必须在调用之后绑定modal_holder_selector 中的所有内容。

【参考方案1】：

由于没有工作示例，我只是假设这是一个时间问题，就像@muistooshort 指出的那样。在更新模式之前正确加载您的 jquery 部分。克服这个问题的一种选择是使用事件。您希望在使用 html-function 更新模态后执行您的代码。

请尝试以下代码：

$(document).on('modalUpdate', function()
  var data = $('#book_subcategory_name').data('autocomplete-source');
  //... rest of your autocomplete code
);

//...start of your modal code
$('.modal-backdrop').remove();
$(modal_holder_selector).html(data).find(modal_selector).modal();
$(document).trigger('modalUpdate'); //add this line
//...rest of your modal code

根据您的应用程序，您可能希望将事件更改为contentUpdated 之类的内容，因此它适合更通用的用途。您可以随意命名事件。你可以阅读更多关于jQuery article: Introducing Custom Events

【讨论】：

感谢您的回复！不幸的是，问题出在Ruby on Rails framework，而不是jQuery。模态框内的内容是在没有任何前端代码的情况下呈现的（当然除了 css）。无论如何，非常感谢您的帮助和时间！