DatePicker does not hide as usual when clicked outside of the input field. The user had to select a date, click on the close button or press the Esc button from the keyboard explicitly to close the Datepicker.
DatePicker version: 5.1.1
As a fix I tried to run the following code segment on the browser console, then it worked. However, when I put the code on the Javascript file, the fix is not working.
$('input').on( 'blur', function () {
if( $(this).hasClass( 'is-datepick' ) ) {
console.log( 'Datepicker is closed!' );
$.datepick.performAction($(this), 'close');
// plugin.performAction(elem, action);
}
} );
How to solve this issue? Thanks in advance.
Related
I have a modal window that allows users to submit a form as one of the call-to-actions. However, clicking 'Submit' closes the modal window but I do not want it to. Here is the page: infowest.com/residential-internet.
To activate the modal window, the user clicks the yellow-orange "Get started" button on any of the "cards" of Internet options. Then to fill out and submit a form, the user clicks the "Request a callback" button. Actually, come to find, clicking ANYWHERE accept the "Request a callback" button closes the modal window, not just clicking the 'Submit' button.
I tried using this code:
if ( $(event.target).is('.modal-window-content') ) {
return false;
}
if ( $(event.target).is('input') ) {
return false;
}
to keep the modal from closing, which worked but didn't allow the form to submit or even try to submit. The form uses Ajax. It is the WP Contact Form 7 plugin.
I am using jQuery that I'm just making up as I go but I've never really been taught jQuery so I'm assuming I'm making errors in the js code. Here is my code:
var pagePosition;
$('.js--activate-cta-modal').click(function() {
if ( (!$(this).hasClass('.active')) && (!$('body').hasClass('modal-active')) ) {
pagePosition = $(window).scrollTop();
$('.cta-modal-window').css( "margin-top", pagePosition );
$(this).addClass("active");
$('body').addClass("modal-active");
$('body').css( "top", -pagePosition );
return false;
}
if($(this).hasClass('active')) {
$(this).removeClass('active');
$('body').removeClass('modal-active')
$('body').css( "top", "0" );
$('body').scrollTop(pagePosition);
}
});
$('.js--activate-cta-modal').click(function (e) {
e.stopPropagation();
});
$('.modal-overlay').click(function() {
$('body').removeClass('modal-active');
$('.js--activate-cta-modal').removeClass('active');
$('body').css( "top", "0" );
$('body').scrollTop(pagePosition);
});
$('.cta-modal-window').click(function() {
// if ( $(event.target).is('.modal-window-content') ) {
// return false;
// }
// if ( $(event.target).is('input') ) {
// return false;
// }
$('body').removeClass('modal-active');
$('.js--activate-cta-modal').removeClass('active');
$('body').css( "top", "0" );
$('body').scrollTop(pagePosition);
});
$('.close-modal-window').click(function() {
$('body').removeClass('modal-active');
$('.js--activate-cta-modal').removeClass('active');
$('body').css( "top", "0" );
$('body').scrollTop(pagePosition);
});
I greatly appreciate any and all help! Thank you!
It's important not to confuse Event.stopPropagation() and Event.preventDefault(), and to understand exactly what they do.
Event.stopPropagation() will prevent events from bubbling up through the DOM. Normally if you click on an element its event will attempt to fire, and then the parent element will attempt to fire its version of the event, and so on up the tree. This is used to contain events to a certain level on the DOM.
Event.preventDefault() stops the default action that elements might have from triggering. The most common one is using this on a form to stop it from submitting. This is used to cancel out the default behavior of elements with certain events.
Here is an example of a common modal staging technique. http://codepen.io/Oka/pen/xGKJVJ
(If you're new to CodePen, click the eyeballs to view any compiled code. I've used Jade and SCSS here. The page is also running Normalize.css)
With this technique we only need one Event.stopPropagation() to stop similar events from bubbling up from the modal to its container. Clicking anywhere on the modal's container will close the modal, and so will the small close button. You can expand this to suit your needs, the key is the modal should never bubble to its container.
JS
var open = $('.modal-open'),
close = $('.modal-close'),
modal = $('.modal'),
container = $('.modal-container');
function openModal (e) {
container.addClass('active');
}
function closeModal (e) {
container.removeClass('active');
}
open.on('mouseup', openModal);
close.on('mouseup', closeModal);
container.on('mouseup', closeModal);
modal.on('mouseup', function (e) {
e.stopPropagation();
});
(Keep in mind some of this stuff is IE9+. Make sure to check browser compatibility if you have legacy needs.)
I now understand a little more of what
$('element').click(function (e) {
e.stopPropagation();
});
is for. This is used to not perform the click function of the targeted element. I'll need to do some more reading on this but I solved the issue by using this code to target the div.modal-window-content.
In my jquery mobile app, I want to run a function when the default page shows. This code works
$(document).unbind("pageshow").on("pageshow","#login-page",function(){
GLOBAL_DATA.user = null;
alert("reset");
});
But the problem is when I click a button to go to another page, then when I click the back button to go back to the default page, the pageshow function does not trigger. How can I get it to do that?
Thanks
For jQM 1.4.x try using the pagecontainer widget show event instead:
$(document).on( "pagecontainershow", function( event, ui ) {
alert( "The page being shown is: " + ui.toPage.prop("id") );
});
DEMO
I make a simple demo on which I just add rows dynamically. When I press add button and fill the name in input field then press ok it generate a row. So there is a Star icon in that I need to show pop over on click. I am able to show pop over. Now I need to hide that pop over when user click outside. I googled it and find one solution which works fine also but it is not like angular can you please tell how I can hide using angular way ..or another way ..?
Second problem is: when I generate a second row and click on the star icon it is not hiding the previous open popovers - why?
http://plnkr.co/edit/46RWSLtxxJgvw5MF1PmM?p=preview
I am able to hide pop over when click outside like this but this jQuery way do you suggest other way ?
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' &&
!$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
I'm not sure why you're not using one of the AngularJS libs that provide a Bootstrap popover, like this one to which I've contributed, but the general "angular" solution is to track the state of the popover in the directive and react on click when necessary. E.g.:
// in the link method
isOpen = false
function openPopover () {
// ... open the popover ...
// track the state
isOpen = true;
}
function closePopover () {
// ... close the popover ...
// track the state
isOpen = false;
}
function handleClick ( event ) {
if ( isOpen ) {
event.preventDefault();
event.stopPropagation();
closePopover();
}
};
$rootElement.on( 'click', handleClick );
scope.on( 'destroy', function () {
$rootElement.off( 'click', handleClick );
});
Is there a way to programmatically disable the right click of the mouse on a particular element inside the editor?
I need this to use this functionality to disable the resizing of one particular table element inside the editor, which is managed by the tabletools plug-in.
The most correct solution would be to disable proper command when such table is selected, but I see that unfortunately it doesn't disable menu item for that command, but only prevents executing that command. So less cool solution has to be used:
editor.on( 'contentDom', function() {
editor.editable().attachListener( editor.editable(), 'contextmenu', function( evt ) {
console.log( evt.data.getTarget() );
evt.stop();
evt.data.preventDefault();
}, null, null, 0 );
} );
This will disable context menu completely. You can add proper condition based on evt.data.getTarget().
You can disable right-click on particular elements using jQuery as:
$('img').bind('contextmenu', function(e) {
return false;
});
Refer this question for more details.
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.