Библиотека CrudField на JavaScript с полями взаимосвязи/подполями

На чтение 3 мин Опубликовано 19.09.2024

Вопрос или проблема

У меня есть CRUD с типом связи и подполями:

'name'  => 'serviceProvider',
'type'  => 'relationship',
'label' => 'Поставщик услуг',
'subfields'   => [
    [
        'name'  => 'cost',
        'label' => 'Стоимость',
        'type'  => 'number',
        'attributes' => ["step" => "any"], // разрешить дробные числа
        'wrapper' => [
            'class' => 'form-group col-sm-4'
        ],
    ],
    [
        'name'  => 'is_no_tarif_cost',
        'label' => 'Стоимость без тарифа',
        'type'  => 'checkbox',
        'wrapper' => [
            'class' => 'form-group col-sm-2 d-flex align-items-end'
        ],
    ],
]

И я хочу сделать так, чтобы при изменении поля is_no_tarif_cost в консоли выводился номер измененной строки.

crud.field('serviceProvider').subfield('is_no_tarif_cost').onChange(function(field) {
    console.log('эй, я здесь на строке: ' + field.rowNumber) 
});

Я сделал всё согласно документации, но это не работает. В консоли нет ошибок JavaScript. Словно хук был повешен на неправильный объект. Есть идеи, в чем может быть ошибка?

Ответ или решение

Для решения вашей проблемы с библиотекой CrudField и обработчиком изменений для подполя is_no_tarif_cost, стоит проверить несколько моментов, которые могут быть причиной того, что обработчик не срабатывает.

Проверьте, правильно ли вы инициализируете CrudField. Убедитесь, что сам объект crud инициализируется корректно и что поле serviceProvider доступно для доступа в момент, когда вы пытаетесь установить обработчик события. Это важно, поскольку, если оно еще не загружено или инициализировано, обработчик не сработает.
Проверьте наличие объекта rowNumber. В зависимости от реализации CrudField, rowNumber может не быть непосредственно доступен на объекте field. Если rowNumber не является частью объекта field, вы можете попробовать использовать другой способ, чтобы получить номер строки. Например:
```
crud.field('serviceProvider').subfield('is_no_tarif_cost').onChange(function(field) {
   const row = field.closest('tr'); // или любой другой подходящий родительский элемент
   const rowNumber = row ? row.dataset.rowNumber : 'Номер строки не найден'; // используйте подходящий атрибут
   console.log('hey, I am here on row: ' + rowNumber);
});
```
Используйте необходимость события. Возможно, стоит убедиться, что событие именно change предназначено для вашего чекбокса. Иногда стоит проверить срабатывание других событий, таких как click или input:
```
crud.field('serviceProvider').subfield('is_no_tarif_cost').on('input', function(field) {
   console.log('hey, I am here on row: ' + field.rowNumber);
});
```
Проверка контекста выполнения. Убедитесь, что обработчик события устанавливается после загрузки всех необходимых элементов. Если вы устанавливаете обработчик до загрузки элементов, они могут быть еще не доступны. Лучше всего делать это в функции инициализации или после полной загрузки страницы.
Логика и безошибочный отладчик. Если ничего не помогает, добавьте дополнительные точки логирования — например, перед установкой обработчика, чтобы увидеть, действительно ли код доходит до этого момента и имеет доступ ко всем необходимым данным.

Пример финального кода с учетом предложенных修改ений:

$(document).ready(function() {
    crud.field('serviceProvider').subfield('is_no_tarif_cost').onChange(function(field) {
        const row = field.closest('tr'); // подставьте правильный селектор, если нужно
        const rowNumber = row ? row.data('row-number') : 'Номер строки не найден';
        console.log('hey, I am here on row: ' + rowNumber);
    });
});

Следуя этим шагам и проверяя каждую часть реализации, вы сможете найти и устранить проблему. Если у вас все еще будут возникать трудности, пожалуйста, предоставьте больше информации о том, как и где используется эта логика, чтобы мы могли оказать более целенаправленную помощь.