Script to Call Modal, and HTML Skeleton for Modal: (which is working)
<script>
$(document).on("click", ".addworker", function (e) {
e.preventDefault();
var $popup = $("#popup");
var popup_url = $(this).data("popup-url");
$(".modal-content", $popup).load(popup_url, function () {
$popup.modal("show");
});
});
</script>
<div id="popup" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
The HTML loaded into modal-content is returned by a django view which sits behind the url. (this part is working too)
Inside this HTML i have the Button, which i want to use to then close the modal again.
But when the Modal got injected with the HTML and is open, it seems like the modal is out of scope, so i tried to get it back with var $popup = $("#popup");.
And i indeed get back the Object, but the $popup.modal("hide"); Method doesnt work.
<script>
$(document).on("click", ".cancel", function (e) {
var $popup = $("#popup");
$popup.modal("hide");
});
</script>
<div class="modal-header">
<h1>{{ aoe }} Worker: {{ id }}</h1>
</div>
<form action="add/" method="post">
{% csrf_token %}
<div class="modal-body">
{{ form|crispy }}
</div>
<div class="modal-footer">
<input type="button" class="btn btn-secondary cancel" value="Cancel">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
My first workaround: (inside the html file that gets injected to the modal)
<script>
$(document).on("click", ".cancel", function (e) {
var $popup = document.querySelector('#popup');
$popup.classList.remove('show');
$('#popup').css("display", "none");
var $back = document.querySelector('.modal-backdrop');
$back.parentNode.removeChild($back);
});
</script>
This works, but is not really that convenient.
Second Workaround:
Just call $("#popup").click() when pressing the Close Button,
to simulate a click into the free area next to the Modal.
Feels like cheating, but at least its less effort now.
Still, i would like to know the "proper" way to do this.
Problem Solved. I included JQuery in Both HTML Files, which seemed to cause the function not to work anymore. Now it works using $("#popup").modal('hide');
I'm trying to understand modals and js better. I have tried to use buttons that are realated to php files in order to make the content of the php files appear in a modal window once the button is clicked.
so...
button_1 gets file_1 and puts it in modal once it is clicked.
button_2 gets file_2 and puts it in modal once it is clicked.
etc.
I have acheived most of this but for some reason, each button needs to be clicked twice (for the first appearence of the modal window) for the modal to work. Afterwards, a simple click works fine, until the page is refreshed. At that point, two clicks are again needed.
My code works fine if I don't try to insert the information from the php file into a modal window. So... I'm guessing it is releated to the fact that the button has to do two things. 1. get the info and 2. open the modal window.
How do I combine both in one click?
I have tried to prefech files.
<link rel="prefetch" href="/folders/to/php/files/1.php">
I have also tried to pre-insert the modal in the html .
I have tried to use the load instead of click in the function.
I my tries have not changed the fact that I need to double click the buttons at first.
Any help appreciated!!
BONUS:
If I could get the buttons to dynamically find their related file, that would be bonus. Meaning I could simply add or remove buttons and they would find the correct files. All I would need to do is to add as many files as buttons.
Thanks for your time and help!
Here are the codes:
$("#liste > button").on('click', apar);
function apar() {
$(this).addClass("active").siblings().removeClass("active");
$('#main_p').load("/folders/to/php/files/" + (1 + $(this).index()) + ".php");
$(document).ready(function() {
// Do something with the DOM
$('.active').click(function() {
});
});
}
function renderHTML(data) {
var htmlP = data.url;
$('#main_p').html(htmlP);
}
// On page load, click on the first `btn` to automatically load the data for it
$('#liste > button:first').click(renderHTML);
.btn {
margin: 5px;
padding 0px 5px;
text-align: center;
background-color: #0095ff;
color: #FFF;
border: none;
}
.btn:hover,
.btn:focus {
outline: none !important;
color: #FFF;
}
.active {
background-color: #891;
}
<!doctype html>
<html>
<head>
<title> Modals </title>
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="liste">
<button class="btn" data-toggle="modal" data-target="#myModal_1">
<div class="tree">to file 1</div>
</button>
<button class="btn" data-toggle="modal" data-target="#myModal_2">
<div class="tree">to file 2</div>
</button>
<button class="btn" data-toggle="modal" data-target="#myModal_3">
<div class="tree">to file 3</div>
</button>
<h4 id="main_tit"></h4>
<div class="main_p" id="main_p"></div>
<div id="main_ima"></div>
<script src="js/main.js" async></script>
</body>
</html>
here is the example of a 1.php file:
<div id="myModal_1" 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">Look 1</h4>
</div>
<div class="modal-body">
<?php
echo "I have the 1.php <br>";
echo "its a go!";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
UPDATE: I have added the automatic selection on button. So I have removed the button attributes in the html and have added this at the top of the JS:
var idVar = $("#liste").find("button").each(function(index){
$(this).attr("data-target","#myModal_" + (1+$(this).index()));
$(this).attr("data-toggle","modal");
$(this).attr("class","btn");
});
At the top of your js file there is $("#liste > button").on('click', apar);
Try to change it to:
$('body').on('click', '#liste > button', apar);
And put it at the end of your code after your $('#liste > button:first').click(renderHTML);
Let me know if this doesn't fix it.
Edit: Try creating new custom class for those buttons in HTML. It is good to set a marker to your custom classes, something like l-custom-class, or customClass, try to follow this example:
HTML:
<div id="#liste">
<button type="button" class="l-liste-button">btn1</button>
<button type="button" class="l-liste-button">btn2</button>
<button type="button" class="l-liste-button">btn3</button>
</div>
JS:
function apar(){
//some code for apar function..
}
function renderHTML(){
//some code for renderHTML function
}
$('body').on('click', '.l-liste-button', apar);
$('body').on('click', '.l-liste-button:first', renderHTML);
Here is JSFiddle
I wrote a simple code for materialize modal.
HTML code:
<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS code:
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
/*$('.view').click(function (){
$('#modal1').modal('open');
alert('edskjcxnm');
});*/
/*$('.view').leanModal();*/
$('#modal1').modal('open');
});
JSFiddle link: https://jsfiddle.net/7f6hmgcf/
Why isn't it working?
Initialize all modals first. $('.modal').modal();
Complete code will look like this
(function ($) {
$(function () {
//initialize all modals
$('.modal').modal();
//now you can open modal from code
$('#modal1').modal('open');
//or by click on trigger
$('.trigger-modal').modal();
}); // end of document ready
})(jQuery); // end of jQuery name space
Not 100% sure what you are asking for here, but if what you are asking is how to trigger modal on button click you can simply do it by setting an onclick like this:
<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>
But before you can do $('#modal1').modal('open'); you need to initiate the modal in your js, like this:
$(document).ready(function() {
$('#modal1').modal();
});
You can check out my solution in this fiddle: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/
Another solution might be to do it this way:
<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>
MaterializeCCS documents aren't too clear, here's how I solved my problem.
HTML
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JavaScript
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
I recently updated my project to materializecss 0.98.0 and with this version I need to initialize modals before open it.
//Old
$('#modal1').openModal();
//New
$('#modal1').modal().modal('open');
I don't find any configuration like "autoOpen" on the modal initial options :(.
$( document ).ready(function() {
$('.modal').modal();
$('#modal1').on('click', function() {
});
});
https://jsfiddle.net/juands/z512cb7f/3/ check this link
Try Materialize.Modal class
let modal=new Materialize.Modal($("#yourModal"));
modal.open(); //Open it on some event
modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky
The code I used below works fine for first time.When I click cancel and press delete again ,function is called two times..In below example i get alert two times.I tried return false , still same problem.
Below is the javascript code
$(document).on("click",'.delbuttfultrackconfirm', function(e){
$('#delfultrackconfirm')
.modal({ backdrop: 'static', keyboard: false })
.one('click', '#delfultrackconfirmdel', function (e) {
alert("delete");
});
});
Hello below is the html code
<!-- Modal -->
<div class="modal fade" id="delfultrackconfirm" role="dialog" aria-labelledby="delfultrackconfirmLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="delfultrackconfirmbody" class="modal-body"> Are you sure want to delete this </div>
<div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" id="delfultrackconfirmdel">Delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
</div>
</div>
</div>
<br><br><br>
<center><button class="delbuttfultrackconfirm" href="#">del</button></center>
Here is bootply http://www.bootply.com/1Ghug4eX7p
Simply put the click function of the button outside the '. delbuttfultrackconfirm' click, like this
$(".delbuttfultrackconfirm").click(function(e){
$('#delfultrackconfirm').modal({ backdrop: 'static', keyboard: false });
});
$('#delfultrackconfirmdel').click(function (e) {
alert("delete");
});
The problem is your code is that every time you open the modal and not click on the "delete" button, you're adding another handler to be executed on the first click on the button.
Read the documentation: http://api.jquery.com/one/
This is because after each click you append event handler. This is happen because element store array of handlers, and after two clicks you have 2 handlers and each will be called.
function (e) {
alert("delete");
}
To avoid this just move handler to top;
$(".delbuttfultrackconfirm").click(function(e){
$('#delfultrackconfirm').modal({ backdrop: 'static', keyboard: false });
});
$('#delfultrackconfirmdel').click(function (e) {
alert("delete");
});
Demo
I have a list box in the bootstrap modal and a button.
When the button is clicked a new button gets rendered inside a div in the modal.
When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.
How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.
<!-- Modal -->
<div
class="modal fade"
id="myModal"
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">
<span aria-hidden="true">×</span
><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Select Language</h4>
</div>
<div class="modal-body">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="submit_form">Submit</button>
<div class="modal-body1">
<div id="placeholder-div1"></div>
</div>
</div>
<div class="modal-footer">
<script>
$("#submit_form").on("click", function () {
$(".modal-body1").html("<h3>test</h3>");
});
</script>
<script>
$(function () {
$(".modal-footer").click(function () {
$(".modal").modal("hide");
});
});
</script>
</div>
</div>
</div>
</div>
-- Update ---
Why doesn't this work?
<script type="text/javascript">
$(function () {
$("#myModal").on("hidden.bs.modal", function (e) {
console.log("Modal hidden");
$("#placeholder-div1").html("");
});
});
</script>
Just reset any content manually when modal is hidden:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
There is more events. More about them here
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tried it and working well
$('#MyModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset');
})
reset is dom build-in funtion, you can also use $(this).find('form')[0].reset();
And Bootstrap's modal class exposes a few events for hooking into modal functionality, detail at here.
hide.bs.modal This event is fired immediately when the hide instance
method has been called.
hidden.bs.modal This event is fired when the modal has finished being
hidden from the user (will wait for CSS transitions to complete).
What helped for me, was to put the following line in the ready function:
$(document).ready(function()
{
..
...
// codes works on all bootstrap modal windows in application
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
...
..
});
When a modal window is closed and opened again, the previous entered and selected values, will be reset to the initial values.
I hope this will help you as well!
Try cloning, then removing and re-adding the element when the modal is hidden. This should keep all events, though I haven't thoroughly tested this with all versions of everything.
var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
$('#myModal').remove();
var myClone = originalModal.clone();
$('body').append(myClone);
});
To reset all the input fields in a modal use the following.
$(".modal-body input").val("")
Here's an alternative solution.
If you're doing a lot of changes to the DOM (add/removing elements and classes), there could be several things that need to be "reset." Rather than clearing each element when the modal closes, you could reset the entire modal everytime it's reopened.
Sample code:
(function(){
var template = null
$('.modal').on('show.bs.modal', function (event) {
if (template == null) {
template = $(this).html()
} else {
$(this).html(template)
}
// other initialization here, if you want to
})
})()
You can still write your initial state in HTML without worrying too much about what will happen to it later. You can write your UI JS code without worrying about having to clean up later. Each time the modal is relaunched it will be reset to the exact same state it was in the first time.
Edit: Here's a version that should handle multiple modals (I haven't tested it)...
(function(){
$('.modal').on('show.bs.modal', function (event) {
if (!$(this).data('template')) {
$(this).data('template', $(this).html())
} else {
$(this).html($this.data('template'))
}
// other initialization here, if you want to
})
})()
(function(){
$(".modal").on("hidden.bs.modal", function(){
$(this).removeData();
});
});
This is perfect solution to remove contact while hide/close bootstrap modal.
That's works for me accurately
let template = null;
$('.modal').on('show.bs.modal', function(event) {
template = $(this).html();
});
$('.modal').on('hidden.bs.modal', function(e) {
$(this).html(template);
});
also, you can clone your modal before open ;)
$('#myModal')
.clone()
.modal()
.on('hidden.bs.modal', function(e) {
$(this).remove();
});
Reset form elements ( Works with bootstrap 5 as well). Sample code :
$(document).on("hidden.bs.modal", "#modalid", function () {
$(this).find('#form')[0].reset();
});
you can try this
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
It will remove all the data from the model and reset it.
I am using BS 3.3.7 and i have a problem when i open a modal then close it, the modal contents keep on the client side no html("") no clear at all. So i used this to remove completely the code inside the modal div.
Well, you may ask why the padding-right code, in chrome for windows when open a modal from another modal and close this second modal the stays with a 17px padding right.
Hope it helps...
$(document)
.on('shown.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
$(document.body).css("padding-right", "0px");
$(this).removeData('bs.modal').find(".modal-dialog").empty();
})
Sample code:
$(document).on('hide.bs.modal', '#basicModal', function (e) {
$('#basicModal').empty();
});
The below statements show how to open/reopen Modal without using bootstrap.
Add two classes in css
And then use the below jQuery to reopen the modal if it is closed.
.hide_block
{
display:none !important;
}
.display_block
{
display:block !important;
}
$("#Modal").removeClass('hide_block');
$("#Modal").addClass('display_block');
$("Modal").show("slow");
It worked fine for me :)
Using BS 3.3.7
$("#yourModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null); // will clear all element inside modal
});
/* this will change the HTML content with the new HTML that you want to update in your modal without too many resets... */
var = ""; //HTML to be changed
$(".classbuttonClicked").click(function() {
$('#ModalDivToChange').html(var);
$('#myModal').modal('show');
});
Reset form inside the modal. Sample Code:
$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
$('#myModal form')[0].reset();
});
To reset/clear all input fields from bootstrap modal use the following code:
$(".modal-body input").val("")
To hide/close bootstrap modal use the following code:
$('#yourModalId').modal('hide');
Keep Coding 😎