my bootstrap 3 modal does not open up in one click everytime, sometimes it does not open up, sometimes it opens up after 2-3 mouse clicks, rarely it opens up in one click.
Basically I have trying to create a modal that will ask whether the user wants to delete it, if yes then send a post request to remove the value from the given database with the provided id in url.
It is a table of courses, all of them having its own delete button, and the id used is of the form id="deleteModal{{ $subtopic->subtopic_id }}"
this is my delete button
<td class="col-1"><a class="btn btn-danger btn-sm"><i class="fas fa-trash" data-toggle="modal" data-target="#deleteModal{{ $subtopic->subtopic_id }}"></i></a></td>
this is my modal
<div class="modal fade" id="deleteModal{{ $subtopic->subtopic_id }}">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Course ?</h4>
</div>
<div class="modal-body">
<div >
<h4>Are you sure!</h4>
<form action="{{ url('superadmin/allcourses/'.$course->course_id.'/'.$topics->topic_id.'/'.$subtopic->subtopic_id ) }}" method="post">
#csrf
{{ method_field('DELETE') }}
<div style="text-align: center;"><button class="btn btn-danger" type="submit"><i class="fas fa-check-double"></i>Yes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
It should always open up in one click, please help me out I can't find any reason why it happens.
You need to change the html as below in the td.
<td class="col-1">
<a class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal{{ $subtopic->subtopic_id }}">
<i class="fas fa-trash">
</i>
</a>
</td>
data-target does not work on <i></i>
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
i have been working on laravel project and i need to delete data from database by showing warning modal message. deleting part deals with controller and working fine.But when passing user id to modal modal is not showing up.
<tbody>
#foreach($userdata as $data)
<tr>
<td>{{ $data->user_id}}</td>
<td>{{ $data->Column2}}</td>
<td>{{ $data->Column3}}</td>
<td>{{ $data->Column4}}</td>
<td><a data-toggle="modal" data-target="#exampleModal{{ $data->user_id }}" class="btn btn-danger">Delete</a>
</td>
</tr>
#endforeach
</tbody>
<div id="exampleModal{{$data->user_id}}" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="align-items: center">Data will be delete.</p>
</div>
<div class="modal-footer">
<form action="" method="POST">
#csrf
#method('delete')
<a type="submit" class="btn btn-danger" href="#">Delete</a>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
I'm building a Thymeleaf+SpringBoot application and I have a moment with Thymeleaf foreach loop where I have a modal inside one div - it repeats few times and I want to update index of a modal and the button which shows it so that my modal will be shown by particular button. I have an issue with updating index because when I do it then my button stop to work and no modal is shown...
I checked:
a) How can I do data-target="#userId" in thymeleaf
b) using data-* attribute with thymeleaf
but still it does not work...
here is part of the code:
The loop:
<div th:each="myth : ${allMyths}">
here is button (commented code also does not work...):
<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal"
data-th-target="'#'+${myth.getId()}">More...
<!--th:attr="data-target='#'+${myth.getId()}">More...-->
</button>
and here is top of the modal:
<div data-th-id="${myth.getId()}" class="modal fade" role="dialog">
here also th:id does not work...
Do you have any idea why button and modal does not find each other by ID?
Thanks in advance for your answers/suggestions!
Piotr
Button:
<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal" th:attr="data-target='#'+${myth.getId()}">More...</button>
Top of the Modal:
<div th:attr="id=${myth.getId()}" class="modal fade" role="dialog">
Here is how it works in my Spring book app + thymeleaf views:
<tbody>
<tr th:each="stockItem,index :${stock}">
<td th:text="${stockItem.id}"></td>
<td th:text="${stockItem.productName}"></td>
<td th:text="${stockItem.productPrice}"></td>
<td th:text="${stockItem.productQuantity}"></td>
<td>
<a class="btn btn-danger" role="button"
th:href="#{/stock/removeAll/{id}(id=${stockItem.id})}">
Remove all
</a>
<br>
<a data-target="#removeSetStockQuantityModal" data-toggle="modal"
th:attrappend="data-target=${stockItem.id}" class="btn btn-danger" role="button">Set Quantity</a>
<!-- Modal -->
<div class="modal fade" id="removeSetStockQuantityModal"
th:attrappend="id=${stockItem.id}" 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">Delete <span
th:text="${stockItem.productName}"></span></h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="get"
th:action="#{/stock/delete}"
th:object="${stockItem}">
<input hidden name="id" th:value="${stockItem.id}"/>
<label th:for="${stockProduct.productQuantity}">
<input type="number"
placeholder="Enter quantity to delete" th:default="0"
th:field="${stockProduct.productQuantity}"/>
</label>
<input type="submit" class="btn btn-danger" value="Delete"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
Im using Spring MVC and AngularJS to build my app and I been looking for a way to pass a table registry data to a modal in order to edit that registry but I haven´t find a working example so, thats my question how can a I pass the registry data to a modal?
This is what I have so far:
Table
<table class="table table-hover table-responsive">
<thead class="table-striped">
<th>Email</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Rol</th>
<th>Acciones</th>
</thead>
<tbody>
<tr data-ng-show="allUsuarios.length === 0">
<td colspan="4" class="warning">No hay registros para mostrar</td>
</tr>
<tr data-ng-repeat="usuarios in allUsuarios">
<td>{{usuarios.email}}</td>
<td>{{usuarios.nombre}}</td>
<td>{{usuarios.apellidos}}</td>
<td>{{usuarios.idRol.tipoRol}}</td>
<td>
<input type="hidden" value="{{usuarios.idUsuario}}"/>
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" data-toggle="modal" data-target="#formModalEliminar"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
And the Modal:
<!--EDIT MODAL-->
<div class="col-lg-12">
<div class="modal fade" id="formModalEditar" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="H2">Editar Usuario</h4>
</div>
<div class="modal-body">
<form role="form" action="add" method="post">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" required=""/>
<label>Nombre</label>
<input class="form-control" type="text" required=""/>
<label>Apellidos</label>
<input class="form-control" type="text" required=""/>
<label>Rol</label>
<br>
<div class="btn-group open">
<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-success">Guardar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--END EDIT MODAL-->
PS: I don´t know why when I press Ctrl+K to format the code, it gets displayed like that, sorry.
First of all you have to define a registery in you angular component
currentRegistery : Registery;
In your table you have to add an onclick on the edit icon of each registery to be able to set the current Registery with the selected registery
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar" onclick=“currentRegistery=usuarios”><i class="glyphicon glyphicon-pencil"></i></button>
Finally on your modal you can deal directly with the currentRegistery object.
I have problem to display confirmation dialog box when I click the delete button it show the confirmation dialog and also submit the form without clicking the button in confirmation dialog box.
I'm using bootstrap and laravel. here is the code.
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this data(s) ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
$('#confirmDelete').on('show.bs.modal', function (e) {
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
{{ Form::open(array('route' => array('subscription.delete.all'), 'method' => 'delete')) }}
<button class='btn btn-xs btn-danger' type='submit' data-toggle="modal" data-target="#confirmDelete">
<i class='glyphicon glyphicon-trash'></i> Delete
</button>
{{ Form::close() }}
on top of your modal add this
<a href="#" type="button" class="btn btn-default btn-danger" data-toggle="modal" data-target="#confirmDelete">
delete
and in your modal code change the button
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
by your delete button code
{{ Form::open(array('route' => array('subscription.delete.all')......
Change button (inside the form) type from "submit" to "button"