I have create a searsh view and i can go to the values in another page and it's working fine , I can see my values but when I have added pagination it's working again but when I press button number 2 of paination it's not working and it give me an error :
MethodNotAllowedHttpException in RouteCollection.php line 251
at RouteCollection->methodNotAllowed(array('POST')) ...
My functions:
public function searsh()
{
return view('resultats.recherche');
}
public function show(Request $request)
{
$this->validate($request, [
'cne' => 'required|integer',
]);
$exams = Exam::where('cne', $request->cne)->paginate(4);
return view('resultats.index', compact('exams'));
}
and this is my routes:
The first one that make me send a searsh request in db
Route::get('/chercher', 'ExamsController#searsh')->name('display-cne-search');
Route::post('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
and this is my view
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body{
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
background: url('image/t10.jpg');
}
.bling{
background:url('image/background.jpg');
}
</style>
#extends('layouts.master')
#section('content')
#if($exams->isEmpty())
<div style="width:100%;height:100px;background-color:white">
<center>
<p style="margin-top:50px;">Le cne que vous avez choisi est incorrecte entrer un autre cne svp <a href="/chercher">
<br>
<button style="margin-top:5px"class="btn btn-primary">Par ici</button></a>
</p>
</center>
</div>
#else
<div class="container">
<div class="row">
<center><div class="col-md-12">
<div style="border-radius:5px;background:url('image/background.jpg')">
<center>
<h2 style="color:white;font-weight: bold;padding-top:5px;padding-bottom:5px;" > Historique des résultats de l'étudiant(e) {{$prenom}} {{$nom}} <br>
CNE {{$cne}}</h2>
</center>
</div>
<center><table style="background-color:white;border-radius:5px;" class="table">
<head>
<tr>
<th>Matiére</th>
<th>Note</th>
<th>Semestre</th>
<th>Session</th>
<th>Année</th>
<th>Le prof vous a peut-être laissé une remarque</th>
<th>Demande Vérification</th>
</tr>
</head>
<body>
#foreach($exams as $exam)
<tr class="{{$loop->index % 2==0 ? 'bling' : ''}}">
<td>{{ $exam->matiere}}</td>
<td>{{ $exam->note}}</td>
<td>{{ $exam->sem}}</td>
<td>{{ $exam->ses}}</td>
<td>{{ $exam->an}}</td>
<td>
<center>
<button type="button" value="{{$exam->remarque}}" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" onClick="document.getElementById('remarque').innerHTML=this.value">
Remarque
</button>
</center>
</td>
<td>
#if(!$exam->verification)
<button class="btn btn-succees" onclick="document.getElementById('verification-form-{{$exam->id}}').submit();" >
Vérifier la note
</button>
<form id="verification-form-{{ $exam->id }}" action="{{ route('display-num-search', $exam ) }}" method="post">
{{ csrf_field() }}
</form>
#elseif($exam->verification->etat=="En attente")
<center> <a title="{{$exam->verification->etat}}" style="background-color:orange" class="btn-floating btn pulse"></a></center></p>
#else
<center><p> Verifié <i title="Note verifié par le professeur" class="fas fa-user-check"></i></p></center>
#endif
</td>
</tr>
#endforeach
<center>{{ $exams->links()}}</center>
</body>
</table></center>
<!-- modal remarque -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Remarque du prof</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="font-size:15px;font-weight: bold;" id="remarque"></div>
</div>
</div>
</div>
</div>
</div></center>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});
// Or with jQuery
$('.dropdown-trigger').dropdown();
</script>
#endif
#endsection
POST requires a CSRF token everytime to process the request.
So, for performing a search and getting the pagination you can set the route as:
Route::any('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
By this method, the first search performed is handled with POST method with the CSRF token and later for paginations, GET method is used.
EDIT: To make searches:
Change your route to GET.
Route::get('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
Also, change the form method to GET
<form id="verification-form-{{ $exam->id }}" action="{{ route('display-num-search', $exam ) }}" method="GET">
Related
This question already has answers here:
Bootstrap Element 100% Width
(14 answers)
Closed 1 year ago.
how to make my program can follow resolution my screen, or any idea to make my program make better.
I guess my bootstrap is problem because program display is not fit screen, I hope it can fit on my screen.
and here is my index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Import Excel Ke Database Dengan Laravel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<center>
<h2>Import Excel Ke Database Dengan Laravel</h2>
<h3><a target="_blank" href="https://www.malasngoding.com/">www.malasngoding.com</a></h3>
</center>
{{-- notifikasi form validasi --}}
#if ($errors->has('file'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('file') }}</strong>
</span>
#endif
{{-- notifikasi sukses --}}
#if ($sukses = Session::get('sukses'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $sukses }}</strong>
</div>
#endif
<button type="button" class="btn btn-primary mr-5" data-toggle="modal" data-target="#importExcel">
IMPORT EXCEL
</button>
<!-- Import Excel -->
<div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form method="post" action="/transaksi/import_excel" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Import Excel</h3>
</div>
<div class="modal-body">
{{ csrf_field() }}
<label>Pilih file excel</label>
<div class="form-group">
<input type="file" name="file" required="required">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Import</button>
</div>
</div>
</form>
</div>
</div>
I'm using laravel 8.6 and php.
There is my table code, I was tried add container-fluid but still didn't work
<table class='table table-bordered'>
<thead>
<tr>
<th>No</th>
<th>id_subdist</th>
<th>id_toko</th>
<th>id_dso</th>
<th>id_rso</th>
<th>id_channel</th>
<th>id_outlet</th>
<th>id_produk</th>
<th>qty_pcs</th>
<th>harga</th>
<th>nama_promo</th>
<th>free_goods</th>
<th>total_qty_include_free_goods</th>
<th>disc_total</th>
<th>jumlah</th>
<th>tgl_posting</th>
<th>tgl_faktur</th>
<th>created_date</th>
<th>modified_by</th>
<th>modified_date</th>
<th>status</th>
</tr>
</thead>
<tbody>
#php $i=1 #endphp
#foreach($transaksi as $s)
<tr>
<td>{{ $i++ }}</td>
<td>{{$s->id_subdist}}</td>
<td>{{$s->id_toko}}</td>
<td>{{$s->id_dso}}</td>
<td>{{$s->id_rso}}</td>
<td>{{$s->id_channel}}</td>
<td>{{$s->id_outlet}}</td>
<td>{{$s->id_produk}}</td>
<td>{{$s->qty_pcs}}</td>
<td>{{$s->harga}}</td>
<td>{{$s->nama_promo}}</td>
<td>{{$s->free_goods}}</td>
<td>{{$s->total_qty_include_free_goods}}</td>
<td>{{$s->disc_total}}</td>
<td>{{$s->jumlah}}</td>
<td>{{$s->tgl_posting}}</td>
<td>{{$s->tgl_faktur}}</td>
<td>{{$s->created_date}}</td>
<td>{{$s->modified_by}}</td>
<td>{{$s->modified_date}}</td>
<td>{{$s->status}}</td>
</tr>
#endforeach
</tbody>
</table>
Use container-fluid class instead of container class if you want full-screen layout.
Your Code:
<div class="container">
...
</div>
Change it to:
<div class="container-fluid">
...
</div>
The container class is a fixed width container, meaning its max-width changes at each breakpoint. And .container-fluid is a full width container, spanning full screen of the viewport. Read more at Bootstrap Docs
How do I add code to the input button so that the value of the Id is sent to the Controller?
I have eight images. Then I click on the id of 116, open this image.
When I click on the biggest photo, Open a bootstrap modal for me.
This action tag form is written to this ID 120, While I have selected ID 116.
http://localhost:8000/admin/products/4/galleries/120
#section('content')
<div class="col-md-10 p-5 pt-2">
<form method="post" action="{{ route('products.galleries.store', $product->id) }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
</form>
<hr>
<div class="col-md-6 mx-auto">
<div class="row">
<div class="mx-auto" id="showImage">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="deleteImage('{{ $gallery->id }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">
</div>
</div>
<div class="row">
#foreach($galleries as $gallery)
<div class="col-md-2">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}')"><br><div class="text-center text-danger">{{ $gallery->id }}</div>
</div>
#endforeach
</div>
</div>
</div>
<div class="modal fade" id="delete" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog modal-sm">
<form action="{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}" method="post">
#csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This action is not reversible.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete the image?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#push('script')
<script src="{{ asset('themes/js/dropzone.min.js') }}"></script>
<script>
function showImage(url, id) {
let route = "'"+'{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}'+"'";
let image = '<img src='+url+' onclick="deleteImage('+id+','+route+')" class="img-fluid cursor-pointer" />';
$('#showImage').html(image);
}
function deleteImage(id, url) {
$('#delete').modal(id, url);
}
</script>
#endpush
web.php
Route::post('products/{product}/galleries/{gallery}', 'GalleryController#delete')->name('products.galleries.delete');
How do I add code to the input button so that the value of the Id is sent to the Controller?
I have eight images. Then I click on the id of 116, open this image.
When I click on the biggest photo, Open a bootstrap modal for me.
This action tag form is written to this ID 120, While I have selected ID 116.
http://localhost:8000/admin/products/4/galleries/120
#section('content')
<div class="col-md-10 p-5 pt-2">
<form method="post" action="{{ route('products.galleries.store', $product->id) }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
</form>
<hr>
<div class="col-md-6 mx-auto">
<div class="row">
<div class="mx-auto" id="showImage">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="deleteImage('{{ $gallery->id }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">
</div>
</div>
<div class="row">
#foreach($galleries as $gallery)
<div class="col-md-2">
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}')"><br><div class="text-center text-danger">{{ $gallery->id }}</div>
</div>
#endforeach
</div>
</div>
</div>
<div class="modal fade" id="delete" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog modal-sm">
<form action="{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}" method="post">
#csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This action is not reversible.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete the image?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#push('script')
<script src="{{ asset('themes/js/dropzone.min.js') }}"></script>
<script>
function showImage(url, id) {
let route = "'"+'{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}'+"'";
let image = '<img src='+url+' onclick="deleteImage('+id+','+route+')" class="img-fluid cursor-pointer" />';
$('#showImage').html(image);
}
function deleteImage(id, url) {
$('#delete').modal(id, url);
}
</script>
#endpush
You are looping through the gallery images, after loop iterations are done you written your code for modal, the last value of gallery which you used for modal is the last index in your collection of gallery images.
This peice of code may help you
$gallery = 5;
$galleries = [5,6,7,9,8];
foreach($galleries as $gallery) {
// code
}
// now your $gallery variable does not hold 5 instead it has 8 as you assigned its value through loop
As you used $gallery vairable before, You can fix your code like this
#foreach($galleries as $_gallery)
<div class="col-md-2">
<img src="{{ asset("storage/{$_gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$_gallery->image}") }}', '{{ $_gallery->id }}')"><br><div class="text-center text-danger">{{ $_gallery->id }}</div>
</div>
#endforeach
The spanish version failed me, so I'll test my luck here
I have the following code and I would like to know how I can pass the data from my table to the modal
This is my code in edit.blade.php. The modal does work but I don't know how to make the data show up in the modal, I'll do POST to the database myself but I just want to know how I make that data show up so I can edit it.
The data that I want to appear in the modal are the id, the name and the email.
This is my code in editar.blade.php
<script src="{{ url('/js/vendor/jquery-1.12.4.min.js') }} "></script>
<script src="{{ url('/js/bootstrap.min.js') }} "></script>
<link rel="stylesheet" href="{{ url('/css/bootstrap.min.css') }} ">
<script src="{{ url('/js/jquery.dataTables.min.js') }} "></script>
<div class="container">
<h2>Editar estudiante</h2>
<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
<table id="user_table" class="table table-bordered table-striped">
<thead>
<tr>
<th width="35%" id="name">Name</th>
<th width="35%" id="email">Email</th>
<th width="30%">Action</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<input type="hidden" name="modal-input-id" class="form-control" id="modal-input-id" required>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-email" class="form-control" id="modal-input-email" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#user_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('getdata') }}",
},
columns: [
{
data: 'name',
name: 'name',
className: 'user-name',
},
{
data: 'email',
name: 'email',
className: 'user-email',
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$(document).on('click', "#edit-item", function() {
//obtenemos la instancia de la fila
$tr = $(this).closest('tr');
//rellenamos los campos en el modal
$('#modal-input-name').val($('user-name', $tr).text());
$('#modal-input-email').val($('user-email', $tr).text());
// Mostramos el modal
$('#edit-modal').modal('show');
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$('#edit-form').trigger('reset');
})
});
</script>
This is my get route in web.php
Route::get('/editar', 'AdminController#editar')->name('editar');
This is my function to bring data to the Datatable in AdminController.php
public function getPosts(Request $request)
{
if($request->ajax()){
$data = StudentModel::latest()->get();
return DataTables::of($data)
->addColumn('action', function($data){
$button = '<button id="edit-item" type="button" name="edit-item" data-target-id="'.$data->id.'" class="edit btn btn-primary btn-sm" data-toggle="modal" data-target="edit-modal">Edit</button>';
$button .= ' <button type="button" name="edit" data-target-id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('editar');
}
Can you try this?
$('#modal-input-name').val($tr.find('td.user-name').text());
$('#modal-input-email').val($tr.find('td.user-email').text());
And also I would suggest that you use a css class for targeting a click event, as Id is normally for a unique identifier, and by doing your way you are having many table rows with the same Id which defeats the original idea.
I want to implement a lightbox-like gallery using bootstrap modals in my Laravel view.
I have a view that shows all posts(archive) paginated by 10 and a button to open each post on modal. What I want to achieve is having two buttons on my popup modal that can loop through my posts. I also have the jquery functionallity ready. I just dont know how to get prev and next images with foreach loop.
#extends('index')
#section('title', 'USP Archive')
#section('description', 'Archive of User Submitted Posts')
#section('featured-image', asset('/images/share/usp.jpg'))
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12 {{ str_replace('.', '-', Route::currentRouteName()) }}">
<h1>USP Archive</h1>
<hr>
<div class="usp-list-archive">
#foreach ($userposts as $userpost)
<h3>Email: {{ $userpost->email }}</h3>
<br>
<p>{{ $userpost->fname }} {{ $userpost->lname }}</p>
<br>
<img src="{{asset('/images/usp/' . $userpost->image)}}" />
<br>
View
Open
<hr>
#endforeach
<div class="modal fade" id="uspModal" tabindex="-1" role="dialog" aria-labelledby="uspModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img class="modal-image" src="" />
<button id="prev" data-src="{{ $prev }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; left:0;">PREV</button>
<button id="next" data-src="{{ $next }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; right:0;">NEXT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('scripts')
<script>
$('#uspModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var imgsrc = button.data('src')
var modal = $(this)
modal.find('.modal-image').attr("src",imgsrc);
})
$('#prev').click(function(e) {
var imgsrc = $(this).data('src')
var modal = $('#uspModal')
modal.find('.modal-image').attr("src",imgsrc);
})
$('#next').click(function(e) {
var imgsrc = $(this).data('src')
var modal = $('#uspModal')
modal.find('.modal-image').attr("src",imgsrc);
})
</script>
#endsection
As you can see I have two undefined variables $prev and $next. Those are the vars I need to define correctly to get the link of the previous and next post image source.
Thanks in advance!
#extends('index')
#section('title', 'USP Archive')
#section('description', 'Archive of User Submitted Posts')
#section('featured-image', asset('/images/share/usp.jpg'))
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12 {{ str_replace('.', '-', Route::currentRouteName()) }}">
<h1>USP Archive</h1>
<hr>
<div class="usp-list-archive">
#foreach ($userposts as $index => $userpost)
<h3>Email: {{ $userpost->email }}</h3>
<br>
<p>{{ $userpost->fname }} {{ $userpost->lname }}</p>
<br>
<img src="{{asset('/images/usp/' . $userpost->image)}}" />
<br>
View
Open
<hr>
#endforeach
<div class="modal fade" id="uspModal" tabindex="-1" role="dialog" aria-labelledby="uspModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img class="modal-image" src="" />
#if ($prev = $userposts->get($index-1))
<button id="prev" data-src="{{ $prev }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; left:0;">PREV</button>
#endif
#if ($next = $userposts->get($index+1))
<button id="next" data-src="{{ $next }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; right:0;">NEXT</button>
#endif
</div>
</div>
</div>
</div>
</div>
</div>