How to open the modal if there is a validation error? - php

I have this code below, if a user is not authenticated it appears this "Login" link:
#if(!\Auth::check())
<span><a id="show_login_modal" href="javascript:void(0)">Login</a>
</span>
#endif
If the user logins with success the modal close and the user is loged in. Its working fine.
But if there is a validation error, for example if password is inscorrect, the modal is closed the user is not loged in and no error message appears. For the validaiton message appear is necessary to click in "login" to open again the modal and it apperas "These credentials do not match our records."
Do you know how to if there is a validation error open the modal without be necessary to click in "login"?
jQuery:
$('#show_login_modal').click(function(){
$('#login_modal').modal('show');
})
$('#close_login_modal').click(function(){
$('#login_modal').modal('hide');
})
Modal:
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
#include('includes.errors')
<form class="clearfix" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group col-12 px-0">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" value="{{ old('email') }}" name="email" required autofocus placeholder="Email">
</div>
<div class="form-group col-12 px-0">
<label for="inputEmail4">Password
<a href="{{ route('password.request') }}" class="text-gray ml-1" style="text-decoration: underline">
<small>Recover password</small></a> </label>
<input type="password" class="form-control" name="password" required placeholder="Palavra-passe">
</div>
<button type="submit" class="btn btn-primary btn d-block w-100">Login</button>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="close_login_modal" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
errors.blade.php
#if ($errors->any())
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif

Related

Laravel 419 Page Expired while submitting a form

While submitting a form on a pop-up modal the page gets expired on laravel, I am sending a post request.
Can someone please help? i have added a csrf token too..
View Blade
<div id="reviewModal-{{$ecgparticipant->getoriginal()['id']}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" >
</div>
<div class="modal-body">
<form id="ecgreviewform" class="ecgreview" action="{{ route('ecg.reviewstore') }}" method="POST">
#csrf
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="tesdt" id="exampleInputEmail1" aria-describedby="emailHelp" value="{{auth()->user()->name}}">
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-6">
<button type="button" style = "width:50%;" class="btn btn-primary btn-outline-blue btn-close-modal" data-dismiss="modal">Cancel</button>
</div>
<input type="hidden" name="participant_id" value="{{$ecgparticipant->getoriginal()['id']}}">
<div class="col-md-6">
</div>
</div>
<button type="submit" form="ecgreviewform" style = "width:50%;" name="submit" value="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
Route page
Route::get('ecg/pendingreview', 'EcgReviewController#index')->name('ecg.pendingreview');
Route::post('ecg/pendingreview', 'EcgReviewController#store')->name('ecg.reviewstore');
is there any reason
assign in your form 'method' like this:
<form method="post">
#csrf <!-- {{ csrf_field() }} -->
</form>
try with
{{ csrf_field() }}

How we fetch data on Bootstrap modal box using Laravel MySQL

I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach

my php variable is reset after open bootstrap modal

on my screen, you can see number : 24,26,33 this is the id_user when i click on "Ajouter Mission", the id are set to 24, instead of 26,33. (24 is the id to auth admin), why the id change to the authentified user when i click on modal button ?
dont comment my indian quality front end, i'll do it later :)
and there is my html :
Sorry, i paste everythig because i have no idea where this problem come from.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
#csrf
You are in home as Admin !
#if(Session::has('succes'))
<div class="alert alert-success">
{{ Session::get('succes')}}
</div>
#endif
</br>
Liste des Utilisateurs
<table class="table table-sstriped card-body">
<thead>
<tr>
<th>Numero Matricule</th>
<th>Nom</th>
<th>Prenom</th>
<th>Rue</th>
<th>Code Postal</th>
<th>Ville</th>
<th>Adresse mail</th>
</tr>
</thead>
<tbody>
#foreach($users as $resp)
<tr>
<td>{{$resp->MATRICULE}}</td>
<td>{{$resp->NOM}}</td>
<td>{{$resp->PRENOM}}</td>
<td>{{$resp->RUE}}</td>
<td>{{$resp->CP}}</td>
<td>{{$resp->VILLE}}</td>
<td>{{$resp->email}}</td>
<td>{{$resp->ID_PERSONNELS}}</td>
<td>
#if($resp->id_role==1)
<form action="{{action('UserController#destroy', $resp['ID_PERSONNELS'])}}" method="post">
#csrf
<input name="_method" type="hidden" value="DELETE">
<button class="btn btn-danger" type="submit">Supprimer</button>
</form>
</td>
#endif
<td>
#if($resp->id_role ==1)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Ajouter Mission{{$resp->ID_PERSONNELS}}
</button>
#else
No Way, it is Admin
#endif
<!-- Modal -->
<div class="modal fade" data-id="$resp->ID_PERSONNELS" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ajouter une Mission a {{$resp->ID_PERSONNELS}}{{$resp->NOM}}{{$resp->email}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{route('addmission',26)}}" method="post">
#csrf
<div class="modal-body justify-content-center">
<!----------------------------------Body---------------------------------------------->
<label for="NOM" class="col-md-4 col-form-label text-md-center">{{ __('NOM') }}</label>
<div class="col-md-6">
<input id="NOM" type="text" class="form-control #error('NOM') is-invalid #enderror" name="NOM" required autocomplete="NOM" autofocus> #error('NOM')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span> #enderror
</div>
<label for="DATE_MISSION" class="col-md-4 col-form-label text-md-center">{{ __('DATE_MISSION') }}</label>
<div class="col-md-6">
<input id="DATE_MISSION" type="date" class="form-control #error('DATE_MISSION') is-invalid #enderror" name="DATE_MISSION" required autocomplete="DATE_MISSION" autofocus> #error('DATE_MISSION')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span> #enderror
</div>
<!-- <label class="col-md-4 col-form-label text-md-center" for="ID_PRATICIEN">{{ __('PRATICIEN') }}</label> -->
<!-- <select class="custom-select col-md-4 col-form-label text-md-center" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select> -->
<!--------------------------------End----Body------------------------------------>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Ajouter Mission</button>
</form>
</div>
</div>
</div>
</td>
</tr>
</tbody> #endforeach
</div>
</table>
</div>
</div>
</div>
</div>
</div>
#endsection #csrf
store controller :
public function store(Request $request, $id){
$miss = User::find($id);
$mission = new Mission;
$mission->NOM =$request->input('NOM');
$mission->ID_PERSONNELS = $miss->ID_PERSONNELS;
$mission->ID_NOTE_DE_FRAIS = 1;
$mission->DATE_MISSION = $request->input('DATE_MISSION');
$mission->save();
return redirect()->action('AdminController#index')->with('succes', 'Mission Ajoutée');
}
and to be sure, the controller for table :
public function index()
{
$id=auth()->id();
$users = User::all();
return view('homeAdmin')->with('users', $users);
}
thx for help :)
You should be using something like AngularJS for this sort of stuff.
However, I believe your issue is that all your generated modals share the same ID, causing the same one to be opened by all the buttons.
Try making the ID of the modal something like MODAL-{{ ID_HERE }} and remember to set the data-target of the button to MODAL-{{ ID_HERE }}
Do this to your button:
data-target=“#MODAL-{{ $resp->id }}”
And to your modal:
id=“MODAL-{{ $resp->id }}”
I don't know what your database structure looks like but use something unique to each row to implement this, e.g. $resp->id
Honestly though, use something like AngularJS, you wouldn’t then have to programmatically generate a modal for all of the entries, you could just fetch the data on page load, ng-repeat them all in however you want and then have a singular modal that refers to the one they clicked, look into it.

Using a modal as template to edit/delete

I have some rows shown in a table (each one is a row of the related model database table). For each row I show a button that shows a modal asking for confirmation to delete it.
[https://i.stack.imgur.com/tSquD.png][1]
[https://i.stack.imgur.com/gGhSO.png][2]
The modal code is a blade template.
For a table with a single row, i have no problem. I can pass the id as variable to the modal. But i dont know how to send the selected one (logically, its including the modal with the last value of the $subnet var).
What would be the correct way to achieve this?
...
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
#endforeach
#include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...
<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="/subnets/{{$subnet->id}}" method="POST">
#csrf
#method('DELETE')
<p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<span class="pull-right">
<input class="btn btn-primary" type="submit" value="Delete">
</span>
</form>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/tSquD.png
[2]: https://i.stack.imgur.com/gGhSO.png
In your form add a bind id
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}">Edit</button>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}" data-toggle="modal" data-target="#deleteSubnet">Delete</button>
</td>
</tr>
#endforeach
Add a "id" in your form to get in jquery. <form method="POST id="formId">
$(document).ready(function () {
// you can add a better validation to button like a ID or class
$("button").each(function () {
$(this).onClick(function () {
var action = "/subnets/" + $(this).data().id;
$("#formId").attr("action", action);
});
});
});
You might wanna check this section on Bootstrap's website.
In your case this could be translated to:
Add data-id="{{ $subnet->id }}" to your button.
<button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet" data-id="{{ $subnet->id }}">Delete</button>
Add this jQuery snippet.
$('#deleteSubnet').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('form').attr('action', '/subnets/' + id)
})
Without any javascript workarounds:
<button ... data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
....
<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
....
</div>
Should work fine
<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
×
</button>
<h4 class="modal-title" ng-show="newType">Employee - New</h4>
<h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
</div>
<form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
<div class="modal-body">
<p>
<div ng-repeat="error in errors">
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">× </button>
<i class="fa fa-times-circle"></i>
{{error}}
</div>
</div>
</p>
<div class="row">
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
<label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
<p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
<label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
<p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
<label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
<p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save
</button>
<button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save Changes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete this User?</p>
</div>
<div class="modal-footer">
<button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
<i class="fa fa-trash-o"></i>
Delete
</button>
<button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
<i class="fa clip-close-3"></i>
Close
</button>
</div>
</div>
</div>
</div>

Validation errors are appearing in the same page on different divs

I have a page that has a form with a select menu and if there are some validation errors in that form the validation errors are shown using "#include('includes.errors')". But in this same page I have a button that when the user clicks in it it shows a modal where the user can introduce a subject, a message to send an email. In this modal I also have "#include('includes.errors')".
Issue: So the issue is that if there are validation errors in the form in the modal because the subject or messare were not filled by the user that errors appear on the modal but also on the same page above the form that has the select menu. Also if there are some validation errors in the form that has the select menu and the user opens the modal that validation erros also appear in the modal.
Do you know how to fix the issue?
Form with select menu:
#include('includes.errors')
<div class="card">
<div class="card_body">
<form method="post"
action="{{route('conferences.storeQuantities', ['id' => $confernece->id, 'slug' => $conference->slug])}}">
<ul class="list-group list-group-flush">
{{ csrf_field() }}
#foreach($registration_types as $rtype)
<li>
<span>{{$rtype->name}}</span>
<select id="rtype_{{ $rtype->id }}" data-price="{{ $rtype->price }}"
name="rtypes[{{ $rtype->name }}]">
<option value="">0</option>
#for ($i = $rtype->min_participants; $i <= $rtype-> max_participants; $i++)
<option value="{{ $i }}">{{ $i }}</option>
#endfor
</select>
<span>X {{$rtype->presentPrice()}}€</span>
</li>
#endforeach
</ul>
</form>
</div>
</div>
Modal:
<div class="modal fade bd-example-modal-lg" id="contactOrganizer" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contact Organizer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
#include('includes.errors')
#if($flash = session('email_sent'))
<div class="alert alert-success" role="alert">
<strong><i class="fa fa-check-circle" aria-hidden="true"></i></strong>
{{ $flash }}
</div>
#endif
<form method="post"
action="{{route('users.contactOrganizer', ['conference_id' => $conference->id])}}"
enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" value="{{ old('subject') }}"
name="subject"
id="subject">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" value="{{ old('message') }}"
name="message" rows="3"></textarea>
</div>
<input type="submit" class="btn btn-primary btn" value="Send"/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery to show the moda if there are validation errors in the contact organizer form:
$(window).on('load', function () {
#if ($errors->any())
$('#contactOrganizer').trigger('click');
#endif
#if(session('email_sent'))
$('#contactOrganizer').trigger('click');
#endif
});
The errors.blade.php file:
#if ($errors->any())
<div class="alert alert-danger mt-3">
<ul>
#foreach ($errors->all() as $error)
<li class="text-danger"><strong><i class="fa fa-times" aria-hidden="true"></i></strong> {{ $error }}</li>
#endforeach
</ul>
</div>
#endif
You can acheave what you want using the named message bag like this :
In the controller you have to name your errors like this :
function storeQuantities(){ //assuming this is your controller function
$validator = Validator::make($request->all(), [
// your validation rules here :)
]);
if ($validator->fails())
{
return redirect()->back()->withErrors($validator, 'conferneceErrors');
}
}
Use the same thing for the other function :
function contactOrganizer(){ //assuming this is your controller function
$validator = Validator::make($request->all(), [
// your validation rules here :)
]);
if ($validator->fails())
{
return redirect()->back()->withErrors($validator, 'contactErrors');
}
}
In the view you can do this :
#include('includes.errors', ['errors' => $errors->conferneceErrors])
For the modal :
#include('includes.errors', ['errors' => $errors->contactErrors])

Categories