jQuery UI autocomplete in remote modal RoR

Question

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 your 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.

Answer 1

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.

Please try the following code:

$(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

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