Замена вложенных элементов формы при изменении выбора?(Rails / AJAX / StimulusJS) - PullRequest
Новая
       54

Замена вложенных элементов формы при изменении выбора?(Rails / AJAX / StimulusJS)

0 голосов
/ 23 сентября 2019

У меня есть стандартное приложение Rails с предварительно заполненной вложенной формой.У меня есть выборка на родительской модели, которая, когда пользователь изменяет контекст вложенных элементов, и они должны быть очищены и повторно заполнены.

Я использовал StimulusJS и хотел что-то вроде этого: 

import { Controller } from "stimulus"

export default class extends Controller {

  static targets = [ "budgetCode", "body", "template" ]

  connect() {
  }

  budget_code_changed(event) {

    document.getElementById('budget_items').getElementsByTagName('tbody')[0].innerHTML = '';


    const url = '/budget_code_items/budget?budget_code_id=' + this.budgetCodeTarget.value;

    Rails.ajax({
      url: url,
      success: function(data) { 

        let row;
        var content = this.templateTarget.innerHTML
        for (let i = 0; i < data.length; i++) {
        this.bodyTarget.insertAdjacentHTML('beforeend', content)
          }

      }
    })

      }

 }

Я приближаюсь - когда я меняю выбор, строки удаляются.Я могу вручную вставить одну новую строку с этим: 

    var content = this.templateTarget.innerHTML
    this.bodyTarget.insertAdjacentHTML('beforeend', content)

, как я определил с моей новой структурой строки.

Проблема, которую я, похоже, имею, заключается в том, чтобы встроить вызов Stimulus внутрифункция Rails.ajax.Я получаю Uncaught TypeError: Невозможно прочитать свойство 'innerHTML' из неопределенных ошибок.Я уверен, что это проблема типа переменной области.Javascript не является моим сильным навыком, поэтому я подозреваю, что упускаю что-то маленькое, что легко исправить.

Вопрос по теме:

В то же время вВ одну из ячеек столбца моего шаблона мне нужно добавить текст и установить значение скрытого ввода данных из этого вызова Rails.ajax.Я, вероятно, могу понять это самостоятельно, но если кто-то может добавить к этой проблеме стороны, это будет оценено.

1 Ответ

1 голос
/ 24 сентября 2019

Вы должны использовать жирную стрелку , чтобы сохранить область действия, чтобы this оставалось направленным на контроллер 

Rails.ajax({
  url: url,
  type: 'GET',
  success: (data) => {
    // now this retains to the controller
  }
})

Кстати, вы можете передать параметр следующим образом 

const url = '/budget_code_items/budget'
Rails.ajax({
  url: url,
  type: 'GET',
  data: 'budget_code_id=' + this.budgetCodeTarget.value,
  success: (data) => {
  }
})

См. Более подробный пример для дополнительной структуры кода контроллера.

...