Страница 1 из 2
unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 19:33
yura1976
Использую 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);">↑</a>
<a href="#" onclick="return moveChoiceTo(this, 1);">↓</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?
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 20:27
yiiliveext
Доку лень читать?)
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$("#your-hidden-input").val(dutum.id);
}',
]
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 20:48
yura1976
yiiliveext писал(а): ↑2019.12.11, 20:27
Доку лень читать?)
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$("#your-hidden-input").val(dutum.id);
}',
]
Доку смотрел, да, видимо, невнимательно. Сегодня уже почти весь день с этой проблемой ковыряюсь. Торможу.
yiiliveext, Вы меня выручили. Спасибо огромное! Постараюсь быть повнимательнее.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 20:53
yiiliveext
yura1976 писал(а): ↑2019.12.11, 20:48
Доку смотрел, да, видимо, невнимательно. Сегодня уже почти весь день с этой проблемой ковыряюсь. Торможу.
yiiliveext, Вы меня выручили. Спасибо огромное! Постараюсь быть повнимательнее.
А так можно показывать фио, а отправлять на сервер айди.
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$(this).closest('.typeahead').val(datum.id);
}',
]
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 21:30
yura1976
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.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 21:55
yiiliveext
yura1976 писал(а): ↑2019.12.11, 21:30
А если выбрано несколько фио? Соответственно мне нужно передать на сервер несколько id. Ведь как только я выбираю второй фио, то благодаря $(this).closest('.typeahead').val(datum.id); предыдущее значение id заменяется новым. Это если, конечно, я все правильно понял, как это все работает. Голова уже уставшая, плохо соображаю.
А там есть мультиселект в одном инпуте? Тогда надо смотреть код страницы.
А если в разных инпутах, то есть, в каждой строке по тайпхеду, то заменит только в текущей строке.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 22:32
yura1976
yiiliveext писал(а): ↑2019.12.11, 21:55
А там есть мультиселект в одном инпуте? Тогда надо смотреть код страницы.
А если в разных инпутах, то есть, в каждой строке по тайпхеду, то заменит только в текущей строке.
Да, Вы правы. Опять я торможу. Там в разных инпутах.
Но только я после того как добавил $(this).closest('.typeahead').val(datum.id); не увидел элемент с классом typeahead (смотрел в консоли хрома). И на сервер значение id не передалось. В принципе я уже почти сделал своим методом. Но просто было бы интересно понять и Ваш метод на будущее (а может и в этом проекте заменю).
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 22:39
yiiliveext
'.typeahead' - это селектор инпутов к которым тайпхед прицеплен, посмотрите какой там класс у них общий есть и подставьте вместо моего.
Либо в options его пропишите
Код: Выделить всё
'options' => [
'placeholder' => 'Select trololo',
'class' => 'typehead'
]
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 22:59
yura1976
yiiliveext писал(а): ↑2019.12.11, 22:39
'.typeahead' - это селектор инпутов к которым тайпхед прицеплен, посмотрите какой там класс у них общий есть и подставьте вместо моего.
Либо в options его пропишите
Код: Выделить всё
'options' => [
'placeholder' => 'Select trololo',
'class' => 'typehead'
]
Отлично. Все заработало. Чувствую, что уже совсем туплю, и у Вас время отнимаю своими вопросами. Думаю, будет лучше, если я высплюсь, потом продолжу работу.
Спасибо за помощь!
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.11, 23:24
yura1976
Все-таки оно не заработало. Но разбираться буду уже завтра на свежую голову.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 19:51
yura1976
Не передаются данные на сервер.
Код: Выделить всё
'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.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 20:28
yiiliveext
Поменяйте на
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$(this).closest(".tt-input").val(datum.id);
}',
]
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 20:53
yura1976
yiiliveext писал(а): ↑2019.12.12, 20:28
Поменяйте на
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$(this).closest(".tt-input").val(datum.id);
}',
]
Ничего не изменилось.
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 21:11
yiiliveext
yura1976 писал(а): ↑2019.12.12, 20:53
Ничего не изменилось.
Ваша взяла, таки заставили меня поставить виджет)
Так надо
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$(this).closest(".tt-input").typeahead("val", datum.id);
}',
],
Хотя не, немного не так))
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 21:44
yiiliveext
Решение следующее
Код: Выделить всё
'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'));
})
});
");
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 23:00
yiiliveext
Или еще одно решение
Код: Выделить всё
'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'
]
]
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.12, 23:03
yura1976
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'));
})
});
");
Спасибо огромное! То что нужно!
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.25, 23:25
yura1976
Код: Выделить всё
'pluginEvents' => [
'typeahead:select' => 'function(e, datum) {
$(this).closest('.typeahead').val(datum.id);
}',
]
Здесь событие select. Т.е., id авторов, которые заполняются в инпутах втором, третьем и т.д. В первом инпуте (тот, который отображается сразу по умолчанию) выводится ФИО (значение формируется в контроллере, берется из того что указал пользователь при заполнении данных о себе ранее в отдельной форме). А вот id - не соображу как получить.
Нашел в доках про событие afterInit.
Код: Выделить всё
$('.multiple-input').on('afterInit', function(){
//Как сюда передать id? Если сюда передать, то как сделать все остальное, мысли уже есть
});
Или может быть есть какой-то другой способ, более простой? В итоге нужно передавать на сервер все айдишники (и этот, и те, которые сформировались в результате 'typeahead:select'
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.25, 23:26
yura1976
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'
Re: unclead/yii2-multiple-input. Получить id выбранной записи
Добавлено: 2019.12.25, 23:35
yura1976
Код: Выделить всё
'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'