Автозаполнение jQuery UI в удаленном модемом RoR

Я пытаюсь реализовать 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()); } 

Вот мой модаль, который я скопировал из этой статьи .

Modal:

 $(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 а также попытался использовать !important в моем CSS, и он все еще не работает. Кроме того, если я посмотрю на свою консоль браузера, я ясно вижу, что все данные появляются в моем поле input (обратите внимание: все мои данные поступают из базы данных), как показано ниже:

  

Я не вижу проблем с кодом, и я не могу понять проблему. Может кто-нибудь, пожалуйста, помогите мне решить проблему? Большое вам спасибо за вашу помощь и время.

ОБНОВИТЬ:

До тех пор, как я понимаю, моя проблема возникает на странице отображаемых действий. Поскольку я обрабатываю свое модальное тело, javascript не работает.

Одним из решений, которые я нашел, является добавление

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

где-нибудь в вашем методе create (или действии), который идентифицирует create.js.erb в ваших активах. Однако, если вы хотите отображать static контент (например, карту), я не уверен, что делать здесь, потому что для определения модальности вам необходимо добавить в свой controller respond_with_modal @books по методу, который вы хотите использовать.

Поскольку нет рабочего примера, я просто предполагаю, что это вопрос времени, подобный @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: «Представление пользовательских событий»