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
},
Related
I am building a registration form. It contains a button which opens a Bootstrap 5 modal over the top of the form. I intent to use it to allow the potential user to verify their account ownership.
However, the Modal it doesn't display at all.
Troubleshooting performed so far
I have added a console.log to the openmodal method and it's logging correctly.
I have also attempted to load the modal on mount, however this also did not work.
Code
<template>
<!-- Modal -->
<div
class="modal fade"
tabindex="-1"
role="dialog"
id="verificationModal"
ref="verificationModal"
v-if="showModal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Verify Summoner Account</h5>
<button
type="button"
class="btn-close"
data-dismiss="modal"
aria-label="Close"
#click="closeModal"
></button>
</div>
<div class="modal-body">
<p>
Please change your summoner account icon to the following image:
</p>
<div class="summoner-icon-container">
<img
:src="randomSummonerIcon"
alt="Random Summoner Icon"
class="summoner-icon"
/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" #click="verifySummoner">
Verify
</button>
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
#click="closeModal"
>
Close
</button>
</div>
</div>
</div>
</div>
<!-- Form -->
<div>
<form #submit.prevent="submitForm">
<div class="form-group">
<label for="username">Username</label>
<input
v-model="form.username"
type="text"
class="form-control"
id="username"
aria-describedby="usernameHelp"
placeholder="Enter username"
/>
<div v-if="errors.username" class="invalid-feedback">
{{ errors.username[0] }}
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
v-model="form.password"
type="password"
class="form-control"
id="password"
placeholder="Enter password"
/>
<div v-if="errors.password" class="invalid-feedback">
{{ errors.password[0] }}
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
v-model="form.email"
type="email"
class="form-control"
id="email"
aria-describedby="emailHelp"
placeholder="Enter email"
/>
<div v-if="errors.email" class="invalid-feedback">
{{ errors.email[0] }}
</div>
</div>
<div class="form-group">
<label for="summoner_name">Summoner Name</label>
<input
v-model="form.summoner_name"
type="text"
class="form-control"
id="summoner_name"
placeholder="Enter summoner name"
/>
<div v-if="errors.summoner_name" class="invalid-feedback">
{{ errors.summoner_name[0] }}
</div>
</div>
<button
type="submit"
v-if="form.summoner_verified"
class="btn btn-primary"
>
Submit
</button>
</form>
<button
v-if="!form.summoner_verified"
#click="openModal"
class="btn btn-secondary"
>
Verify Summoner
</button>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
form: {
username: "",
password: "",
email: "",
summoner_name: "",
summoner_verified: false,
},
errors: {},
showModal: false,
}
},
mounted() {
$(this.$refs.verificationModal).modal()
},
methods: {
openModal() {
this.showModal = true
console.log("Model Opened")
},
closeModal() {
this.showModal = false
console.log("Model Closed")
},
submitForm() {
axios
.post("/api/register", this.form)
.then((response) => {
// redirect to dashboard or display success message
})
.catch((error) => {
this.errors = error.response.data.errors
})
},
verifySummoner() {
axios
.post("/api/verify-summoner", {
summoner_name: this.form.summoner_name,
})
.then((response) => {
this.form.summoner_verified = response.data.summoner_verified
this.form.rank = response.data.rank
if (this.form.summoner_verified) {
this.closeModal()
}
})
.catch((error) => {
console.log(error)
})
},
},
}
</script>
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");
});
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.
This question already has answers here:
How do I reset a form including removing all validation errors?
(10 answers)
Closed 6 years ago.
Here I applied angularjs form validations for a form which is in a bootstrap model.But what the issue is ,the error messages and the dat in text fields remain same even after closing the model`
<div class="modal fade loginpopup index" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog login-form animated">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="loginform">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="login" name="login">
<div class="form-group" >
<input type="email" id="userName" name="userName" class="form-control" ng-model="email" placeholder="UserName" required >
<span class="has-error" ng-show="loginform.userName.$touched && loginform.userName.$invalid" class="font-ten">
<span class="has-error" ng-show="loginform.userName.$error.email" class="font-ten">Invalid email address.</span>
<span class="has-error" ng-show="loginform.userName.$error.required" class="font-ten">UserName is required..</span>
</span>
</div>
<div class="form-group">
<input type="password" id="psd" name="psd" class="form-control" placeholder="Password" required >
</div>
<div class="form-group text-center" >
<button class="btn btn3d text-center imm" type="submit" > Log In </button>
</div>
<div class="form-group login-index" style="margin-bottom:0px;padding-top:0px !important">
<input type="checkbox" name="checkbox" id="Option">
<label class="Option" for="Option"> Rememer Me </label>
Forgot Password?
</div>
</div>
<div class="tab-pane" id="forgetpassword">
<div class="form-group " >
<input type="email" id = "emailId" name="emailId" required class="form-control" placeholder="Email Address" >
</div>
<div class="form-actions text-center">
<button type="button" class="btn btn3d imm" >Submit </button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
On closing your bootstrap modal, do this :
loginform.setPristine();
This will set the form to pristine state i.e it will clear all the validations applied to the form and make it as it was untouched. But you have to clear the input values separately before doing this.
guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" 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="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)
I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps