How to add text to modal on button click - javascript

I have this modal
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></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>
<div class="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
and I would like to add text in <span id="bankAssessBondId"></span> when the following button is clicked
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
as I have multiple buttons for this, I'm using an EventListener as follows
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i=0; i<buttons.length; i++){
buttons[i].on("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
but the 'click' button event is not detected. How can I fix this?

For elements that are dynamically generated you'll need to use the delegated events form of the JQuery on() function:
$('body').on('click', '.btn.btn-success.bank', function() {
$('#bankAssessBondId').append($(this).value)
}
I've used "body" in this case as the parent element, but it could be any element that's a parent of the buttons.

When selecting an element with multiple classes then the selectors must be specified without spaces like below.
$('.btn.bank.btn-success')
Also in this, case the modal should be opened with the script as the span value inside modal needs to be changed dynamically.
$('#bankAssess').modal('toggle');
$(function() {
$('.btn.bank.btn-success').click(function() {
var val = $(this).attr("value");
console.log(val);
$('#bankAssessBondId').append(val);
$('#bankAssess').modal('toggle');
});
});
#bankAssessBondId {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></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>
<div class="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond2">
Bank Assess
</button>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond3">
Bank Assess
</button>

You can get the button by its class name using
$(".bank").on('click', function () {
alert('clicked');
$('#bankAssessBondId').append($(this).attr('value'));
});
Also append the value of the button to the id="bankAssessBondId"
<span id="bankAssessBondId"></span>
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
Using a sample of your code
Here is a working example.
https://codepen.io/anon/pen/oQGJOm

Your issue looks to be that you are trying to use the jQuery on with an element that was discovered not using jQuery. The way I see it you have two possible solutions depending on what you are trying to achieve.
use the addEventListener
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
use jQuery to select the buttons and use the .on function to apply a click listener to all items returned
var buttons = $(".btn.btn-success.bank");
buttons.on("click", () => {
//do stuff here
});
I hope this helps!

Related

I am using a bootstrap modal window to display user alert. I am trying to call the modal window from different places and assigned different content

<div class="modal" tabindex="-1" role="dialog" id="myModal" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"id="myModalTitle">Alias Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="myModalContent">
<p>Do you want your First Name as Alias Name</p>
</div>
<div class="modal-footer">
<button id="myModalButtonYes" type="button" class="btn btn-primary" data-
dismiss="modal">Yes</button>
<button id="myModalButtonNo" type="button" class="btn btn-secondary" data-
dismiss="modal" >No</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function ()
{
$('#myModalTitle').text('Duplicate Patient');
$('#myModalContent').text('A patient already exists with the same name and
birthdate. Do you want to continue?');
const btn = document.getElementById("myModalButtonNo")
btn.addEventListener("click", DuplicateName())
$('#myModal').modal('toggle');
});
I wanted to call different functions when modal Ok button is clciked in different scenarios.
btn.addEventListener("click", DuplicateName()) didnot work and also document.getElementById("myModalButtonNo").onclick = DuplicateName() didnot work.
Please give me your suggestions on this.
you change the modal text but the button is static try to call the function in the HTML button element.
<button id="myModalButtonYes" onclick="DuplicateName()" type="button"
class="btn btn-primary" data-
dismiss="modal">Yes</button>

Javascript modal pass dynamic variable in popup depending on dynamic id?

<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>
<script>
$('#wishlist-modal').on('shown.bs.modal', function() {
var $el = $("#wishlisticon");
var $username = $el.data('productid');
alert($username);
});
</script>
There are several buttons on a page pointing to the same modal, however different data needs to be passed for each modal.
The data to be passed is saved in data-productid.
When the popup modal opens, I want to use data-productid variable.
The function is working but each time the alert is giving the same productid value (i.e = 1)
The function is not able to understand that it should pickup the corresponding data-productid
As mentioned in the documentation, you can use event.relatedTarget to vary the contents of the modal depending on which button was clicked.
$('#wishlist-modal').on('shown.bs.modal', function(event) {
var $el = $(event.relatedTarget);
var $username = $el.data('productid');
alert($username);
});
DEMO:
$('#exampleModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
alert(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<h2>Hello World!</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Could I get a direct element in javascript using queryselector and foreach?

I am trying to make a confirmation control which I could use multiple times on a page if I would like to. Therefor I used HTML, Bootstrap and JavaScript. I would like to refrain from jQuery (as much as possible) for debugging reasons (I know for Bootstrap I still might need to use some of it still).
My solution contains element.parentNode in order to keep the controls separated when clicked on. The problem I am having is that I seem to be unable to get a specific button from the control when clicked on. My intention is to keep my code clean by using querySelectorAll() and forEach(), but I seem unsuccessful:
const targetModal = $("#bs-modal-xl");
const positiveNodes = document.querySelectorAll(".foo");
const negativeNodes = document.querySelectorAll(".bar");
positiveNodes.forEach(node => node.addEventListener("click", function() {
const thisNode = this;
thisNode.classList.add("btn-success");
thisNode.parentNode.querySelectorAll(".bar").forEach(node => node.classList.remove("btn-warning"));
//How do I get the direct button containing the text "confirm?" after clicking any yes button and enable it?
console.log(thisNode.parentNode.parentNode)
console.log(thisNode.parentNode.parentNode.querySelectorAll("> button")); // returns Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '> button' is not a valid selector.
console.log(thisNode.parentNode.parentNode.querySelectorAll("button")); // <-- returns nodelist of 3 buttons: "yes", "no" and "confirm?".
console.log(thisNode.parentNode.parentNode.parentNode.querySelectorAll(".confirmation-box > button")); // <-- returns nodelist of the available "confirm?" buttons, in this case 2 of them.
//I would not want the seperate ".confirmation-box" elements to interact with each other, these are independant elements.
}));
negativeNodes.forEach(node => node.addEventListener("click", function() {
this.classList.add("btn-warning");
this.parentNode.querySelectorAll(".foo").forEach(node => node.classList.remove("btn-success"));
}));
#foo-container {
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal" id="bs-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" 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">Modal title</h4>
</div>
<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>
</div>
</div>
</div>
<div id="foo-container">
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
<br />
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
</div>
JSFiddle
The controls are being separated by using my own custom element containing the class .confirmation-box.
The desire of the control is that when "yes" is clicked, the "confirm?" button's disabled state should be removed whereas "no" is clicked, should disable the "confirm?" button.
Is it possible to get the desired element using querySelectorAll() and forEach()? Could I refrain from looping (and using indexes) and use these methods instead? Am I overlooking something?
The desired element should look something like this: On click -> this -> find parent .confirmation-box element -> find child "confirm?" button.
I guess like this
const confirmButton = thisNode.parentNode.parentNode.querySelector(".confirmation-box > button");
you can get by the class:
thisNode.parentNode.parentNode.querySelectorAll(".btn-danger")
const targetModal = $("#bs-modal-xl");
const positiveNodes = document.querySelectorAll(".foo");
const negativeNodes = document.querySelectorAll(".bar");
positiveNodes.forEach(node => node.addEventListener("click", function() {
const thisNode = this;
thisNode.classList.add("btn-success");
thisNode.parentNode.querySelectorAll(".bar").forEach(node => node.classList.remove("btn-warning"));
//How do I get the direct button containing the text "confirm?" after clicking any yes button and enable it?
console.log(thisNode.parentNode.parentNode.querySelectorAll(".btn-danger"));
}));
negativeNodes.forEach(node => node.addEventListener("click", function() {
this.classList.add("btn-warning");
this.parentNode.querySelectorAll(".foo").forEach(node => node.classList.remove("btn-success"));
}));
#foo-container {
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal" id="bs-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" 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">Modal title</h4>
</div>
<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>
</div>
</div>
</div>
<div id="foo-container">
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
<br />
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
</div>

Bootstrap Modal - Unable to collect attr from relatedTarget?

I have a PHP loop that creates a series of buttons with unique data attributes. When these buttons are clicked they open a modal which collects the values of the data attributes on the button, and uses them to prepopulate the form. Can be seen here: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
The modal opens, but doesn't display the data I'm trying to collect. I also cannot get core functions such as alert(); to work.. and I'm lost.
I have tried using jQuery's data() and the relevant data attributes, but when they also didn't work I stuck to using attr().
Can anyone help?
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
alert();
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
)}
});
</script>
It seems you have an error in your code. Try this:
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>

How to know which button triggered the modal on pressing close button on modal

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button> <div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="saveHTML(this)" data-dismiss="modal">Close</button>
</div>
</div>
</div>
function saveHTML() {
//code
}
I have modal html and along with that I have few button, all of which can trigger the button because the data-target and data-toggle attribute is set. But on clicking the close button inside the modal how can i figure out which button triggered the modal. The buttons that trigger the modal dont have a unique id because i have to make the code dynamic. So have to use 'this' operator.
Use js to open the modal and store the target element. You can open the below link and test it.
https://jsbin.com/nejukidopi/1/edit?html,js,output
$(document).ready(function(){
var currentBtn;
$('.my-edit-btn').on('click', function(event){
currentBtn = event.target;
$('#myModal').modal('show');
});
window.saveHTML = function(){
alert($(currentBtn).text());
}
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- Latest compiled and minified CSS -->
<body>
<button type="button" class="btn btn-success my-edit-btn">Edit 1</button>
<button type="button" class="btn btn-success my-edit-btn">Edit 2</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="saveHTML()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
simple solution 1:
you can add custom class to know which button is clicked, this solution will add the class on the button itself and then later you can identify this
$(document).ready(function(){
$("button").click(function(){
$(this).addClass("pressed");
});
});
simple solution 2:
on button clicked attach the function right away
$(document).ready(function(){
$("button").click(function(){
function .....//logic
});
});
I have many solutions too but for that i need to see for what purpose you want this.
Add a listener to buttons so that you will be sure which button appears to close modal
In My case:
Button:
<button class="close" id="close_modal_button" data-dismiss="modal">Close</button>
Listener:
$('#close_modal_button').on('click', function(){
$(event).val(String(event.dataset['value']));
});

Categories