Всплывающее окно модели при выборе опции изменения в таблице
У меня есть таблица, и внутри нее у меня есть выбор
<tbody>
@foreach($cheques as $key => $cheque)
<tr data-id = "{{ $cheque->id }}">
<td><a href = "#" class = "btn-detail-cheque">{{ $cheque->reference }}</a></td>
<td>{{ $cheque->amount }}</td>
<td>{{ $cheque->owner }}</td>
<td>{{ $cheque->receiver }}</td>
<td>{{ $cheque->date_entree->format('d/m/Y') }}</td>
<td>{{ $cheque->date_payment->format('d/m/Y') }}</td>
<td>
<select name = "statue" class = "form-control" id = "statue">
<option value = "0" {{ $cheque->statue == "0" ? 'selected':'' }}>{{ __('messages.cheques.waiting') }}</option>
<option value = "1" {{ $cheque->statue == "1" ? 'selected':'' }}>{{ __('messages.cheques.payed') }}</option>
<option value = "2" {{ $cheque->statue == "2" ? 'selected':'' }}>{{ __('messages.cheques.not_payed') }}</option>
<option value = "3" {{ $cheque->statue == "3" ? 'selected':'' }}>{{ __('messages.cheques.transfered') }}</option>
</select>
</td>
<td>
<a href = "{{ url('/cheques/edit/'.$cheque->id) }}" class = "text-info btn-edit"><i class = "fa fa-edit"></i></a>
<a href = "#" class = "text-danger btn-remove"><i class = "fa fa-trash-alt"></i></a>
</td>
</tr>
@endforeach
</tbody>
и я хочу, когда когда-либо изменится выбранная статуя, я хочу вытолкнуть модель, и это то, что я сделал
$("#statue").on('change', function(e){
e.preventDefault();
var tr = $(this).parents('tr');
var id = $(tr).data('id');
var statue = $(this).val();
bootbox.confirm({
size: "small",
message: "{{__('messages.cheques.statue_confirmation')}}",
buttons: {
confirm: {
label:"{{__('messages.buttons.confirm')}}",
className: 'btn-sm btn-danger'
},
cancel: {
label:"{{__('messages.buttons.cancel')}}",
className: 'btn-sm btn-defaul'
}
},
callback: function(result){
if (result){
if (statue == 3){
$("#transfer-cheque-form").find("#id").val(id);
$("#transfer-cheque").modal();
}else{
$.post('change-statue/'+id, {_token:$('meta[name = "csrf-token"]').attr('content'), statue:statue}, function(data){
if (data.success){
}
});
}
}
}
});
});
но проблема в том, что модель всплывает только на первом элементе на столе, иначе ничего не происходит
я использую готовый шаблон, у которого есть динамическая таблица с нумерацией страниц
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я подозреваю, что проблема в том, что вы захватываете его по идентификатору статуи. Идентификатор должен соответствовать только одному элементу на странице (идентификатор должен быть уникальным). Что вы, вероятно, захотите сделать, так это добавить класс к вашему выбору и изменить свой селектор jquery, чтобы вместо этого выбрать этот класс.
<select name = "statue" class = "form-control" id = "statue" class = "statue-select">
$(".statue-select").on('change', function(e) {
...
});
спасибо что исправили проблему но только на первой странице пагинация вторая на не работает
jQuery применяет обработчик только к тем элементам, которые существуют на странице во время выполнения этого кода. Если вы хотите, чтобы нумерация страниц работала правильно, это необходимо применять каждый раз при взаимодействии с нумерацией страниц. Другим, вероятно, более простым решением было бы переместить все в функцию javascript и установить атрибут onchange для выбора.
Во-первых, HTML DOM может содержать только один элемент с идентификатором. Ты можешь сделать :
$('select[name = "statue"]').on('change', function(e) {
...
});
Если ваши элементы динамически добавляются/обрабатываются, например, при разбивке на страницы ajax, вы можете сделать:
$(document).on('change', 'select[name = "statue"]', function(e) {
...
});
У вас не должно быть статического идентификатора в элементе выбора, вы можете решить проблему, добавив функцию для прослушивания изменения выбора.
function myFunction(event){
//TODO
}<select onchange = "myFunction(event)">
Вам нужно предоставить селектор для функции включения. Возможный дубликат stackoverflow.com/questions/13418963/…