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>
Related
Let's say I have the following form:
<form id="evidence-formset" action="{% url 'interpret-criteria' %}" method="post">
<div class="form-group row">
<!-- Some content here -->
<div class="col-auto">
<input type="submit" class="btn btn-primary" value="Calculate" />
<input type="reset" class="btn btn-secondary" value="Reset" />
<input type="submit" class="btn btn-dark" value="Register" onclick="validateRegister()" formaction='https://www.wikipedia.org/'/>
<input type="submit" class="btn btn-link" value="Export results as Excel" formaction="{% url 'export-interpretation' %}" />
</div>
</div>
<form>
And the following JS function (WIP):
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#registerSubmit").submit()
}
And this basic modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Register changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So basically what I want is that when I click the Register button a modal shows, asking for confirmation. If I click again on 'Register' then the input will submit and the webpage should redirect to wikipedia (this is just an example). If I click Close, no form should be submitted and the modal will disappear.
I checked all the previous StackOverflow questions and I couldn't find an answer that worked for me. The closest solution I found is this but it doesn't work.
UPDATE WITH A SOLUTION:
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#myModal").on("click",".btn-primary", function(){
$('#evidence-formset').attr('action', 'https://www.wikipedia.org/').submit();
});
}
remove onclick and add this
$("#evidence-formset").on("submit",function(e) {
e.preventDefault();
$("#myModal").modal();
})
Add ok/cancel to the buttons of the modal
$("#myModal").on("click",".btn-primary", function(){
$("#evidence-formset").submit(); // you can add if (validate(....) in front if you have any validation
});
$("#myModal").on("click",".btn-secondary", function(){
$("#myModal").modal('toggle');
});
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');
})
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 .
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>
I'm enough new with html/javascript so I would need an advice. I have to call modal from button and in this modal I would like to see a table obtained from database.
So my idea is to call modal through button so:
<tbody>
<tr th:each="fleet : ${fleets}">
<td th:text="${fleet.application}"></td>
<td th:text="${fleet.cubic}"></td>
<td th:text="${fleet.power}"></td>
<td th:text="${fleet.euroClass}"></td>
<td th:text="${fleet.engineType}"></td>
<td th:text="${fleet.traction}"></td>
<td th:text="${fleet.transmission}"></td>
<td><button data-id="showCarsButton" type="button"
class="btn btn-primary" data-toggle="modal"
data-target="#modalShowCar">Show cars</button></td>
<td><button id="addCarButton" type="button"
class="btn btn-primary">Add car</button></td>
</tr>
temporary modal:
<div class="modal fade" id="modalShowCar" 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">Fleet cars</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"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
temporary js:
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var idFleet = $(e.relatedTarget).data('id');
$.ajax({
type : "GET",
url : "cars/"+ idFleet,
contentType : 'application/json',
success : function(data) {
if (data.status==200){
//I have to pass to modal the data.body
} else {
//show error
}
},
error : function(data) {
window.location.href = "/500"; //Redirect to page 500
}
});
});
});
and then from modal call the Spring controller with data-url into table tag.
I need to pass parameter (id) to perform the query, so from the button to the url into modal, how can I do it? Is this the best way?
thanks,regards
There are many ways to achieve what you are trying, with your appraoch, you can use bootstrap modal event and pass the id to modal
change id="showCarsButton" to data-id="showCarsButton"
<button data-id="showCarsButton" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalShowCar">Show cars</button></td>
JS
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
// Do Whatever you like to do,
});
Example Code
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
alert(carid);
$(".modal-body").html(carid);
// Do Whatever you like to do,
});
});
<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalShowCar" data-id="showCarsButton">Open Modal</button>
<div id="modalShowCar" 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 text 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>