Develop Reference

Using JQuery to .trigger('click') seems to unbind all actions for a modal

I am in the middle of writing some unit tests for a modal component I am developing. When I got around to testing that the action buttons, deny and ok, called the correct handler when clicked.
I thought an easy way to do this would be to call jquery .click(), .trigger('click'), or .tiggerHandler('click') on the button elements.
However doing so seems to unbind the click handler for not only the button being clicked but also the other action buttons and the dimmer. Making the modal impossible to exit.
let myModal = $('#confirmModalPanel');
myModal
.modal({
closable: false,
onDeny: function() {
console.log('onDeny was called');
},
onApprove: function() {
console.log('onApprove was called');
}
});
$('#btnReset').click(() => {
myModal.modal('show');
});
// Cannot trigger deny action from click in code.
// The first click correctly runs but seems to unbind the click event
// from the deny button and breaks the modal functionality. Commenting
// out these lines will make the modal behave normally.
console.log('Trying to click the accept button from code');
$('#positiveButton').trigger('click');
console.log('Trying to click the deny button from code');
$('#denyButton').trigger('click');
http://jsfiddle.net/TuckerD/fpt3rzkp/22/

How to unbind click and click submit button in and using JQuery?

I want to submit form in JQuery but
<input type="submit" id="yesBank" />
$('#yesBank , #worldBank').on("click", function (e) {
e.preventDefault();
$.blockUI({
message: 'Getting List'
});
//Want to unbind this click JS
//Want to click on submit button from here $(#yesBank).click("");
//Unbinding is done so that it does not execute this
//I am bound to click this button as server is handling a condition on click of it. but i have to display block ui too
});
My purpose is to block UI. actually when i block UI like this then control does not go to server and page does not reload. Even if i remove preventDefault. Can someone show me the snippet?

You can use chaining
$('#yesBank , #worldBank').on("click", function (e) {
// rest code goes here
}.off("click")

Try something like this -
$('#yesBank , #worldBank').on("click", function (e) {
e.preventDefault();
$.blockUI({
message: 'Getting List'
});
$(this).off('click');
});

Bootstrap modal doesn't show after prevented from being opened

I'm using Bootstrap 3 to create modal form. Before user click button to open the modal, there is a field validation.
If it is valid then modal is shown, otherwise prevent the modal from being shown.
The problem is on the second chance, user click the button and the modal won't display.
How to solve this problem?
Code to show modal and prevent modal from being shown: jsfiddle
$("#btnLookupClient").click(function (e) {
if ($("select[name='OfficeID'] option:selected").index() <= 0) {
alert("Please select office");
$("#OfficeID").focus();
$("#clientModal").on("show.bs.modal", function (e) {
return e.preventDefault() // stops modal from being shown
});
} else {
var url = '#Url.Content("~/Client/Search?officeID=")' + $("#OfficeID").val();
$.get(url)
.done(function (data) {
$("#lookup-client-container").html(data);
$("#clientModal").modal(show = true, backdrop = true);
});
}
});

Use one() instead of on().
$("#clientModal").one("show.bs.modal", function (e) {
return e.preventDefault() // stops modal from being shown
});
See here : http://jsfiddle.net/akcbj4n5/1/
Also reference : Difference between jQuery.one() and jQuery.on()

when the alert gets shown you are binding the preventDefault to the event that shows the modal so it will never be shown again, even when the validation passes.
I'd suggest using the .one() function instead of .on() http://api.jquery.com/one/
Also you're modal will fire without having to call it in javascript because you set the toggle to modal and the target to the modal id.

Close colorbox popup with a button and trigger the confirm box?

I have a confirm box on my colorbox("are you sure you want to leave?").
This triggers when i close the popup. This works when i click on the "cboxClose" div on the popup.
I am trying to show this confirm box on a button click. But the popup just closes right away without showing the confirm box.
My question is how do i trigger the the confirm box when i click on a cancel button. i tried several ways
//This just closes the pop up without showing the confirm box
$('#btnCancel').click(function () {
parent.$.colorbox.close(); });
//doesn't work
$('#btnCancel').click(function () {
$('#cboxClose').click()
});
COLORBOX
onComplete: function () {
$("#cboxClose").click(function (e) {
// stop any other script from firing
e.stopPropagation();
if (confirm('are you sure you want to leave?')) {
$.colorbox.close();
// ensure that the binding is removed when closed
$("#cboxClose").unbind();
}
});
} // close oncomplete

The issue here is that colorbox registers a click handler on the cboxClose element. As a result, neither stopping bubbling nor preventing the click (by returning false in a click handler) will have any effect because the colorbox handler is already registered. The only way of stopping that handler from being run is to unbind it. However, to do that you need a reference to the handler, which you won't get without modifying the colorbox code.
In any case, that's what's going on and why the code you have above doesn't work. Another option for you would be to override the colorbox close function (which is the public colorbox method that is called by colorbox's close button handler). All you need is this:
$.colorbox._close = $.colorbox.close;
$.colorbox.close = function() {
if(confirm("Close?")) {
$.colorbox._close();
}
}
The down side (which may not be an issue in your situation) is that this will affect all colorboxes on the page.

I solved this issue by making this method and binding it to the cancel button
var originalClose = $.colorbox.close;
$.colorbox.close = function (e) {
var response;
var formChanged = localStorage.getItem("isFormChanged");
var saveClicked = localStorage.getItem("saveClicked");
if (formChanged == "true" && saveClicked == "false") {
response = confirm('Do you want to close this window? All your changes will not be saved');
if (!response) {
return
}
}
originalClose();
};
<input type="button" value="Cancel" id="btncancel" onclick="parent.$.colorbox.close()"/>

JavaScript Hide Element When Clicking Anywhere on Page

I have a sliding JS menu that opens when you click the noty_menu link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?
Here's the relevant code:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});

You could catch a click on the body:
$('body').click(function() {
/* close menu */
});
But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
return false;
});
(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).
You may also want to prevent clicks inside the menu from closing it:
$('ul.the_menu').click(function () {
return false;
});
Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.

u can use
$('body').click(function(){
//ur code
});
to do this

You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:
var menu=$('ul.the_menu');
$(document).on('click',function(){
if(menu.height>0) {
menu.slideToggle('medium');
}
});