212: Fix autocomplete list bug

app/assets/javascripts/z.js

@@ -19,15 +19,15 @@ $(document).ready(function(){
     'z-index': 1100
   });
 
-  $('#add-to-list-dropdown').autocomplete({
-    source: $("#add-to-list-dropdown").data("autocomplete-source"),
+  $('.list-dropdown').autocomplete({
+    source: $('.list-dropdown').data('autocomplete-source'),
     minLength: 0,
     select: function(event, ui) {
-      handleAddToListAutocompleteSelect(event, ui)
+      handleAddToListAutocompleteSelect($('.list-dropdown'), ui)
     }
   })
 
-  $('#add-to-list-dropdown').click(showAllListsForAutocomplete)
+  $('.ui-autocomplete-input').click(triggerClickForListAutocomplete)
 });
 
 $(document)
@@ -42,27 +42,18 @@ $(document)
     }
   });
 
-function handleAddToListAutocompleteSelect(event, ui) {
-  $("#list_autocomplete_val").val(ui.item.id);
-  $('form#new_listing').submit();
+function handleAddToListAutocompleteSelect(element, ui) {
+  // populate the form field with the id of the autocomplete-selected list
+  element.parent().find('.list-id-field').val(ui.item.id)
+  // submit the form
+  element.parent().submit()
 }
 
-$(document).on('shown.bs.modal', function(){
-  $('form#new_listing').click(showAllListsForAutocomplete)
-  $('#add-to-list-dropdown').autocomplete({
-    source: $("#add-to-list-dropdown").data("autocomplete-source"),
-    minLength: 0,
-    select: function(event, ui) {
-      handleAddToListAutocompleteSelect(event, ui)
-    }
-  })
-});
-
-function showAllListsForAutocomplete() {
+function triggerClickForListAutocomplete() {
   // hack to show all lists when initially clicking
   // in the field. this triggers a backspace keypress
   var evt = jQuery.Event('keydown');
   evt.which = 8; // backspace
   evt.keyCode = 8
-  $('#add-to-list-dropdown').trigger(evt)
+  $(this).trigger(evt)
 }

app/views/listings/create.js.erb

@@ -10,12 +10,26 @@ else {
   $("#movie_show_listings_<%= @movie.tmdb_id %>").html("<%= j(render :partial => 'movies/movie_show_list_manage', :locals => {:movie => @movie}) %>");
 }
 
-$('#add-to-list-dropdown').click(showAllListsForAutocomplete)
+var $listPageDropdown = $("#myModal_<%= @movie.tmdb_id %>").find("#add-to-list-dropdown-" + "<%= @movie.tmdb_id %>");
+var $showPageDropdown = $('.list-dropdown');
 
- $('.add-to-list-dropdown').autocomplete({
-   source: $("#add-to-list-dropdown").data("autocomplete-source"),
-   minLength: 0,
-   select: function(event, ui) {
-    handleAddToListAutocompleteSelect(event, ui)
-   }
- })
+($listPageDropdown, $showPageDropdown).click(triggerClickForListAutocomplete);
+
+<%# On a list view, we need to specify the movie
+so we use the movie's tmdb_id %>
+($listPageDropdown).autocomplete({
+  source: $listPageDropdown.data('autocomplete-source'),
+  minLength: 0,
+  select: function(event, ui) {
+    handleAddToListAutocompleteSelect($listPageDropdown, ui)
+  }
+});
+
+<%# On a show page, we have only one movie, so the selector is not tied to the movie id %>
+($showPageDropdown).autocomplete({
+  source: $showPageDropdown.data('autocomplete-source'),
+  minLength: 0,
+  select: function(event, ui) {
+    handleAddToListAutocompleteSelect($showPageDropdown, ui)
+  }
+});

app/views/movies/_movie.html.erb

@@ -1,6 +1,12 @@
 
   <!-- MODAL -->
- <div class="modal fade" id="myModal_<%= movie.tmdb_id %>" tabindex="-1" role="dialog">
+ <div class="modal fade movie-modal"
+      id="myModal_<%= movie.tmdb_id %>"
+      data-movie-id="<%= movie.tmdb_id %>"
+      data-kits='zorro'
+      tabindex="-1"
+      role="dialog"
+  >
 
   <div class="modal-dialog">
     <div class="modal-content">

app/views/movies/_movie_add_to_another_list.html.erb

@@ -3,12 +3,12 @@
     <%= form_for(Listing.new, class: "form-class", id: "modal-add-to-other-list", remote: true) do |f| %>
       <%= text_field_tag  'list_dropdown',
                           nil,
-                          class: "form-control add-to-list-dropdown",
-                          id: 'add-to-list-dropdown',
+                          class: "form-control add-to-other-list list-dropdown",
+                          id: "add-to-list-dropdown-#{movie.tmdb_id}",
                           placeholder: 'Add to another list',
                           data: { autocomplete_source: list_autocomplete_dropdown(movie) }  %>
 
-      <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val' %>
+      <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val', class: 'list-id-field' %>
       <%= hidden_field_tag :tmdb_id, movie.tmdb_id %>
       <%= hidden_field_tag :user_id, current_user.id %>
       <%= f.submit "+ Add", id: "add_to_list_button_movies_partial", class: "form-control-submit" %>

app/views/movies/_movie_add_to_first_list.html.erb

@@ -3,12 +3,12 @@
       <%= form_for(Listing.new, class: "form-class", id: "modal-add-to-first-list", remote: true) do |f| %>
         <%= text_field_tag  'list_dropdown',
                             nil,
-                            class: "form-control",
-                            id: 'add-to-list-dropdown',
+                            class: "form-control list-dropdown",
+                            id: "add-to-list-dropdown-#{movie.tmdb_id}",
                             placeholder: 'Add to list',
                             data: { autocomplete_source: list_autocomplete_dropdown(movie) }  %>
 
-        <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val' %>
+        <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val', class: 'list-id-field' %>
         <%= hidden_field_tag :tmdb_id, movie.tmdb_id %>
         <%= hidden_field_tag :user_id, current_user.id %>
         <%= hidden_field_tag :from, "first_list" %>

app/views/movies/_movie_partial_loop.html.erb

@@ -7,7 +7,8 @@
           <%= link_to image_for(movie), movie_modal_path(tmdb_id: movie.tmdb_id, list_id: @list&.id),
                                         remote: true,
                                         data: { target: "#myModal_#{movie.tmdb_id}" },
-                                        id: "modal_link_#{movie.tmdb_id}"
+                                        id: "modal_link_#{movie.tmdb_id}",
+                                        class: 'modal-linker'
           %>
         </p>
 

app/views/movies/modal.js.erb

@@ -1,2 +1,14 @@
 $("#movies_partial_<%= @movie.tmdb_id %>").html("<%= j(render :partial => 'movies/movie', :locals => {:movie => @movie}) %>");
-$("#myModal_<%= @movie.tmdb_id %>").modal('show');
+$("#myModal_<%= @movie.tmdb_id %>").modal('show');
+
+var $listPageDropdown = $("#myModal_<%= @movie.tmdb_id %>").find("#add-to-list-dropdown-" + "<%= @movie.tmdb_id %>");
+
+$listPageDropdown.click(triggerClickForListAutocomplete);
+
+$listPageDropdown.autocomplete({
+  source: $listPageDropdown.data('autocomplete-source'),
+  minLength: 0,
+  select: function(event, ui) {
+    handleAddToListAutocompleteSelect($listPageDropdown, ui)
+  }
+});