unclead/yii2-multiple-input. Получить id выбранной записи

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 19:33

Использую unclead/yii2-multiple-input
В представлении:

Код: Выделить всё

<?= $form->field($model, 'coauthors')->widget(MultipleInput::class, [
        'min' => 1,
        'max' => 5,
        'allowEmptyList' => false,
        'rendererClass' => \unclead\multipleinput\renderers\ListRenderer::className(),
        'extraButtons' => function ($model, $index, $context) {
                return '<span class="unclead_span"><a href="#" onclick="return moveChoiceTo(this, -1);">&uarr;</a>
                <a href="#" onclick="return moveChoiceTo(this, 1);">&darr;</a></span>';
        },
        'columns' => [
            [
                'name' => 'coauthors',
                'title' => Module::t('module','COAUTHORS'),
                'type' => Typeahead::className(),
                'options' => [
                    'pluginOptions' => ['highlight' => true],
                    'dataset' => [
                        [
                            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                            'display' => 'value',
                            'remote' => [
                                'url' => Url::to(['/user/author/authorslist']) . '?q=%QUERY',
                                'wildcard' => '%QUERY'
                            ],
                            'templates' => [
                                'notFound' => '<div class="text-danger" style="padding:0 8px">'.Module::t('module','AUTHORS_NOTFOUND').' '.Html::a(Module::t('module','ADD_AUTHOR'),['#'],['id'=>'modalauthor','data-url'=>Url::to('/user/author/coauthorcreate')]).'</div>',
                            ]
                        ]
                    ],
                ],
            ],
        ],
    ])->label(false); ?>
    
В контроллере:

Код: Выделить всё

    public function actionAuthorslist($q = null)
    {
        $authors = Author::find()
            ->select(['id','concat(secondname, " ",firstname, " ",middlename) as value'])
            ->filterWhere(['or',['like', 'secondname', $q],['like', 'firstname', $q],['like', 'middlename', $q]])
            ->asArray()
            ->all();
        $out = [];
        foreach ($authors as $author) {
            $out[$author['id']] = ['value' => $author['value']];
        }
        return Json::encode($out);
    }
Хотелось бы в форму передавать не только выбранные значения ФИО авторов, но и их id ($out[$author['id']]). Т.е., отображать, ест-но, ФИО, а id прятать например где-то в input с type="hidden". Как получить в форме для каждого автора его id?

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.11, 20:27

Доку лень читать?)

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
         $("#your-hidden-input").val(dutum.id); 
         }',
]

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 20:48

yiiliveext писал(а):
2019.12.11, 20:27
Доку лень читать?)

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
         $("#your-hidden-input").val(dutum.id); 
         }',
]
Доку смотрел, да, видимо, невнимательно. Сегодня уже почти весь день с этой проблемой ковыряюсь. Торможу.
yiiliveext, Вы меня выручили. Спасибо огромное! Постараюсь быть повнимательнее.

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.11, 20:53

yura1976 писал(а):
2019.12.11, 20:48
Доку смотрел, да, видимо, невнимательно. Сегодня уже почти весь день с этой проблемой ковыряюсь. Торможу.
yiiliveext, Вы меня выручили. Спасибо огромное! Постараюсь быть повнимательнее.
А так можно показывать фио, а отправлять на сервер айди.

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
             $(this).closest('.typeahead').val(datum.id);
         }',
]


yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 21:30

yiiliveext писал(а):
2019.12.11, 20:53
yura1976 писал(а):
2019.12.11, 20:48
Доку смотрел, да, видимо, невнимательно. Сегодня уже почти весь день с этой проблемой ковыряюсь. Торможу.
yiiliveext, Вы меня выручили. Спасибо огромное! Постараюсь быть повнимательнее.
А так можно показывать фио, а отправлять на сервер айди.

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
             $(this).closest('.typeahead').val(datum.id);
         }',
]

А если выбрано несколько фио? Соответственно мне нужно передать на сервер несколько id. Ведь как только я выбираю второй фио, то благодаря $(this).closest('.typeahead').val(datum.id); предыдущее значение id заменяется новым. Это если, конечно, я все правильно понял, как это все работает. Голова уже уставшая, плохо соображаю.

Я просто добавил, воспользовавшись Вашей помощью:

Код: Выделить всё

'typeahead:select' => 'function(e, datum) { 
            $("#authors_ids").val(datum.id);
      }',
 ],
и

Код: Выделить всё

$form->field($model, 'authors_ids')->hiddenInput()->label(false); ?>
и:

Код: Выделить всё

$('.multiple-input').on('afterAddRow', function(e, row, currentIndex) {
//здесь будет js, который формирует строку из id всех выбранных фио через запятую и присваивает в качестве value для #authors_ids
}
А в методе контроллера я уже с помощью php (explode) разбиваю строку и далее сохраняю все что нужно в таблице mysql (кол-во записей = кол-ву элементов после explode.

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.11, 21:55

yura1976 писал(а):
2019.12.11, 21:30
А если выбрано несколько фио? Соответственно мне нужно передать на сервер несколько id. Ведь как только я выбираю второй фио, то благодаря $(this).closest('.typeahead').val(datum.id); предыдущее значение id заменяется новым. Это если, конечно, я все правильно понял, как это все работает. Голова уже уставшая, плохо соображаю.
А там есть мультиселект в одном инпуте? Тогда надо смотреть код страницы.
А если в разных инпутах, то есть, в каждой строке по тайпхеду, то заменит только в текущей строке.

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 22:32

yiiliveext писал(а):
2019.12.11, 21:55
А там есть мультиселект в одном инпуте? Тогда надо смотреть код страницы.
А если в разных инпутах, то есть, в каждой строке по тайпхеду, то заменит только в текущей строке.
Да, Вы правы. Опять я торможу. Там в разных инпутах.
Но только я после того как добавил $(this).closest('.typeahead').val(datum.id); не увидел элемент с классом typeahead (смотрел в консоли хрома). И на сервер значение id не передалось. В принципе я уже почти сделал своим методом. Но просто было бы интересно понять и Ваш метод на будущее (а может и в этом проекте заменю).

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.11, 22:39

'.typeahead' - это селектор инпутов к которым тайпхед прицеплен, посмотрите какой там класс у них общий есть и подставьте вместо моего.
Либо в options его пропишите

Код: Выделить всё

'options' => [
    'placeholder' => 'Select trololo',
    'class' => 'typehead'
]

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 22:59

yiiliveext писал(а):
2019.12.11, 22:39
'.typeahead' - это селектор инпутов к которым тайпхед прицеплен, посмотрите какой там класс у них общий есть и подставьте вместо моего.
Либо в options его пропишите

Код: Выделить всё

'options' => [
    'placeholder' => 'Select trololo',
    'class' => 'typehead'
]
Отлично. Все заработало. Чувствую, что уже совсем туплю, и у Вас время отнимаю своими вопросами. Думаю, будет лучше, если я высплюсь, потом продолжу работу.

Спасибо за помощь!

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.11, 23:24

Все-таки оно не заработало. Но разбираться буду уже завтра на свежую голову.

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.12, 19:51

Не передаются данные на сервер.

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
            $(this).closest(".typeahead").val(datum.id);
            console.log($(this).closest(".typeahead").val());
         }',
]
В консоли (привожу только часть кода):

Код: Выделить всё

<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="typeahead form-control tt-hint" tabindex="-1" data-krajee-typeahead="typeahead_7864e59a" readonly="" spellcheck="false" dir="ltr" style="position: absolute; .......">
<input type="text" id="userarticles-coauthors-1" class="typeahead form-control tt-input" name="UserArticles[coauthors][1]" tabindex="1" data-krajee-typeahead="typeahead_7864e59a" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="userarticles-coauthors-1_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top; background-color: transparent;">
<span role="status" aria-live="polite" style="position: absolute; ..............">0 results are available, use up and down arrow keys to navigate.</span><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; .........">Павлов Сергей Константинович</pre>
</span>
Т.е., после выполнения $(this).closest(".typeahead").val(datum.id); значение value для инпута .typeahead не изменилось (точнее оно вообще отсутствует для обоих инпутов). Тем не менее console.log($(this).closest(".typeahead").val()); выводит правильное значение. На сервер передается фио, а не id. А нужно чтобы передавалось именно id.

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.12, 20:28

Поменяйте на

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
            $(this).closest(".tt-input").val(datum.id);
     }',
]

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.12, 20:53

yiiliveext писал(а):
2019.12.12, 20:28
Поменяйте на

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
            $(this).closest(".tt-input").val(datum.id);
     }',
]
Ничего не изменилось.

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.12, 21:11

yura1976 писал(а):
2019.12.12, 20:53
Ничего не изменилось.
Ваша взяла, таки заставили меня поставить виджет)
Так надо

Код: Выделить всё

'pluginEvents' => [
                        'typeahead:select' => 'function(e, datum) { 
                            $(this).closest(".tt-input").typeahead("val", datum.id);
                        }',
                    ],
Хотя не, немного не так))

yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.12, 21:44

Решение следующее

Код: Выделить всё

'pluginEvents' => [
                        'typeahead:select' => 'function(e, datum) { 
                            $(this).data("id",datum.id);
                        }'
                    ],
И вешаете на форму обработчик

Код: Выделить всё

$this->registerJs("
$('#form-signup').on('beforeSubmit', function (event, messages, deferreds) {
        $('.tt-input').each(function(){
             var el = $(this);
             var newel = el.clone().hide().appendTo(el.parent());
             newel.val(el.data('id'));
        })
    });
");


yiiliveext
Сообщения: 867
Зарегистрирован: 2019.08.13, 01:49

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yiiliveext » 2019.12.12, 23:00

Или еще одно решение

Код: Выделить всё

'pluginEvents' => [
                         'typeahead:select' => 'function(e, datum) { 
                                    $(this).closest("div.form-group").next().val(datum.id);
                                   }'
                                ],
и в colums добавляете hidden input

Код: Выделить всё

'columns' => [
            [
                'name' => 'coauthors',
                'title' => Module::t('module','COAUTHORS'),
                'type' => Typeahead::className(),
               //.......
            ],
            [
                 'name' => 'coauthors_id',
                 'type' => 'hiddenInput'
            ]
]                

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.12, 23:03

yiiliveext писал(а):
2019.12.12, 21:44
Решение следующее

Код: Выделить всё

'pluginEvents' => [
                        'typeahead:select' => 'function(e, datum) { 
                            $(this).data("id",datum.id);
                        }'
                    ],
И вешаете на форму обработчик

Код: Выделить всё

$this->registerJs("
$('#form-signup').on('beforeSubmit', function (event, messages, deferreds) {
        $('.tt-input').each(function(){
             var el = $(this);
             var newel = el.clone().hide().appendTo(el.parent());
             newel.val(el.data('id'));
        })
    });
");

Спасибо огромное! То что нужно!

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.25, 23:25

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
             $(this).closest('.typeahead').val(datum.id);
         }',
]

Здесь событие select. Т.е., id авторов, которые заполняются в инпутах втором, третьем и т.д. В первом инпуте (тот, который отображается сразу по умолчанию) выводится ФИО (значение формируется в контроллере, берется из того что указал пользователь при заполнении данных о себе ранее в отдельной форме). А вот id - не соображу как получить.

Нашел в доках про событие afterInit.

Код: Выделить всё

$('.multiple-input').on('afterInit', function(){
	//Как сюда передать id? Если сюда передать, то как сделать все остальное, мысли уже есть
});
Или может быть есть какой-то другой способ, более простой? В итоге нужно передавать на сервер все айдишники (и этот, и те, которые сформировались в результате 'typeahead:select'

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.25, 23:26

yura1976 писал(а):
2019.12.25, 23:25

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
             $(this).closest('.typeahead').val(datum.id);
         }',
]

В коде событие select. Т.е., id авторов, которые заполняются в инпутах втором, третьем и т.д. В первом инпуте (тот, который отображается сразу по умолчанию) выводится ФИО (значение формируется в контроллере, берется из того что указал пользователь при заполнении данных о себе ранее в отдельной форме). А вот id - не соображу как получить.

Нашел в доках про событие afterInit.

Код: Выделить всё

$('.multiple-input').on('afterInit', function(){
	//Как сюда передать id? Если сюда передать, то как сделать все остальное, мысли уже есть
});
Или может быть есть какой-то другой способ, более простой? В итоге нужно передавать на сервер все айдишники (и этот, и те, которые сформировались в результате 'typeahead:select'

yura1976
Сообщения: 93
Зарегистрирован: 2012.08.06, 13:24

Re: unclead/yii2-multiple-input. Получить id выбранной записи

Сообщение yura1976 » 2019.12.25, 23:35

Код: Выделить всё

'pluginEvents' => [
    'typeahead:select' => 'function(e, datum) { 
             $(this).closest('.typeahead').val(datum.id);
         }',
]

В коде событие select. Т.е., id авторов, которые заполняются в инпутах втором, третьем и т.д. В первом инпуте (тот, который отображается сразу по умолчанию) выводится ФИО (значение формируется в контроллере, берется из того что указал пользователь при заполнении данных о себе ранее в отдельной форме). А вот id - не соображу как получить.

Нашел в доках про событие afterInit.

Код: Выделить всё

$('.multiple-input').on('afterInit', function(){
	//Как сюда передать id? Если сюда передать, то как сделать все остальное, мысли уже есть
});
Или может быть есть какой-то другой способ, более простой? В итоге нужно передавать на сервер все айдишники, т.е., и этот, и те, которые сформировались в результате 'typeahead:select'. Сейчас передаются только те, которые сформировались в результате 'typeahead:select'

Ответить