how to show different bootstrap modals on a single page - laravel

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>

Related

What are the possible reasons why modal doesn't shows?

I have two button for modal and created two modal included in my blade file which I'm trying to use but it doesn't seem to work, I tried deleting the other button but doesn't seem to work, which I assumed to be the case
What could have been the reason for the modals not to show up?
this is my button modals
<td class="table-danger"><button id="aaaBtn" class="soldbtn btn-warning" data-toggle="modal" data-target="#soldModal{{$data->id}}">SOLD</button></td>
<td class="table-warning"><button id="bbbBtn" class="updatebtn btn-success" data-toggle="modal" data-target="#updateModal{{$data->id}}" >UPDATE</button></td>
<!-- Modal -->
<div class="modal fade" id="updateModal{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{$data->id}}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<img src="assets/images/rice.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="col-lg-12">
<div class="contact-form">
<form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-lg-12 col-sm-12" align="center">
<h3>{{$data->title}}</h3>
<img height="200" width="200" src="productimage/{{$data->image}}">
<h5 class='m-2'>~ KILOS ~</h5>
</div>
</div>
<div class="row col-12">
#foreach($modal_data as $modal_data)
<div class="row sm-6 ml-4 mb-1" class="no-gutters" style="height:25px; width: auto;">
<p class='text-dark mr-2'><input type="checkbox" name="prod_kilos[]" value="{{$modal_data->kg}}" id="checkitem" class="check-cls"/> {{$modal_data->kg}}kg </p>
<p class='text-dark'>Qty:</p><input style="width:80px; height:25px;" type="number" name="prod_qty[{{$modal_data->kg}}]" min="1" value="1" max="{{$modal_data->warehouse_qty}}" class="form-control ml-2">
<input type="hidden" name="product_name[{{$modal_data->kg}}]" value="{{$modal_data->title}}">
<input type="hidden" name="product_fee[{{$modal_data->kg}}]" value="{{$modal_data->price}}">
<input type="hidden" name="prod_id[{{$modal_data->kg}}]" value="{{$modal_data->id}}">
</div>
#endforeach
</div>
<div class=" col-lg-12 mt-5">
<button name="submit" type="submit" id="form-submit" class="submit-btn" >ADD TO CART</button>
</div>
</form>
</div>
</div>
<script>
</div>
</div>
</div>
<!-- End Modal -->
What is the problem?
I think the reason why it is not working is because you set wrong data-target to the button:
<button data-target="#updateModal">UPDATE</button>
But when creating modal you use:
<!-- Modal -->
<div id="updateModalModal{{$data->id}}">
</div>
<!-- End Modal -->
Your data-target attributes does not correspond with each other.
How to solve?
The data-target attribute should point to an existing element in page, changing it to:
<button data-target="#updateModal{{$data->id}}">UPDATE</button>
<!-- Modal -->
<div id="updateModal{{$data->id}}">
</div>
<!-- End Modal -->
should solve the problem.
Hope it helps. Read more about it here.

Modal form not send data to spring boot controller

I have a view made with bootstrap modal, but this form not send data to my controller. When print data from console I have only null values. My view is following:
modal-form
My code in the frontend is:
<!-- new modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<form th:action="#{/creconocida/addNew}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="exampleModalLabel">Nueva
Comunidad Reconocida</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="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Código
único</span>
</div>
<input type="text" class="form-control" id="codigo"
name="codigoN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Nombre</span>
</div>
<input type="text" class="form-control" id="nombre"
name="nombreN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Número
familias</span>
</div>
<input type="number" class="form-control" id="numero"
name="numeroN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Nacionalidad</label>
</div>
<select class="custom-select" id="nacionalidad"
name="nacionalidadN">
<option selected>Seleccione...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-primary mr-auto">Guardar</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</form>
</div>
Add new method in controller
#PostMapping("/addNew")
public String addNew(ComunidadReconocida creconocida) {
System.out.println("Guardando comunidad "+creconocida.getNam_m());//get only null values
asentamientoService.addNew(creconocida);
return "redirect:/creconocida/listar";
}
I can create a new entity but I can't send the values ​​entered in the form. How could I do to capture the values ​​and pass them to the controller
Your problem is you are not indicates to Spring that you want a '#RequestParam'.
public String addNew(#RequestParam ComunidadReconocida creconocida)

Cannot call modal in another page

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?

How do I solve the modal update issues in Laravel?

I have a modal in which I want to update my Question but the modal keeps updating the same question so can someone help me because my modal keeps taking the same $id even if I click on different entries.
This is my QuestionController
public function update($questionId)
{
$this->validate(request(),[
'label' => 'required',
]);
$data = request()->all();
$question = Question::find($questionId);
$question->label = $data['label'];
$question->save();
return redirect('/question');
}
this is my Modal in the blade.php file
<!-- Modal Edit -->
<div class="modal" id="editMcqModal" tabindex="-1" role="dialog"
aria-labelledby="editMcqModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredLabel">Edit Question</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="" action="/question/{{$question->id}}" method="post">
#csrf
#method('PATCH')
<div class="form-group">
<textarea name="label" class="form-control" placeholder="Please Enter Question" cols="5"
row="15">{{$question->label}}</textarea>
</div>
<div class="form-group">
<button type="submit" name="add" class="btn btn-success float-right">Update
Question</button>
</div>
</form>
</div>
</div>
</div>

How get id from other user in Laravel

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?

Resources