Dismiss bootstrap modal changes on cancel - javascript

I have a bootstrap modal, which has table with attribute contenteditable = trueinside of it (table is created dynamically with js). I'd like to set up a neat feature - if user presses cancel then the changes in table will be dismissed. I understand that i could do this with writing a function for different states and then calling out the previous state in case of cancel. I'm just thinking that is there a quicker-better-faster approach?
I did some searching and found one link which had similar issue, but the approach and result there are a bit different from mine which means that it didn't work for me.
Here's my code - parts of it are in Estonian, i don't think in general code is necessary for this question but i'll still provide:
<div class="modal fade" id="ajamasinModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
</div>
<div class="modal-body">
<div id="changeablevoor"></div>
<button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>

Try the following approach ( view comments inline ):
Html
<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
//...
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
JS
// Add hidden event of the modal
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
cancelModal(); // Call the function to cancel the modal after hiding of the modal
})
// Cancel the modal
function cancelModal() {
// Re-generate content with default values
}
More information about these events of Bootstrap Modal can be found here in the Docs of Bootstrap: Bootstrap Modal Events

Related

Bootstrap data-toggle modal content within a function

I'm new to programming, and I have this simple question but I can't figure out how to do it.
I got this working code from Boostrap 4:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
But instead of having a button I want to create a function to fire up the modal content:
function openModal(){
/* DESCRIPTION: Open the warning modal */
// data-toggle="modal" data-target="#exampleModal"
}
But I don't know how to the same thing as data-toggle and
data-target do in the button click.
Someone has a hint how to do that?
You have to use the Bootstrap JS api for the modal ( Link attached at the end of this answer ).
Here is the straight answer :-)
function openModal(){
/* DESCRIPTION: Open the warning modal */
$('#exampleModalLong').modal('show');
}
Here is another SO question related to this : How can I trigger a Bootstrap modal programmatically?
Here is a detailed link on Bootstrap official documentation on various javascript methods for modals.
https://getbootstrap.com/docs/4.0/components/modal/#methods
Just use this line in your function:
$('#myModal').modal('show');
Note: remember to replace your modal id with myModal.

How to properly set up a modal to appear when a button is pressed using bootstrap?

I am trying to get a modal to appear when the button below is clicked using bootstrap. I've tested it already without the "modal hide fade" and the modal appears on the page like it should. There must be something wrong with the way I have set up the button, but I'm not sure what it is. Your help is appreciated.
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</button>
<div id="myModal" class="modal hide fade" role="dialog">
<div class= "modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
modal headers
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
Remove hide class from <div id="myModal" class="modal hide fade" role="dialog">
So it should look like <div id="myModal" class="modal fade" role="dialog">
See here, seems working well - https://jsfiddle.net/VaTz88/arkbqe9j/

Using Bootstrap 3, is there a way to reuse the same HTML for different media queries to practice DRY?

I've been reading Bootstrap 3's documents about modals, and it makes sense to use this HTML for the modal content. I'd be creating this modal on mobile:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
My question is, I'd want to reuse the HTML inside the body of the modal for a sidebar on the desktop media query. How would I do so without repeating the HTML for a second time as a completely different div that simply contains the exact same content?

BootStrap: With 5 Modal Forms on a page. How to check with JavaScript/jQuery which one is open

I have 5 modal forms in a page. And I want to get the Id of the currently opened one.
I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.
Is there some way I can determine which modal the user has open currently open and then I will get the id of that.
You can use the shown.bs.modal event to get the current open modal.
Modal Events
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
Here is an example
$('.modal').on('shown.bs.modal', function (e) {
var crntModalId = "current modal id is: " + $(this).attr('id');
$('.output').text('');
$('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="output"></div>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
Launch modal one
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-One" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"></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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
Launch modal two
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-Two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"></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>
It's very simple, with bootstrap modal event's
To get any attribute value from the modal trigger button you can use $(e.relatedTarget)
To get the modal attribute value you can use $(e.currentTarget)
In your case, you can get the Opened modal id with
$('.modal').on('shown.bs.modal', function(e) {
var modalid = $(e.currentTarget).attr('id');
});
Fiddle
A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.

Bootstrap Confirmation Dialog

I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</button>
<!-- 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});
$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.
Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>

Categories

Resources