远程模态RoR中的jQuery UI自动完成 [英] jQuery UI autocomplete in remote modal RoR

问题描述

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

I am trying to implement jquery ui autocomplete in my remote modal and it doesn't work whereas autocomplete works on regular static pages.

对于远程模态，我使用的是宝石的组合： modal-responder-rails 和 rails -bootstrap-modal

For the remote modal, I am using a combination of gems: modal-responder-rails and 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());
}

这是我的模态，我从这里复制了文章。

Here is my modal, which I copied from this 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;
  });
});

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

The idea is to create a remote modal controller where you can add a new book. I have a multi-step registration which means that my modal has to redirect to a new page: general information if the information correct but I can't validate the forms since my JavaScript doesn't work...

我试图覆盖 z-index 并且还尝试在我的CSS中使用！important 但它仍然无效。另外，如果我查看浏览器控制台，我可以清楚地看到所有数据都显示在我的输入字段中（注意：我的所有数据都来自数据库）如下所示：

I tried to overwrite z-index and also tried to use !important in my CSS and it still doesn't work. Also, if I look into my browser console, I can clearly see that all of the data appears in my input field (note: all of my data comes from the database) as shown below:

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

我没有看到代码有任何问题，我无法弄清楚问题。有人可以帮我解决问题吗？
非常感谢你的帮助和时间。

I don't see any problem with the code and I can't figure out the problem. Can someone please help me to solve the problem? Thank you very much for your help and time.

更新：

只要我理解，我的问题来自渲染的动作页面。由于我正在渲染我的模态体， javascript 不起作用。

As long as I understand, my problem comes from the rendered action page. Since I am rendering my modal body, javascript doesn't work.

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

One of the solutions I found is to add

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

在 create 方法（或操作）的某处，它将识别 create.js.erb 在你的资产中。豪ver，如果要呈现 static 内容（例如map），我不知道该怎么做，因为为了定义一个模态，你必须在你希望的方法下在你的控制器中添加 respond_with_modal @books 使用。

somewhere in your create method (or action) which will identify the create.js.erb in your assets. However, if you want to render a static content (ex. map), I am not sure what to do here because, in order to define a modal, you have to add respond_with_modal @books inside your controller under the method that you want to use.

推荐答案

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

Since there is no working example, I just assume this its a timing issue like @muistooshort pointed out. You properly load your jquery part before the modal is updated. One option to overcome this, is by using Events. You want your code to be executed after your update your modal with the 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文章：自定义事件简介中了解更多信息

depending on your application, you might want to change the event to something like contentUpdated, so it fits a more general purpose. You can name the Event what ever you like. You can read more on the jQuery article: Introducing Custom Events

这篇关于远程模态RoR中的jQuery UI自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！