远程模态RoR中的jQuery UI自动完成
我试图在我的远程模式中实现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()); }
这是我的模态，我从这篇文章中复制了它。
莫代尔：
$(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如果信息正确但我无法validation表格，因为我的JavaScript不起作用…
我试图覆盖z-index并尝试在我的CSS中使用!important ，但它仍然不起作用。 另外，如果我查看浏览器控制台，我可以清楚地看到所有数据都出现在我的input字段中（注意：我的所有数据都来自数据库），如下所示：
我没有看到代码有任何问题，我无法弄清楚问题。 有人可以帮我解决问题吗？ 非常感谢你的帮助和时间。
更新：
只要我理解，我的问题来自渲染的操作页面。 由于我正在渲染我的模态体， javascript不起作用。
我找到的解决方案之一是添加
respond_to do |format| format.js { ... } end
您的create方法（或操作）中的某个位置，用于标识资产中的create.js.erb 。 但是，如果你想渲染一个static内容（例如map），我不知道该怎么做，因为为了定义一个模态，你必须在你想要的方法下在你的控制器中添加respond_with_modal @books使用。
由于没有工作的例子，我只是假设这是一个像@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文章的更多信息：自定义事件简介