When I open a modal, then click the submit (to send ajax post request for instance) and if I close the modal, reopen it again and re-submit it send 2 times the request (event with e.preventDefault() )
I don't understand what is wrong
<div class="modal fade bd-example-modal-lg" id="modalA" tabindex="-1" role="dialog"
aria-labelledby="modalChangeTypeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body d-flex justify-content-center">
<select name="nameA" id="idA" class="form-control" required>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="btnChangeStatusA" class="btn btn-primary">ChangeA</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#btnA").click(function () {
$("#modalA").modal();
$("#btnChangeStatusA").click('input', function (f) {
f.preventDefault()
alert('ok')
})
})
})
</script>
https://jsfiddle.net/e0tah93b/
it seems to be stacking the calls when you click on #btnA, try doing this instead:
$(document).ready(function () {
$("#btnA").click(function () {
$("#modalA").modal();
})
$("#btnChangeStatusA").click('input', function (f) {
f.preventDefault()
alert('ok')
})
})
Related
I am trying to open a modal in my Vue Template using boostrap. but whenever I try using jquery on it, modal is not appearing.
Here is my code:
<template>
<div id="app_religion">
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button> -->
<button type="button" class="btn btn-primary" #click="showModal()">
Open
</button>
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
showModal() {
console.log("test")
$('#exampleModal').modal('show');
},
},
}
</script>
I am really new in using Vue, can anyone guide me on how to solve my problem. I am really lost on trying to figure it out.
This can be easily implemented through plain js
Start by assigning a unique id to your modal
<div class="modal fade" id="uniqueId" tabindex="-1" role="dialog" aria-labelledby="uniqueIdlLabel" aria-hidden="true">
import Modal from bootstrap
import { Modal } from "bootstrap";
Declare a variable that will serve as your proxy to your modal, declared as uniqueModal below, Assign the variable the DOM element retrieved by uniqueId, use the inbuilt functions provided by bootstrap to manipulate the modal. Documentation
export default {
name:"randomName",
data(){
return {uniqueModal:null}
},
methods:
{
showUniqueModal() {
this.uniqueModal = new Modal(document.getElementById("uniqueId"),{ keyboard: false });
this.uniqueModal.show();
},
closeUniqueModal() {
this.uniqueModal.hide();
},
},
}
Why trying to do it with jQuery when you can make it with vue ?
use v-if or v-show on your modal (check the difference between the two and take the one who fits better the result you want)
https://v2.vuejs.org/v2/guide/conditional.html
Didn't tested it, i wrote it on the fly, but something like this should work.
<template>
<div>
<button type="button" class="btn btn-primary" #click="showModal">
Open
</button>
<div class="modal" v-if="modalOpen">
<p>Hello World</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalOpen: false
}
},
methods: {
showModal() {
this.modalOpen = true;
}
}
}
</script>
I'm using Fortify to manage users authentication and I have a modal form for the login. My problem is every time I submit the form I can't see any errors because the page refreshes and closes the modal with the login form.
I would like to know if this validation is possible in the frontend without refreshing the page so the modal won't close. I've tried with Ajax but I can't find the right way to manage this or even in which controller I'm supposed to handle the if statement for the response.
I'll be really thankful if anyone could help me.
Here's my modal:
<!-- LOGIN Modal -->
<form action="{{ route('login') }}" method="post">
#csrf
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" >
<div class="modal-content">
<div class="modal-header">
<h5>Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="mb-3 row">
<div class="col-sm"><br>
<input type="text" class="form-control" name="email" value="Email">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm">
<input type="password" class="form-control" id="inputPassword" name="password" value="Password">
</div>
</div>
<div class="d-grid gap-2">
<button type="submit" id="btn-login" class="btn btn-login">Continuar</button>
</div>
</div>
<div class="modal-footer">
<label><u>Recuperar password</u></label>
</div>
</div>
</div>
</div>
</form>
And here's the Ajax:
$(document).ready(function() {
$("#btn-login").click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val();
var email = $("input[name='email']").val();
var password = $("input[name='password']").val();
$.ajax({
url: config.routes.zone,
type: 'POST',
data: { _token: _token, email: email, password:password },
success: function(data) {
if ($.isEmptyObject(data.error)) {
window.location.href = {{ route('login') }};
} else {
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg(msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display', 'block');
$.each(msg, function(key, value) {
$(".print-error-msg").find("ul").append('<li>' + value + '</li>');
});
}
});
I'm looking for a solution on my problem. I'm using bootstrap4 on laravel project. I have a modal that has a button which close it self and open a new modal. This is the code:
$("#newAddressBtn").on('click', function () {
$('#modalAddressees').modal('hide')
$('#modalAddressees').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#modalNewAddress').modal('show');
})
});
Inside this new modal (modalNewAddress) I have a button that dismiss it. But when I dismiss it, I would to destroy it self because if I need to re-open it again, I would to start with empty data inside (such us the first show).
I wrote this code but nothing happens:
[....]
.on('core.form.valid', function () {
$.ajax({
url: "{{ route("addresses.store") }}",
headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')},
dataType: "JSON",
data: $("#addressForm").serialize(),
type: "POST",
success: function (data) {
destroyModal("#modalNewAddress");
},
error: function (data) {
console.log('error ' + data);
}
});
});
[....]
function destroyModal(modal){
$(modal).modal('dispose');
}
This is the code of the modal:
<div class="modal fade" tabindex="-1" role="dialog" id="modalNewAddress">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Address</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" id="addressForm" action="{{ route("addresses.store") }}" class="needs-validation" novalidate="">
{{ csrf_field() }}
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="name" id="name" value="" placeholder="Name" required="">
</div>
</div>
<span class="float-right">
<button type="submit" id="save" class="btn btn-primary">Save</button>
</span>
<input type="hidden" name="ajax">
</form>
</div>
<div class="modal-footer bg-whitesmoke br">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How can I solve the problem? Could you please help me?
You're not supposed to destroy the modal but recycle it.
The usage pattern would be as follows:
the modal does not contain data, but data fields you can reach with jQuery, such as:
<div id="adress-nome"></div>
<!-- more fields ... -->
before you open the modal, you populate it with a function, such as:
function updateModal(data)
{
$("#address-nome").val(data.nome);
// more data ...
}
function openModal(data)
{
updateModal(data);
$("#address-modal").modal("show");
}
when you're done with the modal, just hide it
when you re-open it, it will contain the new data
I am trying to bind action to component method, to the button which is sent via ajax response (json).
So far I have two Vue components - Service and Modal.
Service:
<template>
<div>
<h1>Services ({{ services.length }})</h1>
<div class="services-actions">
<button type="button" class="btn btn-primary" #click="openModal">Add Service</button>
</div>
<div class="services" v-for="(service, index) in services" :key="service.id">
<p>{{ service.name }}</p>
</div>
</div>
</template>
<script>
export default {
data(){
return {
services: []
}
},
methods: {
getAll(){
axios.get('/admin/services/all', {})
.then((response) => {
this.services = response.data
})
},
openModal(){
axios.get('/admin/services/create', {})
.then((response) => {
Event.$emit('modal:show', response.data)
})
},
save(){
console.log('test');
}
},
mounted(){
this.getAll()
}
}
</script>
Modal:
<template>
<div class="modal fade" tabindex="-1" role="dialog" id="main-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
<script>
export default {
mounted(){
let mainModal = $('#main-modal')
Event.$on('modal:show', (html) => {
mainModal.find('.modal-content').html(html)
mainModal.modal('show')
})
Event.$on('modal:hide', () => {
mainModal.modal('hide')
})
}
}
</script>
View file:
<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">Modal title</h4>
</div>
<form id=service-store action='/admin/service/store'>
<label for="name">Name</label>
<input type="text" name=name id=name>
</form>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Is it possible bind save changes to the Service component save method when I click the Save changes button?
I have a Ajax function like this:
function generate_summary() {
var summary_input=document.getElementById('summary_input').value;
var email_notify=document.getElementById('email_notify').value;
var num_sent=document.getElementById('num_sent').value;
$.ajax({
type: "GET",
url: "/summary/",
data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
success: function(data){
$('#modal-body').html(data)
}
});
}
I have href like this:
<a onclick="generate_summary()" href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal">Summarize</a>
Modal looks like this:
<!-- Summary output popup -->
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Summary</h3>
</div>
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Modal is a popup when summarize button is clicked.
The output from the server is placed on:
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5">{{ summary }}</textarea>
</div>
Ajax function, modal everything is working fine. But the modal is load so quickly and the function only returns the value after 10-15 secs. I want to show the popup modal and the summary at the same time. How can I do that?
to use jquery dialog you will have to reference jquery.ui js and css files in your project.
first make the summaryModal a jquery dialog:
$("#summaryModal").dialog({ autoOpen: false, buttons:
{
"Save": function () {
if (!confirm("Do you want to save the changes?")) {
return;
}
//Add your logic to save.
$("#summaryModal").dialog('close');
},
"Cancel": function () {
$("#summaryModal").dialog('close');
}
}
});
After that when you click the summarize_btn make the ajax call and load the content in the dialog:
$("#summarize_btn").click(function () {
$.ajax({
type: "GET",
url: "/Home/About",
success: function (data) {
$("#summaryModal").dialog("option", "height", 500);
$("#summaryModal").dialog("option", "width", 500);
$("#summaryModal").dialog("option", "title", 'Modal Title');
$("#summaryModal").dialog("option", "modal", true);
$("#summaryModal").dialog('open');
$('#summaryModal').html(data);
}
});
});
the summaryModal div will look like:
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>