I am trying to implement jquery ui autocomplete in my remote modal and it doesn't work whereas autocomplete works on regular static pages.
For the remote modal, I am using a combination of gems: modal-responder-rails and rails-bootstrap-modal
Here is my autocomplete code:
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.
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; }); }); 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...
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 you help and time.
UPDATE:
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 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.
0 comments:
Post a Comment