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

Question

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

对于远程模态，我使用了 gem 的组合:modal-responder-rails和 rails-bootstrap-modal

这是我的自动完成代码:

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;
  });
});

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

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

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

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

更新:

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

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

respond_to do |format|
  format.js { ... }
end

在您的 create 方法(或操作)中的某处，它将标识您的 Assets 中的 create.js.erb。但是，如果你想呈现一个 static 内容(例如 map )，我不知道该怎么做，因为为了定义一个模态，你必须添加 respond_with_modal @books 在您要使用的方法下的 Controller 中。

Answer 1

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

请尝试以下代码:

$(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 上阅读更多内容