Bootstrap Modal wont show on click - javascript

I have a bootstrap modal that on click just won't show up.
I have tried using v-show and v-if and also just the $("edit_user_password").modal("show"); but nothing will work
Import happens here:
import EditPassword from "#/components/modals/edit_password.vue";
Register Component:
components: {
EditPassword
},
Then I use it in the code here:
<EditPassword v-show="this.password_modal"></EditPassword>
Then an on-click event on a button:
<button #click="update_password()" class="btn btn-info btn-block">Edit Password</button>
Then it hits this method here:
update_password() {
console.log('Im clicking i promise');
this.password_modal = true;
$("edit_user_password").modal("show");
}
The modal looks like this:
<template>
<div class="modal fade" id="edit_user_password" tabindex="-1" role="dialog">
<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">Update Password</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="password">Update Password</label>
<input
type="text"
v-model="password"
class="form-control"
id="password"
placeholder="Create new password"
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
I'm just sat staring at the code now and can't see why it's not working. If anyone has any suggestions I would be grateful.

You're missing # sign in your selector :
update_password() {
console.log('Im clicking i promise');
this.password_modal = true;
$("#edit_user_password").modal("show");
}

Related

How do I close a bootstrap (5.2) Modal from Javascript?

For a school project's sake, I created a modal using bootstrap in html, inside of it there is a prompt that I must check from javascript, how do I close the Modal from javascript, so that in case the prompt is valid I can just save the changes and if it isn't I throw an exception?
small note (Please without jQuery, I've seen a similar thread that had as a reply using this library, it's forbidden for the assignment)
this is my html code :
<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text" id="prompted">How much do you want to bet?</p>
<div class="input-group mb-2">
<input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
<span class="input-group-text">€</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
<button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
</div>
</div>
</div>
</div>
this is my javascript code :
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(isNaN(valueOfBid)){
//Cancel the prompt
}
players[realPlayer].bet=valueOfBid;
changeButtonState(false);
theTimer();
}
Please try like this. I suggest that you change isNaN(valueOfBid) to valueOfBid == "" before you add my code on your codebase.
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(valueOfBid == ""){
alert(1)
//Cancel the prompt
var myModalEl = document.getElementById('bidModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();
}
// players[realPlayer].bet=valueOfBid;
// changeButtonState(false);
}
you can add this to the element that should close the modal...
data-bs-dismiss="modal"
the following modal generates a list of links based off of a search term and user matches.
when they click one of the router links it will close the modal because of the line
<router-link :to="{ name: 'user', params: {user: user }}"
data-bs-dismiss="modal"
>{{ user }}
</router-link
>
the above code is generated INSIDE the modal -> here is the entire thing
<div class="full-page">
<div
class="modal fade"
id="findUser"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Find User</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<label for="recipient-name" class="col-form-label"
>Steem Username:</label
>
<input
type="text"
v-model="userField"
class="form-control"
id="recipient-name"
/>
</div>
<div v-if="userField"></div>
<ul v-for="(user, index) in userMatches" :key="index">
<li>
<router-link
:to="{ name: 'user', params: { user: user } }"
data-bs-dismiss="modal"
>{{ user }}</router-link
>
</li>
</ul>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>

Can't edit form in html modal

I have a problem with editing bootstrap forms. I set a default and a placeholder value via js.
Now when the user is trying to change the value of the textfield, he can't.
Here is the code for my modal.
getData(){
//gets data from our api and replaces the values of the inputfields down below
}
render() {
this.getData();
return(
<div class="modal fade" id="ChangePwModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ChangePwModalModalLabel">Nutzer Details</h5>
<button type="button" id="PwModalClose" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form onSubmit={this.persDaten}>
<div className="input-group" id="inputgroop_changeemail">
<input type="text" className="form-control" id="neuesPw" name="dozMail" value= {getCookie("user")} required></input>
</div>
<div class="form-row" id="changename">
<div class="col">
<input type="text" id="VornameDoz" class="form-control" name="dozVorname" placeholder="Vorname"></input>
</div>
<div class="col">
<input type="text" id="NachnameDoz" class="form-control" name="dozNachname" placeholder="Nachname"></input>
</div>
</div>
<button className="btn btn-danger d-flex justify-content-center" type="submit" id="modalbuttonsredpd">
Pesönliche Daten ändern
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
);
}
};
export default ChangePwModal;
Thanks a lot.
My guess is that somewhere here... there is an onChange Event... which is triggering the change of state when something changes the textfield... With the way react works, if you change the state, it will causes a RERENDER ... which means that it will call the render() function again... as well as the "getData()" which will change the textfield again to what it was originally was. My recommendation is to put this.getData(); NOT IN THE render() function, but rather, put it in the componentDidMount()

bootstrap modal event - wait for the callback to finish before returning

I know the question sounds naive, but couldn't think of any other title.
I'm using one of bootstrap modal events hide.bs.modal that gets called right before the modal disappears, to show a confirm box. The callback expects a boolean.
$('#the-modal').on('hide.bs.modal', function () {
var self = this;
$.cofirm("are your sure you want to close", function() { // gets fired if confirmed
$(self).modal("hide"); // cannot do this,it will fire the event hide.bs.modal over and over.
});
return false; // obviously, this gets called first, but that's alright
}
Also, instead of using a traditional confirm, I'm using a jquery plugin, that has its own callback.
$(self).modal("hide"); cannot do that, it will fire the event hide.bs.modal over and over.
You need a flag to know if visitor confirmed it or not. You can do it this way (using element's data):
$('#myModal').on('hide.bs.modal', function() {
var thisModal = $(this);
var thisConfirmed = thisModal.data('confirmed');
if (!thisConfirmed) {
$.confirm({
title: 'Are you sure?',
content: '',
buttons: {
confirm: function() {
thisModal.data('confirmed', true);
thisModal.modal('hide');
},
cancel: function() {
/* Nothing here */
}
}
});
return false;
} else {
thisModal.data('confirmed', false);
return true;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<div class="modal fade" id="myModal" 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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Also on JSFiddle.

How to correctly update value for v-for prop in bootstrap modal class

Am having this code in my parent component
<div v-for="contestant in contestants" :key="contestant.id">
<Evidence :contestant="contestant"></Evidence>
</div>
Then in my child component as below
<template>
<span #click="showModal(contestant)">View supporting evidence</span>
<!-- Evidence -->
<div class="modal fade" id="claimEvidence" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="addNewLabel">Evidence to support {{username}}'s claim.</h5>
<button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{firstname}} {{lastname}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['contestant'],
data(){
return{
firstname: '',
lastname: '',
username: '',
}
},
methods:{
showModal(contestant){
$('#claimEvidence').modal('show');
this.username = contestant.user.username
this.firstname = contestant.user.first_name
this.lastname = contestant.user.last_name
}
}
}
The issue that am experiencing is that am always getting the first value of the iteration rather than looping through the iteration in my bootstrap modal class. Am guessing the problem is with the prop because when i use the same modal class directly into my parent component, it works correctly. I found this similar issue but I could not figure out how. Please can someone help me figure out what am doing wrong. Thanks in advance.
This issue answered your problem in the "Edited" part.
Fix your loop by adding dynamic id selectors:
<div class="modal fade" id="`claimEvidence-${contestant.id}`" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
...
</div>
methods:{
showModal(contestant){
$('#claimEvidence-' + contestant.id).modal('show');
//...
}
}

css selectors, set property for all except two tags

i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});

Categories