Twig table get id outside for loop - php

I'm trying to access to the user id outside my for loop in twig
Table
{% set userid = '' %}
<table class="display dataTable" id="manageusertable" cellspacing="0" width="100%">
<thead>
<tr>
<th>Image</th>
<th>Login</th>
<th>Nom / Prenom</th>
<th>Email</th>
<th>Activé</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
{% for user in users %}
{% set userid = user.id %}
<tr class="getid">
<td>{{ user.UserImage }}</td>
<td>{{ user.username }}</td>
<td>{{ user.UserLastname }} / {{ user.UserFirstName }}
</td>
<td>{{ user.email }}</td>
{% if user.enabled == 1 %}
<td><i class="fa fa-check" aria-hidden="true"></i></td>
{% else %}
<td><i class="fa fa-times" aria-hidden="true"></i></td>
{% endif %}
<td>
<i class="fa fa-search" aria-hidden="true"></i>
<button type="button" class="btn btn-add btn-sm" data-
toggle="modal" data-target="#update"><i class="fa fa-
pencil"></i></button>
<button type="button" class="deleteuser btn btn-danger
btn-sm" data-toggle="modal" data-target="#deleteuser"><i
class="fa fa-trash-o"></i> </button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Modal div when button data-model=#delete is clicked (outside loop)
<div class="modal fade" id="deleteuser" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="fa fa-user m-r-5"></i> Delete User</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<fieldset>
<div class="col-md-12 form-group user-form-group">
<label class="control-label">Delete User</label>
<div class="pull-right">
<button type="button" class="btn btn-danger btn-sm">NO</button>
<button " class="btn btn-add btn-sm"><a style="color:#fff;" href="{{ path('lemon_user_deleteuser', {'id': userid}) }}">YES</a></button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
The line
<button " class="btn btn-add btn-sm"><a style="color:#fff;" href="{{ path('lemon_user_deleteuser', {'id': userid}) }}">YES</a></button>
always returns the last id (15 if i have 15users in my DB) no matter on which line the button is clicked
i know how to do this with jquery/ajax and from scratch php but since im new to symfony/twig im kinda lost

In your case you have to make an array with the whole of ids e.g.
{{ set userIds = {} }}
{% for user in users %}
...
{% set userIds = userIds|merge({id : user.id} %}
...
{% endfor %}
And then redo the "for loop" for each delete button and paths setup

Related

Delete button not work bootstrap modal and Laravel

I created one table that list items, and I added two buttons(edit and delete) so, the button edit is working, but the button delete is not working, and I'm making me carzy because I don't find the error. this is the table:
<table id="datatable" class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>text</th>
<th class="disabled-sorting" width="10%"></th>
<th class="disabled-sorting" width="10%"></th>
</tr>
</thead>
<tbody>
#foreach($Items as $item)
<tr>
<td>{{ $item->text }}</td>
<td><a href="{{ route('ItemsController.edit', $item->id) }}" class="btn btn-primary btn-fab btn-icon btn-round" title="Edit">
<i class="fa fa-edit"></i></a>
</td>
<td>
<a href="#" class="btn btn-primary btn-fab btn-icon btn-round btn-delete" title="Delete" data-id="{{ $item->id }}" data-toggle="modal" data-target="#modal-default" data-route="{{ route('ItemsController.destroy', $item->id) }}" data-title="{{ $item->id }}">
<i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
</tbody>
</table>
the modal is:
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form class="" action="" method="post">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger" name="button">yes, delete</button>
</form>
</div>
</div>
</div>
</div>
javascript data:
<script>
$(document).on('click', '.btn-delete', function(){
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
})
</script>
and controller function destroy
public function destroy(Items $item) {
$item->delete();
return redirect()->route('items.index')->with('success', 'Deleted Success');
}
I checked it line by line, and I don't know what I'm wrong, please help me
Many times thanks for getting into this.
You need to trigger your modal from JS.
If it is bootstrap 4 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
$("#modal-default").modal();
If it is bootstrap 5 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
modal = new bootstrap.Modal(document.getElementById("modal-default"));
modal.show();

Button and Table dropdown shows duplicate values in Laravel 8

I want to show no duplicates of the dropdown, I already set distinct in the controller query builder. Here's the blade view for this dropdown:
<div class="btn-group">
<button class="ml-2.5 mt-2 btn btn-primary " type="button">
Notifications: {{ $notifications }}
</button>
<button type="button" class="mt-2 btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
#foreach ($getmahasiswa as $requests)
<li><a class="dropdown-item" href={{ url('/dashboard/nameasrequest',$requests->id_mhs) }}>{{ $requests->name }} | {{ $requests->id_mhs }}</a></li>
#endforeach
</ul>
</div>
This dropdown table automatically toggled all the data that have the same name, i want it to open normally one by one. Here's the blade view for the dropdown table:
<div class="container">
<table class="table table-condensed" id="myTable">
<thead>
<tr>
<th>Mata Kuliah</th>
</tr>
</thead>
#foreach($getmahasiswa as $collapse)
<tbody class="panel">
<tr data-bs-toggle="collapse" data-bs-target="#demo{{$collapse->id_mhs}}" data-bs-parent="#myTable">
<strong>
<td>{{ $collapse->mk }}</td>
</strong>
</tr>
<tr id="demo{{$collapse->id_mhs}}" class="collapse">
<td colspan="6" class="hiddenRow">
<div>
<strong>{{$collapse->name}}</strong>
</div>
</td>
<td class="align-self-end">
<div>
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal{{$collapse->id_mhs}}" class="mr-3 text-sm bg-blue-500 hover:bg-green-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">
<a href=# >APPLY ALL</a>
</button>
</div>
</td>
<div class="modal fade" id="exampleModal{{$collapse->id_mhs}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Mata Kuliah</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#foreach($getmahasiswa as $collapses)
{{$collapses->mk}}
<br>
#endforeach
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
#endforeach
</table>
</div>
and here's the controller to fetch the data for both of views
$lr = DB::table('lr2')->get();
$notifications = DB::table('lr2')->distinct()->count('id_mhs');
$getmahasiswa = DB::table('lr2')->distinct()->select('lr2.id_mhs', 'users.name', 'lr2.mk')
->join('users', 'lr2.id_mhs', '=', 'users.id')->get();
return view('dashboard', compact('lr', 'notifications', 'getmahasiswa'));

Modal resets the counter back to 1

Not sure how did it reset/s itself even though it's inside the foreach loop. Here's a snippet from of my blade view:
<tbody>
<?php $counter = 1; ?>
#foreach ($guidelines as $guideline)
<tr>
<td class="text-center">{{ $counter }}</td>
<td>{{ $guideline->description }}</td>
<td>
<i class="far fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal"><i class="far fa-trash-alt"></i></button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this?</p>
</div>
<div class="modal-footer">
Confirm
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<?php $counter++; ?>
</tr>
#endforeach
</tbody>
Edit works with /general-guidelines/1/edit, /general-guidelines/2/edit, /general-guidelines/5/edit, etc. But /delete would always end up at /1/delete
First, because you have only one modal (#myModal), and your button always reference to the(#myModal), so that it will always open up the first modal. Try the solution #myModal{{ $loop->index }}.
Secondly, You can use $loop->iteration instead of $counter in the foreach loop.
Try this.
<tbody>
#foreach ($guidelines as $guideline)
<tr>
<td class="text-center">{{ $counter }}</td>
<td>{{ $guideline->description }}</td>
<td>
<i class="far fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal{{ $loop->index }}"><i class="far fa-trash-alt"></i></button>
<div class="modal fade" id="myModal{{ $loop->index }}" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this?</p>
</div>
<div class="modal-footer">
Confirm
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
with for loop, multiple modals are created but for all the modals generated with for loop, you can not use same id 'myModal' . id should be unique.

Laravel 5 Fetch the right id from table

I have a html table with a list of cars from my database, I wish to select a row in the table to open a bootstrap modal with the right id from the db table. The button "Change Status" opens the modal showing the car, numberplate and status. But it only fetches the latest id. When I move the modal to the top, It fetches the first id on the table. I'm baffled on what I can do to fix this.
Here's my html code:
#if (isset($results))
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="15%"></th>
<th>#</th>
<th>Numberplate</th>
<th>Status</th>
<th>Added</th>
<th>Changed</th>
<th>Change</th>
</tr>
</thead>
#foreach ($results as $result)
<tbody>
<tr>
<td></td>
<td>{{ $result->id }}</td>
<td>{{ $result->LicencePlate }}</td>
<td>{{ $result->Status }}</td>
<td>{{ $result->created_at }}</td>
<td>{{ $result->updated_at }}</td>
<td>
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal">Change Status</button>
</td>
</tr>
</tbody>
#endforeach
#endif
</table>
</div>
#if (isset($cars))
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="15%"></th>
<th>#</th>
<th>Numberplate</th>
<th>Status</th>
<th>Added</th>
<th>Changed</th>
<th>Change</th>
</tr>
</thead>
#foreach ($cars as $car)
<tbody>
<tr>
<td></td>
<td>{{ $car->id }}</td>
<td>{{ $car->LicencePlate }}</td>
<td>{{ $car->Status }}</td>
<td>{{ $car->created_at }}</td>
<td>{{ $car->updated_at }}</td>
<td>
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal">Change Status</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endif
</div>
</div>
</div>
#if (isset($cars))
#foreach ($cars as $car)
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>ID: {{ $car->id }}</p>
<p>Numberplate: {{ $car->LicencePlate }}</p>
<p>Status: {{ $car->Status }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#endforeach
#endif
Not completely sure if a special method in my controller or you need to see my model. If so I can edit this question.
Now in your case the modal id #myModal is repeated inside the loop. Change the modal id and button id like,
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal_{{ $car->id }}">Change Status</button>
And modal
<div class="modal fade" id="myModal_{{ $car->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!--Modal content here -->
<div>
FYI: Use the single loop for both button and modal.

how can i divide items by categoria with twig

im trying to divide my items by category with javascript and twig, so after bringing all the products from the database i dont know how can i separate products with {% for %}. this is my twig code:
<div class="col-sm-4" itemscope itemtype="http://schema.org/Product">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title truncate">Categoria:{{ producto.idCategoria }}</h5>
</div>
<div class="panel-body">
Nombre:{{ producto.producto }}
<img src="{{ asset('bundles/savainventario/images/'~producto.filePersistencePath ) }}"
alt="404 file not found" class="img-thumbnail"/>
</div>
<div class="panel-footer">
<div class="container-fluid">
{#Precio#}
<span itemprop="price">
Precio:{{ producto.precio }}.Bsf
</span>
{#Form#}
<form class="form-inline" role="form" method="get"
action={{ path('sava_inventario_addcart', {'id': producto.idProducto }) }}>
<div class="form-group">
<input class="btn btn-default" type="submit" value="Agregar">
</div>
{#Ver mas#}
<!-- Button trigger modal -->
</form>
<button class="btn btn-primary btn-sm" data-toggle="modal"
data-target="#myModal{{ producto.idProducto }}">
Ver mas...
</button>
<!-- Modal -->
<div class="modal fade" id="myModal{{ producto.idProducto }}" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span
aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">{{ producto.producto }}</h4>
</div>
<div class="modal-body">
<!-- Datos productos -->
<table class="table table-striped">
<tr>
<td>Nombre:</td>
<td>{{ producto.producto }}</td>
</tr>
<tr>
<td>Image:</td>
<td>
<img src="{{ asset('bundles/savainventario/images/'~producto.filePersistencePath ) }}"
alt="404 file not found"/></td>
</tr>
<tr>
<td>Descripcion</td>
<td>{{ producto.descripcionProducto }}</td>
</tr>
<tr>
<td>Precio:</td>
<td>{{ producto.precio }}</td>
</tr>
<tr>
<td>Cantidad:</td>
<td>{{ producto.cantidad }}</td>
</tr>
<tr>
<td>Categoria:</td>
<td>{{ producto.idCategoria.categoria }}</td>
</tr>
<tr>
<td>Modelo:</td>
<td>{{ producto.idModelo.modelo }}</td>
</tr>
<tr>
<td>Video:</td>
<td>
<iframe width="433" height="315"
src="//www.youtube.com/embed/tQShyqnRx3s?list=PLw4rBoBPv1Vbq16M4SFkJPZj08FMaaR-8"
frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div> {#footer end#}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
my question is how can i separate my items by category, in one category i print it in one div container, in another div container i add products from another category and so on.
If your entites are setup properly this shouldnt be hard:
//Contoller
/**
* #Template()
*/
public function showProductsByCategory()
{
$categories = $this->getDoctrine()->getManager()
->getRepository("NamespacedBundle:Category")->findAll();
return array(
'categories' => $categories
);
}
Assuming your categories know about products
//Category Entity
/**
* #ORM\OneToMany(targetEntity="Product", mappedBy="category")
*/
protected $products;
And your products are tied to the category
//Product Entity
/**
* #ORM\ManyToOne(targetEntity="Category", inversedBy="products")
* #ORM\JoinColumn(name="category", referencedColumnName="category_id")
*/
protected $category;
Then your twig could be something based on:
//Sample Twig
{% for category in categories %}
<div class="container">
<h1>{{category.name}}</h1>
<ul>
{% for product in category.products %}
<li>{{product.name}}</li>
{% endfor %}
</div>
{% endfor %}

Categories