Javascript - Function not defined - javascript

I have a modal dialog and I'm trying to use javvascript's onClick function to close it, but it says 'closeModal not defined'.
Here is my html for the modal:
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
</div>
</div>
and here is my javascript:
<script type="text/javascript">
$(function closeModal() {
$('#popup').modal('hide');
});
</script>
I fail to understand why it says undefined because the function and onClick have the same name(closeModal) and i referenced #popupin my function to close the whole modal.

closeModal should be in global scope, $(function (){}) is shorthand for $(document).ready(function() {})
function closeModal() {
console.log(this);
// $('#popup').modal('hide');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
</div>
</div>
Also if you use jQuery you don't need use inline events you can change your example like this
$(function () {
$('.js-close-modal').on('click', function () {
console.log(this);
// your code
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default js-close-modal" data-dismiss="modal">Close</button>
</div>
</div>

Related

Dynamically update a buttons onclick inside a Bootstrap Modal

I'm trying to pass a value into a Bootstrap Modal and then display it when a button is clicked, however nothing is displaying when I click the button.. Can anyone help fix the issue?
I believe the issue is on the line:
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
JSFiddle: http://jsfiddle.net/9m13c4rx/
HTML
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
});
i have fixed your code
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$("#save").click(function(){
alert(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The issue is onclick is a vanilla JavaScript property for processing click events on a given element, but you are trying to implement that on a jQuery object, use jQuery's .click() instead.
Update: The best solution is to write the button click event outside the modal event handler function.
$('#save').click(function() { alert(id); });
If you still want the code to be inside the modal event then you can use flag variable based on which you can execute the button click event.
var flag = false; // set the flag to false
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
if(!flag){ // check the flag
$(e.currentTarget).find('button[id="save"]').click(function() { alert(id); });
flag = true; // set the flag to true
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap modal is not taking the button backward

My code is working but the button is not going backward after clicking.
Here is my output
Launch Demo Modal
Here is the Html code:
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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>
Here is the javascript:
<script type="text/javascript">
$('#c').click(function(){
$("#myModal").modal('show');
});
i have created a working fiddle.
JS fiddle
Just add a on click event and hide the modal.
HTML
Launch Demo Modal
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id = "test" type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
JS
$('#c').click(function(){
$("#myModal").modal('show');
});
$("#test").on("click", () =>{
alert("save changes")
$("#myModal").modal('hide');
})

Bootstrap Modal Jquery not rendering or showing correctly

I am having issue rendering the bootstrap modal using Jquery this is what I have so far:
HTML
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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>
Jquery
$('#update_modal').on('click', function() {
console.log("clicked");
jQuery.noConflict();
$("#myModal").modal('show');
})
there is a button which has the id as "update_modal".
Here is a Snapshot of how it look like. As you can see its not rendered everything correctly and I cannot click any where to close the modal off too.
Please can someone tell me if I have missed anything off. Thank You
Here, I have replicated the problem https://jsfiddle.net/z26sxpvk/2/
$('#update_modal').on('click', function() {
$("#myModal").modal('show');
});
#myModal {
z-index:0;
}
<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 id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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>
Problem is happening because the modal's z-index is less than modal-backdrop.
Here you go with a solution https://jsfiddle.net/z26sxpvk/3/
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
#myModal {
z-index:0;
}
<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 id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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>
Just increase z-index value for modal.
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
Hope this will help you.
This one works for me, added aria-hidden="true" in first <div>
<div class="modal" id="myModal" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning">
<small>If you don't save, your changes will be lost.</small>
</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>
Your modal
I tried your code and its showing perfectly and can to be closed with the button.
I assuming you to try showing and hiding modal via attriubutes before, with class="modal" and data-target="#myModal". If your modal is not showing perfectly like your code above, maybe that of this categorize :
1. Placement modal is wrong.
2. Or upgrade your bootstrap framework.
Try with attributes before, then with javascript like your code or improvement.
Hope this can help you.
Keep your spirit :D .

how to open bootstrap modal-dialog without id or class using JQuery or JavaScript?

For some reasons i cannot set id or class for my Bootstrap modal-dialog and i need a way to make them work without it, by maybe using JQuery or JavaScript?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 1</button>
<!-- Modal -->
<div class="modal fade" 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 text11 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 2</button>
<!-- Modal -->
<div class="modal fade" 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 text22 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
define onclick function to both buttons and pass this as parameter and then use next() property of jquery
<button type="button" class="btn btn-info btn-lg" onclick="firstmodal(this)" >Open Modal 1</button>
<!-- Modal -->
<div class="modal fade" 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 text11 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
js
function firstmodal(ele){
$(ele).next().modal('show');
}
Do the same for other modal as well
$(document).ready(function(){
var buttons = $(".container button");
if(buttons.length > 0){
buttons[0].on("click", function(){
//this will return two modals
var modals = $(".container div.modal")
if(modals.length > 0){
modals[0].modal("toggle");
}
})
}
if(buttons.length > 1){
buttons[1].on("click", function(){
//this will return two modals
var modals = $(".container div.modal")
if(modals.length > 1){
modals[1].modal("toggle");
}
})
}
})
Hope that solves the problem

client side events for html textbox and html button is not triggered on bootstrap modal

I have called textbox onchange event and button click event. the textbox and htmlbutton in bootstrap Modal body. these events are not triggered.
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
$("#input1").change(function () {
alert("htmltext changed");
});
});
</script>
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Your Code looks fine. Not sure if you included Jquery here is the complete code
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
});
</script>
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$("#input1").on('change',function () {
alert("htmltext changed");
});
$("#input1").on('keypress',function () {
alert("htmltext changed");
});
</script>
</html>
Did the key press part seperatly for better understanding of the code.

Categories

Resources