I have a table and inside it I have a select
<tbody>
#foreach($cheques as $key => $cheque)
<tr data-id="{{ $cheque->id }}">
<td>{{ $cheque->reference }}</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>
<i class="fa fa-edit"></i>
<i class="fa fa-trash-alt"></i>
</td>
</tr>
#endforeach
</tbody>
and i want when ever the select statue change i want to pop the model and this is what i done
$("#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){
}
});
}
}
}
});
});
but the problem is the model popup only on the first item on the table otherwise nothing happens
i'm using an template ready who has a dynamic table with pagination
I suspect the issue is you are grabbing it by id of statue. The id is supposed to only correspond with one item on the page (id's should be unique). What you probably want to do is add a class to your select and modify your jquery selector to select that class instead.
<select name="statue" class="form-control" id="statue" class="statue-select">
$(".statue-select").on('change', function(e) {
...
});
Firstly an HTML DOM can only contain single with an ID. You can do :
$('select[name="statue"]').on('change', function(e) {
...
});
If your elements are getting appended/manipulated dynamically on ajax pagination for example, you can do :
$(document).on('change', 'select[name="statue"]', function(e) {
...
});
You should not have a static ID in the select element, you can solve the problem adding a function to listen the select change
function myFunction(event){
//TODO
}
<select onchange="myFunction(event)">
Related
I have a table made with Bootstrap and I want to delete the data with bootstrap model confirm. Deleting works fine without model, but with model, delete button always send last row data to the model no matter which row delete button clicked.
model button
<i class="fe fe-trash text-danger fe-24"></i>
Modal delete button
<form action="{{ route('admin.users.delete', $user) }}" method="post">
#csrf
<button type="submit" class="btn mb-2 btn-danger">Delete</button>
</form>
js used
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recipient = button.data('user')
});
table foreach
<tbody>
#if ($users->count())
#foreach ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>(478) 446-9234</td>
<td>159 address</td>
<td>
#if ($user->user_role == 0)
User
#elseif ($user->user_role == 1)
Editor
#else Admin
#endif
</td>
<td>{{ $user->created_at->format('M d, Y') }}</td>
<td>{{ $plans->find($user->plan_id)->name }}</td>
<td>
#if ($user->expiration_date != null)
{{ Carbon\Carbon::parse($user->expiration_date)->format('M d, Y') }}
#else
N/A
#endif
</td>
<td>
#if ($user->is_active == 1)
<span class="text-success font-weight-bold">Active</span>
#else
<span class="text-danger font-weight-bold">Disabled</span>
#endif
</td>
<td>
<i class="fe fe-edit text-secondary fe-24"></i>
<i class="fe fe-trash text-danger fe-24"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
I am assuming that you have a foreach to creat the delete button s for every user
The $user that is passed will always be the last $user id
You need to pass the $user that was clicked
and pass this the the action of the form
try
var deleteModal = $('#deleteModal');
$('a').on('click', function (e) { // this is the "a" tag
var userId = $(this).data('user'),
var submitUrl = {!! url("/admin/users/delete/") !!}+userId;
var form = $('#form');
form.attr('action', submitUrl);
});
});
when the is clicked ,store the data-user and create the submit and change the form action
Hope this would be of any help to you.
I have a select dropdown where I get data from an API, later I add the value of the item selected on a table. All works good but when I click in addItem() I add the id value of the item of the select, but I want to show the name_value instead of the id on the table. At the same time, I need to get the id value of the select item.
Select code (VUEJS):
<select
id="select1"
ref="seleccionado"
v-model="id_equipo"
required
>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
button addItem:
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
table:
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
function addItem:
addItem () {
var equipos_torneo = {
id_torneo: this.id_torneo,
id_equipo: this.id_equipo,
}
this.rowData.push(equipos_torneo)
},
Try this way instead:
<template>
<div>
<!-- Your select code -->
<select id="select1" ref="seleccionado" v-model="id_equipo" required>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
<!-- Your button code -->
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
<!-- Your table code -->
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
methods: {
addItem () {
// Search the object in the equipos array with the selected id from the select
let equipos_torneo = this.equipos.find(v.id_equipo === this.id_equipo);
// If object gets found successfully, push to the rowData array
if(equipos_torneo) this.rowData.push(equipos_torneo);
},
},
}
</script>
Have to select dropdown and Selected dropdown value should be updated in immediate column(td) value in the table. I tried with the below code, I can able to populate dropdowns and I can select options from the dropdown. But selected dropdown need to update in the immediate "td" column. Please find attached a screenshot and stackblitz for the demo.
HTML code:
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
ts code:
this.http.get(dataUrl).subscribe(response => {
this.persons = response.data.map(x=>({...x,check:false,test:'test'}));
this.dtTrigger.next();
});
Stackblitz for Demo
The column seems to point to firstName instead of the test that you have binded on the dropdown.. So you might want to change it to <td>{{ person.test}}</td>.
Example:
<tbody>
<tr *ngFor="let person of persons;let i = index;">
<td><input [(ngModel)]="person.check" type="checkbox" class="checkboxCls" name="id" ></td>
<td>{{ person.id }}</td>
<td>
<span id={{i+1}})>{{ person.firstName }}</span><br/>
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
</select>
</td>
<td>{{ person.test }}</td> <---HERE
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
Also, if you want to have it initialised with the first name; you can change your map function to add the first name instead of 'test'
this.persons = response.data.map(x=>({...x,check:false,test:x.firstName}));
HTML
<form method="post">
{% csrf_token %}
<tr id = "{{ x.id }}">
<td>{{ x.name }}</td>
<td>{{ x.sth }}</td>
<td>{{ x.sth_else }}</td>
<td><button type="submit" name="edit_btn">edit</button></td>
</tr>
</form>
jQuery
$('form').on('submit', function(event){
event.preventDefault();
console.log("Executing script for edit button pressing")
x = $(this).children().first().attr('id');
console.log(x)
});
I'm trying to extract the id from the tr in the html, but whenever i get on the page and see the console output i get: undefined. Any ideas?
I have a table which I populate with data and I want to insert other rows to that table, under the element that was clicked dynamically. I have an array of json objects called rows and when I click on a row it should fetch an array of json objects called campaigns.
This is my html:
<tbody>
<tr ng-repeat="row in rows">
<td>
{{ row.name }}
</td>
<td>{{ row.clicks }}</td>
</tr>
<script type="text/ng-template" id="clicked">
<tr ng-repeat="campaign in campaigns">
<td>
{{ campaign.name}}
</td>
<td>{{ campaign.clicks }}</td>
</tr>
</script>
</tbody>
This is my function:
$scope.toggleCollapse = function(id) {
var campaignId = id;
if (campaignId === $scope.selectedRow) {
$scope.selectedRow = null;
} else {
$scope.selectedRow = campaignId;
$scope.ads.push({
"id" : 1,
"name" : "TestName",
"clicks" : 400
})
// append template here
}
};
You don't need a seperate template, just put your straight in. If there is nothing in campaigns array, there will be 0 campaign s.