Автозаполнение в текстовом поле вложенной формы - PullRequest
Новая
       6

Автозаполнение в текстовом поле вложенной формы

0 голосов
/ 10 мая 2018

Я использую рельсы 5, и я хочу, чтобы автозаполнение текстового поля находилось во вложенной форме.Вложенная форма была сгенерирована через кокон.Когда я пытаюсь использовать функцию автозаполнения в родительской форме, она работает нормально.Однако, похоже, что мой javascript не работает для вложенной формы.

Это файл модели вложенной формы 

class Programline < ApplicationRecord
belongs_to :program, inverse_of: :programlines
belongs_to :exercise


def exercise_name
 exercise.try(:exe_desc)
end

def exercise_name=(exe_desc)
 self.exercise = Exercise.find_by_exe_desc(exe_desc) if 
 exe_desc.present?
end



end

Это мое текстовое поле во вложенной форме.

 <%= f.text_field :exercise_name, data: {autocomplete_source: Exercise.order(:exe_desc).map(&:exe_desc)} ,class: "form-control", placeholder: "Exercise", autofocus: true %>

Это мой файл javascript. 

     jQuery
     $(function() {
      $(document).on("focus","programline_exercise_name", function() {
        $('programline_exercise_name').autocomplete({
            source: $('programline_exercise_name').data('autocomplete- source')
              }); 
                });
                  })

Когда я заполняю форму, она работает нормально, вставляет данные и строит отношения без каких-либо проблем.Но он не находит автоматически данные, которые есть в таблице упражнений.

Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Вы опубликовали это в выпусках коконов , поэтому я повторю ваш ответ здесь.

Ваш фильтр выбора для jquery кажется неправильным. Вы пишете on("focus","programline_exercise_name" и $('programline_exercise_name'), которые будут искать html-элемент с таким именем. Как $('p') выберет все параграфы. Я предполагаю, что вы хотите выбрать элемент с идентификатором или классом programline_exercise_name? Для динамически добавленных полей вы определенно будете использовать класс, но тогда ваш фрагмент jquery также будет неправильным.

Так что, если вы добавите имя требуемого класса в поле 

<%= f.text_field :exercise_name, data: { autocomplete_source: Exercise.order(:exe_desc).map(&:exe_desc)},
      class: "form-control programline_exercise_name", 
      placeholder: "Exercise", 
      autofocus: true %>

Тогда вам понадобится что-то вроде 

$(document).on("focus", ".programline_exercise_name", function() {
  var _this = $(this); 
  _this.autocomplete({
    source: _this.data('autocomplete- source')
  }); 
});

Не проверено, поэтому позвольте мне объяснить: когда событие фокуса вызывается для любого из текстовых полей с классом .programline_exercise_name, задайте автозаполнение только для элемента, вызвавшего событие.

0 голосов
/ 10 мая 2018

Ваш JQuery должен выглядеть следующим образом (при условии, что ваше вложенное поле имеет идентификатор programline_exercise_name): 

$(function() {
 $(document).on("focus","#programline_exercise_name", function() {
   $('#programline_exercise_name').autocomplete({
       source: $('#programline_exercise_name').data('autocomplete- source')
    }); 
 });
});
...