I open a modal if a input element is clicked. The user should choose some data within the modal. On close the chosen data should be displayed in the element that triggered the click-event.
<!-- input elements -->
<div class="wrapper">
<div class="row align-items-center mb-2 mt-2 ms-1 ">
<input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
<input class="form-control" type="text" name="txtNr2[]">
<input class="form-control" type="text" name="txtNr3[]" value="3">
<img src="../img/add-icon.png" alt="Add">
</div>
<div class="row align-items-center mb-2 mt-2 ms-1 ">
<input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
<input class="form-control" type="text" name="txtNr2[]">
<input class="form-control" type="text" name="txtNr3[]" value="3">
</div>
<div class="row align-items-center mb-2 mt-2 ms-1 ">
<input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
<input class="form-control" type="text" name="txtNr2[]">
<input class="form-control" type="text" name="txtNr3[]" value="3">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="divModalBody">
<input type="text" id="txtUserInput">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#wrapper").on('click', '.openmodal', function(e){
$("#modal").modal("show");
$("#btnCloseModal").on('click', function() {
e.target.value = $("#txtUserInput").val();
$(e.target).parent().next().children().val("some other text from the modal");
});
}); </script>
If I am using e.target.value it seems to work at first, but if more elements of the class .example are clicked, the value of all elements that were clicked before, is also changed
You're creating a new "close" event handler every time you show the dialog but you don't remove these when hiding the dialog. As a result, on close, all old handlers are triggered in addition to the current new handler.
There are two options:
Remove the "close" handler when it is triggered:
$("#wrapper").on('click', '.openmodal', function(e){
$("#modal").modal("show");
$("#btnCloseModal").on('click', function() {
$("#btnCloseModel").off('click');
e.target.value = $("#txtUserInput").val();
$(e.target).parent().next().children().val("some other text from the modal");
});
});
Declare the close handler once and pass the needed data by outer variable:
let wrapperTarget;
$("#wrapper").on('click', '.openmodal', function(e){
wrapperTarget = e.target;
$("#modal").modal("show");
});
$("#btnCloseModal").on('click', function() {
wrapperTarget.value = $("#txtUserInput").val();
$(wrapperTarget).parent().next().children().val("some other text from the modal");
});
Related
I have a reusable modal where i call in some places. Every thing work perfect except the bootstap atributs data-bs-backdrop="static" data-bs-keyboard="true".
I want to make this modal static so where user click outside modal does not hoide but he make a small animation by this atribut data-bs-backdrop="static" also when press esc button modal will hide data-bs-keyboard="true".
The problem is the backdrop atribute work only after second call of modal, it mean if i call modal first time the backdrop does not work if i close modal and call again now backdrop work. And keyboard atribute does not work at all in any case
modal
export default {
template: `
<div class="modal fade show" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel"
:class="{ show: value }"
:style="{ display: value ? 'block' : '' }"
aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="true">
<div class="modal-dialog" :class="modalLg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<slot name="modalTitle" />
</h5>
<button #click="closeModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<slot />
</div>
<div v-if="$slots.modalFooterBtn" class="modal-footer">
<button #click.prevent="submit()" type="button" data-bs-dismiss="modal" class="btn btn-primary">
<slot name="modalFooterBtn" />
</button>
</div>
</div>
</div>
</div>
`,
props: [
"value",
"modalLg"
],
methods: {
submit() {
this.$emit("submit_changers");
},
closeModal() {
this.$emit("input", false);
},
},
}
Parent Component
<v-modal v-model="addModalVisibility" #submit_changers="addUser">
<template #modalTitle>
Add User
</template>
<form id="" class="form-horizontal validate-form">
<div class="form-group mb-2">
<input v-model="user_id" id="user_id" type="number" class="form-control" placeholder="user_id">
</div>
<div class="form-group mb-2">
<input v-model="name" id="name" type="text" class="form-control" placeholder="name">
</div>
<div class="form-group mb-2">
<input v-model="email" id="email" type="email" class="form-control" placeholder="email">
</div>
<div class="form-group mb-2">
<input v-model="password" id="password" type="password" class="form-control" placeholder="password">
</div>
</form>
<template #modalFooterBtn>
Save
</template>
</v-modal>
data(){
return {
addModalVisibility: false,
...
showModal() {
this.addModalVisibility = !this.addModalVisibility
},
Can I listen for jquery modal close event from another file?
I created the modal in a different PHP file and when I use the event listener in my modal PHP file it works but when I use it like below it doesn't work.
The modal hide function is called in the CreateUserModal.php. What I want to happen is when a user is created successfully the modal closes and triggers a JS function in the user.php page that gets all the users in the system.
Here is my user.php file
<body>
<div>
<div>
<button class="btn btn-primary btn-md" id="add-user">
<i class="fa fa-plus " aria-hidden="true"></i>
</button>
<div class="modal-container"></div>
</div>
<div id="userTable" style="color:black"></div>
<script>
$('#add-user').click(function(e) {
var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
$('.modal-container').load(url,function(result){
$('#CreateUserModal').modal({show:true});
});
});
$('#CreateUserModal').on('hidden.bs.modal', function() {
console.log('Modal Has been closed');
});
</script>
</div>
</body>
From here when the add-user button is clicked the modal is opened in the modal-container div. The code for that is:
CreateUserModal.php
<link rel="stylesheet" href="../../../styles/pageForms.css">
<div id="CreateUserModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="
background-color: transparent;
border: none;
">
<div class="pageForms-form">
<form id="CreateUser" action="//centralamericanmanagement.000webhostapp.com/pages/CreateUser.php" method="POST">
<h2>Create User</h2>
<hr>
<b style='color:red' id="errors"></b><br>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="FirstName" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="LastName" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="role" name="role">
<option value="">User Type</option>
<option value="2">User</option>
<option value="1">Admin</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg" style="width:100%;" name="submit" value="submit">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#CreateUser").submit(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: '//centralamericanmanagement.000webhostapp.com/phpfiles/CreateUser.php',
data: $("#CreateUser").serialize(),
success: function (data) {
var obj = JSON.parse(data)
if(obj['success'] == 0)
{
$("#errors").html(obj['message']);
}
if(obj['success'] == 1)
{
$('#CreateUserModal').modal('hide');
}
}
});
});
</script
You can use the Event-Listener on every Html-Element. For example your modal container. So you could just change this line:
<div class="modal-container"></div>
and give it an id
<div id="modal-container" class="modal-container"></div>
then you change the listener to
$('#modal-container').on('hidden.bs.modal', function() {
console.log('Modal Has been closed');
});
Also wrap '$(document).ready(function() {}' around the event listener initialization.
The problem is, that at the time the event listener ist created, the modal is probably not part of the page. So jquery can't find it and can't init the event listener.
I have a modal i'm working on that, for whatever reason, will either dismiss upon clicking submit without validating the form field inputs, or it will simply reload the form upon entering and never go away, preventing my webpage from then being seen. My idea is that this will show upon opening the webpage, the user is required to enter information into it, and then proceed to the rest of my webpage unhindered. My modal form code is as follows:
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="formModalLabel">Services Contact Form</h3>
<button type="button" class="close" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="formAwesome">
<div class="modal-body">
<div class="form-group row">
<label for="firstName" class="col-sm-6 col-form-label">
First name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="firstName" placeholder="John" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-6 col-form-label">
Last name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="lastName" placeholder="Doe" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-6 col-form-label">
E-mail address
</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="john.doe#email.com" required>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="awesomeCheck">
<label class="form-check-label" for="awesomeCheck">
Yes, I consent to contact.
</label>
</div>
</div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>
</div>
</div>
</div>
and this is my css:
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
max-width:100%;
padding:3px;
display:none;
}
</style>
finally with this being my ajax query:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</style>
Again, I would like to be able to have my modal form validated upon click submit and then to close without re-opening over and over(which is currently happening). So far I have tried the following:
$('#CompanyProfile').modal('hide');
then:
<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
<i class = "icons-office-52"></i>
</button>
$("#close_btn").trigger("click");
then:
$('#closemodal').click(function() {
$('#modalwindow').modal('hide');
});
and these all either JUST close the modal, or do not allow for the validation process to take place. If what i'm asking is not possible. I'd like to discuss alternatives.
I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...
How to remove them ?
For example here is my modal:
<div [id]="id" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content dash-modal-content">
<div class="modal-header dash-modal-header">
<button type="button" class="close dash-close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD PRODUCT</h4>
</div>
<form (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-xs-7">
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
<div class="col-sm-5">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
</div>
<div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
<label style="font-size: 2em">
<input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span class="checkbox-label-text">Is product active?</span>
</label>
</div>
</div>
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
</div>
</div>
</div><!--End of form horizontal-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of modal body-->
<div class="modal-footer">
<button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
</div>
</form>
</div><!--End of modal content-->
</div>
</div>
<div>
</div>
onSubmit I'm simply saving data to a database:
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
});
}
// $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}
I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...
Thanks guys
Cheers
Try
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
article = {}; // <---- Reset the variable
});
}
}
I am using a Bootstrap modal window for a form. I need to prevent the modal from closing after pressing the submit button. I need to close the modal only after clicking the close button. Please help me.
<!--Login, Signup, Forgot Password Modal -->
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- login modal content -->
<div class="modal-content" id="login-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"><span class="glyphicon glyphicon-lock"></span> Login Now!</h4>
</div>
<div class="modal-body">
<form method="post" id="Login-Form" role="form">
<div class="form-group">
<div class="input-group">
<input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>
</form>
</div>
<div class="modal-footer">
<p>
<a id="FPModal" href="javascript:void(0)">Forgot Password?</a> |
<a id="signupModal" href="javascript:void(0)">Register Here!</a>
</p>
</div>
</div>
Try this code to see if you can prevent the dialog from submit
$( "form" ).submit(function( event ) {
event.preventDefault();
});
And then close it using close button.