I make button on index.php file and want call modal in another page, because when modal in same file and i refresh the page modal seen temporarily.
index.php
<a href="modal.php" data-target="#cancel{{ $form->id }}" class='btn btn-danger btn-sm' data-toggle="modal">Cancel</button>
modal.php
#foreach($list_form as $form)
<div class="modal fade" id="cancel{{ $form->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header" style="background-color: red;">
<h3 class="modal-title h3" id="exampleModalSmLabel" style="color: white;"><b>Cancel Description</b>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><h1><b>×</b></h1></span>
</button>
</h3>
</div>
<div class="modal-body">
#if(auth()->user()->role == 'Admin')
<form action="{{ route('form001.cancel', $form->id) }}" method='post'>
#csrf
<div class="form-group">
<label for="cancel_deskripsi">Alasan Cancel</label>
<textarea class="form-control" id="cancel_deskripsi" name="cancel_deskripsi" placeholder="tuliskan alasan anda..."></textarea>
</div>
<div class="modal-footer">
<button type='submit' class='btn btn-danger btn-sm'>Submit</button>
</div>
</form>
#endif
{{ $form->cancel_deskripsi }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Am I doing writing anything wrong?
Related
I have 3 components in my vue js
create.vue
list-user.vue
modal-role.vue
in my create.vue i call the 2 other component,
<template>
<div>
<modal-role></modal-role>
<list-user></list-user>
</div>
</template
these 2 components are all modal
modal-role.vue
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRole">
add members
</button>
<!-- Modal -->
<div class="modal fade" id="modalRole" tabindex="-1" aria-labelledby="modalRoleLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalRoleLabel">Role</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li #click="selectRole(item)" data-bs-toggle="modal" data-bs-target="#modalUser" data-bs-dismiss="modal" class="list-group-item list-group-item-action" v-for="item in roles" :key="item.id"> {{ item.name }} </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</template>
list-user.vue
<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
<div class="modal-dialog" v-if="role">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalUserLabel">Choose members as {{ role.name }} </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" #click="dismiss()"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li
class="list-group-item list-group-item-action"
v-for="item in users" :key="item.id"
>
{{ item.name + ' ' + item.surname}}
</li>
</ul>
<div class="row justify-content-center" v-if="!isLast">
<button class="btn btn-primary" #click="loadMore()">
View more
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" #click="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" #click="choose()" data-bs-dismiss="modal">Choose</button>
</div>
</div>
</div>
</div>
So in my create.vue when i have button from my modal-vue to show a modal with list of role,
in my modal-role.vue what i expected is when i select one role, it dismiss the modal on modal-role.vue and show a new modal that is in list-user.role but I got an error:
app.js:14656 Uncaught TypeError: Illegal invocation
at Object.findOne (app.js:14656:44)
at Modal._showElement (app.js:16567:38)
at app.js:16490:35
at execute (app.js:13914:5)
at app.js:16196:7
at execute (app.js:13914:5)
at HTMLDivElement.handler (app.js:13937:5)
and if tried to put the modal in list-user.vue to modal-role.vue, it work but if the second modal dismiss but i still have the overlay background from one of these 2 modals
EDIT
When i show the first modal, got 2 modal backdrop in my element.
I got the problem here, i put a v-if in my modal-dialog div in my list-user.vue, so my modal have no div dialog in mounted then modal bootstrap can't call it to show, so i move my if statement in my modal-content and it work well
The modal gets data from the #foreach and displays them. And from the form it posts the data entered to the next POST route {{ route('user.give') }}. However, it keeps trying to perform a GET request to a different route(precisely the route just above it). Please help, thank you for helping
#section('content')
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
#if(count($orgs) > 0)
#foreach($orgs as $org)
<div class="card m-1 col-md-3 p-0">
<img class="card-img-top" src="{{ asset('storage/'.$org->logo) }}" alt="{{ $org->name }} logo" />
<div class="card-body">
<span class="card-title"><strong><i class="fa fa-church"></i> {{ $org->name }}</strong></span>
<div class="small"><i class="fa fa-exchange-alt"></i> {{ $org->alias }}</div>
<p class="card-text"></p>
<button class="btn btn-outline-primary rounded-0" data-toggle="modal" data-target="#exampleModalCenter">
<i class="fa fa-credit-card"></i>
Give
</button>
<i class="fa fa-cogs"></i>
</div>
</div>
#endforeach
#else
<p>Sorry, there's no match for your search.</p>
#endif
and right below is the modal. It is actually continuation of the code above. The modal actually comes up, the issue only occurs at the point of posting
<!-- form modal -->
<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="exampleModalCenterTitle">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<cite>You are about to give to {{ $org->name }}</cite>
<!-- form -->
<form method="POST" action="{{ route('user.give') }}">
#csrf
<input type="hidden" name="organisation_name" value="{{ $org->name }}">
<input type="hidden" name="organisation_id" value="{{ $org->id }}">
<input type="hidden" name="organisation_email" value="{{ $org->email }}">
<input type="hidden" name="organisation_logo" value="{{ $org->logo }}">
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" class="form-control rounded-0" name="amount" aria-describedby="amount" placeholder="e.g 5000" required>
</div>
<div class="form-group">
<label for="purpose">Purpose</label>
<input type="text" class="form-control rounded-0" name="purpose" placeholder="e.g tithe">
</div>
<button type="submit" class="btn btn-outline border-dark text-dark rounded-0" id="proceed">
Proceed
</button>
</form>
<!-- //form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline border-dark text-dark rounded-0" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<!-- //form modal -->
#endsection
Here are my routes
Route::middleware('auth')->group(function (){
Route::post('/user/search', 'HomeController#search')->name('user.search');
Route::post('/user/give/', 'HomeController#give')->name('user.give');
Route::get('/user/verify/{reference}', 'HomeController#verify')->name('user.verify');
It visits user.search instead of user.give and it does that with a GET
$org is not what you want in your modal: it is the last $org from your loop over your $orgs array since it is not inside the #foreach loop.
You need to generate your modal dynamically (through javaScript or other) when you click the button showing the modal.
Found it. Apparently I added a validation rule that was failing when the form was submitted. Since the validation error could not be sent to the modal it was performing a GET.
Breathing fresh air now. Thanks for your support y’all
I am trying to open multiple modals on a single page but their ids are conflicting with each other. I got this code from bootstrap-4 documentation,
Modal 1 is works fine but modal 2 fails to work, I wants that both of them to work separately
code:
modal1
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Add New
</button>
<!-- Modal Add Owner -->
<div class="modal fade" 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">Add Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.store') }}">
#csrf
<div class="form-group">
<label for="">Add Owner Name</label>
<input type="text" name="owner_name" class="form-control" id="" placeholder="Owner Name">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
modal2:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Show
</button>
<!-- Modal Show Owner-->
<div class="modal fade" id="exampleModalshow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">View Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.update', $owner->id) }}">
#csrf
#method('PATCH')
<div class="form-group">
<label for="">Owner Name</label>
<input type="text" name="owner_name" class="form-control" value="{{ $owner->owner_name }}">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Change data-target on the second modal button to match the modal id
<button data-target="#exampleModalshow">
... rest of the code
</button>
I need to capture the id from the iteration, but it seems to capture the last id which it's seems to be obviously,
Am using bootstrap modal which i even don't know how they code their jQuerys'.
Thus how can i do to make this button not capturing the last id?
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#applications_{{$user->id}}" id="#applications_{{$user->id}}">View applications</button>
<!-- Modal -->
<div class="modal fade" id="applications_{{$user->id}}" role="dialog" >
<div class="modal-dialog" >
<!-- Modal content-->
<div class="modal-content" style="width: 600px !important;">
<div class="modal-header">
{{-- <button type="button" class="close" data-dismiss="modal">×</button> --}}
<h4 class="modal-title">Applications</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<table class="table table-hover">
<tr>
<th>Company name</th>
<th>Location</th>
<th>Program</th>
<th>Application</th>
<th>Actions</th>
</tr>
#foreach($user->post as $form)
<tr>
<td>{{$form->pivot->company_name}}</td>
<td></td>
<td>{{$form->pivot->id}}</td>
<td>
/* this button is only capturing the last id from iteration */
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#application_{{$form->pivot->id}}" >View {{$form->pivot->file}}</button> </td>
<td></td>
</tr>
#endforeach
{{$user->name}}
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="application_{{$form->pivot->id}}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Application</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<div class="center image">
<img src="/storage/file/{{$form->pivot->file}}" class="img-round" alt="User Image">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Expected to retrieve an image from it's respectively post, but it only works with the last id, no errors.
Your second modal is outside the foreach, then id="application_{{$form->pivot->id}}" only works with the last value it took in the loop. To do it with a blade, you can redo the loop and create a modal for each id and image:
<!-- 2nd Modal -->
#foreach($user->post as $form)
<div class="modal fade" id="application_{{$form->pivot->id}}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Application</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<div class="center image">
<img src="/storage/file/{{$form->pivot->file}}" class="img-round" alt="User Image">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
I am trying to create a user manager in Laravel, I have implemented methods for editing and deleting registered users in my database, but when I try to delete a selected user, it picks up the id of the logged in user, thus excluding the logged in user account.
Function Destroy from Admin Controller
public function destroy($id)
{
$user = User::find($id);
$user->delete($id);
}
View from Admin index
#extends('layouts.sidebar')
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="panel-heading">
<h2>Gerenciamento de usuários</h2>
<div class="panel-body">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#insertUser">
Adicionar Usuário
</button>
<!-- Modal -->
<div class="modal fade" id="insertUser" 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">Cadastro de usuários</h4>
</div>
<div class="modal-body">
<form class="" action="{{ url('/admin/criausuario')}}" method="post">
{{ csrf_field() }}
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Nome Completo" name="nome"></br>
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="email"></br>
<label for="senha">Senha</label>
<input type="password" class="form-control" id="senha" placeholder="Senha" name="senha"></br>
<label for="tipo">Tipo</label>
<select class="form-control">
<option value="0">Usuário</option>
<option value="1">Administrador</option>
</select>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-default">Cadastrar</button>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<tr>
<th>Avatar</th>
<th>ID</th>
<th>Nome</th>
<th>Email</th>
<th>Ações</th>
</tr>
<tr>
#foreach($users as $user)
<td> <img src="{{$user->avatar}}" alt="" style="width: 75px; border-radius: 50%;"> </td>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td><i class="glyphicon glyphicon-edit"></i>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmacao">
<i class="glyphicon glyphicon-remove"></i>
</button></td>
</tr>
<div class="modal fade" id="confirmacao" 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">Confirmação</h4>
</div>
<div class="modal-body">
Você tem certeza que deseja excluir o usuário selecionado?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-danger">Excluir</button>
</div>
</div>
</div>
</div>
#endforeach
</table>
</div>
</div>
</div>
</div>
{{ $users->links()}}
#endsection
Route
Route::get('/admin', 'AdminController#index')->middleware('admin');
Route::get('/admin/editar/{id}', 'AdminController#edit')->middleware('admin');
Route::post('/admin/editar/{id}', 'AdminController#update')->middleware('admin');
Route::post('/admin/criausuario/', 'AdminController#store');
Route::get('/admin/deletar/{id}', 'AdminController#destroy')->name("user::deleteGet")->middleware('admin');
Any suggestion?