Созданная запись Tom-select не обновляет параметры раскрывающегося списка (Rails/Stimulus)

Я использую tom-select в своем приложении rails (со Stimulus), чтобы создать запись модели «Поставщик» на лету, чтобы затем выбрать ее в раскрывающемся списке моей модели «Trx». Я могу получить запрос на выборку для создания записи, но мой раскрывающийся список не обновляется. После этого видео SupeRails #17 в 12:14 на его вкладке сети отображаются 2 элемента: выборка и xhr. В моем приложении я вижу только элемент выборки (со статусом 200).

Что мне нужно сделать, чтобы выпадающий список заполнялся вновь созданной записью?

Вот настройки моего экземпляра TomSelect в файле vendor_select_controller.js:

settings = {
      plugins: ['clear_button'],
      selectOnTab: true,
      valueField: 'id',
      labelField: 'name',
      searchField: 'name',
      sortField: { field: "name", direction: "asc" },
      create: function (input, callback) {
        const data = { name: input }
        const token = document.getElementsByName("csrf-token")[0].content;
        fetch('/vendors', {
          body: JSON.stringify(data),
          method: 'POST',
          dataType: 'script',
          credentials: 'include',
          headers: {
            "X-CSRF-Token": token,
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        }).then((response) => { return response.json() })
          .then((data) => { callback({ value: data.id, text: data.name }) })
      },
      onItemAdd: function () {
        this.setTextboxValue('');
        this.refreshOptions();
      },
    }

мой VendorsController

class VendorsController < ApplicationController
...
  def create
    @vendor = Vendor.new(vendor_params)

    respond_to do |format|
      if @vendor.save
        format.html { redirect_to vendors_path }
        format.json { render json: @vendor }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @vendor.errors, status: :unprocessable_entity }
      end
    end
  end

поле Vendor collection_select в моей форме Trx:

<%= f.collection_select :vendor_id, Vendor.all, :id, :name, {:prompt => "Select Vendor"},
  {class: "w-full", data: { controller: "vendor-select" } } %>

Вывод из моих журналов консоли:

Started POST "/vendors" for 127.0.0.1 at 2023-04-14 16:18:43 -0700
Processing by VendorsController#create as JSON
  Parameters: {"name"=>"Pines8", "vendor"=>{"name"=>"Pines8"}}
  TRANSACTION (0.1ms)  begin transaction
  ↳ app/controllers/vendors_controller.rb:11:in `block in create'
  Vendor Create (0.3ms)  INSERT INTO "vendors" ("name", "created_at", "updated_at") VALUES (?, ?, ?)  [["name", "Pines8"], ["created_at", "2023-04-14 23:18:43.634246"], ["updated_at", "2023-04-14 23:18:43.634246"]]
  ↳ app/controllers/vendors_controller.rb:11:in `block in create'
  TRANSACTION (6.2ms)  commit transaction
  ↳ app/controllers/vendors_controller.rb:11:in `block in create'
Completed 200 OK in 12ms (Views: 0.3ms | ActiveRecord: 6.6ms | Allocations: 2695)

🤔 А знаете ли вы, что...
Ruby on Rails создан на основе языка программирования Ruby и был впервые выпущен в 2005 году.


1
58
1

Ответ:

Решено
valueField: 'id',
             ^
labelField: 'name',
             ^

не соответствует тому, что вы передаете функции callback:

callback({ value: data.id, text: data.name })
//         ^               ^
//     valueField      labelField
//     id not found    name not found

что должно быть:

callback({ id: data.id, name: data.name })
//         ^            ^
//     valueField    labelField

это означает, что вы также можете сделать это:

callback(data)