We Keep Coding

How do I run a function in jQuery after Bootstrap completes a function?

I am working on a final project due in less than 24 hours and am working on the final requirement, which is to add custom Javascript to my code that is not complete bootstrap.
I have a bootstrap created form with a submit button. I used jQuery to trigger a bootstrap modal to appear displaying a success message upon the clicking of that button. The modal closes when the user clicks the "x" or clicks outside the modal window.
Once the modal window closes, I am attempting to hide the form from the page using jquery. Here is my code snippet below:
//the modal submit button click event
$('#myModal').modal(show);
//the form dissapears after the modal is closed. #formToggle is the id applid to the <form>
$(document).ready( function() {
$('#formToggle').on('show', function(){
$('#formToggle').remove();
});
});

Listen when the modal is closed
$(document).on('hidden.bs.modal', '#myModal', function () {
$("#formToggle").hide();
});
https://jsfiddle.net/yd9nffxe/6/

use hidden.bs.modal:
$('#myModal').on('hidden.bs.modal', function(){
// do your stuff here...
});
hidden.bs.modal occurs when the modal is fully hidden (after CSS transitions have completed)

detect click outside an element using javascript

I have some list items and each contains a small box next to it. Upon clicking on the box ,some info is shown. I want to hide the box if a click is outside the box. But i do not know exactly how to do it. There are already some posts similar to this question but all of them are using jQuery but i have to get this done using pure javascript
I tried to do following way: http://jsfiddle.net/kn8hw4tf/1/
Thanks

Listen for clicks anywhere on document, and react to them.
Listen for clicks on the box, and invoke event.stopPropagation() so they don't hit the listener on document.
document.getElementById('test_id').addEventListener('click', function getDetails(evt) {
var id = this.getAttribute('id');
alert("Clicked on " + id);
evt.stopPropagation();
});
document.addEventListener("click", function (e) {
alert("Clicked outside");
});

Jquery - detect the click outside of input [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
<input id="ok" />
$('.hor-minimalist-a').on('blur','#ok',function(){
});
with this code above, i can handle events which fire If i leave the input field.
How can I detect if someone clicks outside of inputfield without coming to input. I mean the user never came to this input field before, so there was no focus at all.
$('.hor-minimalist-a').on('?','#ok',function(){
?
});

$(document).on('click', function(e) {
if ( e.target.id != 'ok' ) {
// you clicked something else
}
});
That would capture any click except on the input, but why would you need it ?
To capture only clicks on .hor-minimalist-a and not the entire document, just replace document with that selector in the code above.

How about:
$('.hor-minimalist-a').on('click',':not(#ok)',function(){
That'll register click events within .hor-minimalist-a but outside the input #ok

There is a jquery plugin for that:
http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/

JS Function inside a click for a button is being called twice

Hi I have the following piece of code that is giving me weird behaviour
$("#cont_btn").click(function () {
$("#cont_btn").attr('disabled', 'disabled');
selRowIds = $("#CodeGrid").jqGrid('getGridParam', 'selarrrow');
rowsToJson(selRowIds);
//return false;
});
The button cont_btn is a button on a bootstrap 2 modal. It contains a continue button and a close button.
If I select the close button or click outside the modal to dismiss it, and then re-open the modal the function will get called twice.
I have tried using
.one('click', function() { ... }
and I have put break points on the line of
$("#cont_btn").click(...
click is not getting called twice. During my debugging I'm finding that the script re enters on the line of
$("#cont_btn").attr('disabled', 'disabled');
On the page load I see that the line of
$("#cont_btn").click(function () {
Is hit but the code does not enter the function it will skip to the close button. I presume this is the listener for both buttons being initialized ?
Googling this has suggested checking that the Script isn't called twice and using return false, but nothing has worked.
Any help is appreciated.

The event handler is inside the function that opens the modal, so everytime the modal is opened, the event handler is bound once more.

Click outside of div and more [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I want login area (in code below) to toggle on login button click. Also, I need login area hidden when clicked anywhere outside of login area, but not on login button.
<button id="loginBtn">Login</button>
<div id="loginArea">
<!-- here is login form -->
</div>
How can I achieve this?

Using:
$('body').on('click', '#loginBtn', function(){
$('#loginArea').show();
});
Will show the login, while the following will remove it when you click outside of it:
$(document).on('click', 'body:not(#loginArea)', function(){
$('#loginArea').hide();
});

$(function() {
$('#loginBtn, #loginArea').on('click', function(e) {
$('#loginArea').show();
e.stopPropagation();
});
$('body').on('click', function() {
$('#loginArea').hide();
});
});
If the click is within the login area or on the button, then the event will not make it to the second handler to hide the login area.

How's that?
$('#loginBtn').click(function (e) {
$('#loginArea').toggle();
e.stopPropagation();
});
$(document).on('click',function () {
$('#loginArea').hide();
});