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

Question

我试图jquery ui autocomplete在我的远程模式中实现它不起作用,而autocomplete在常规静态页面上工作.

对于远程模态,我使用宝石的组合: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());
}

这是我的模态,我从这篇文章中复制了它.

莫代尔:

$(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并尝试!important在我的CSS中使用它仍然无法正常工作.另外,如果我查看浏览器控制台,我可以清楚地看到所有数据都显示在我的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在你想要使用的方法下添加你的控制器.

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 文章的更多内容：自定义事件简介