I'm using the jquery mobile datebox from here: http://dev.jtsage.com/jQM-DateBox/ and I am setting the calTodayButton to true. The problem I have is when I click the button it just selects today's date which is fine but I also want it to close on click. Any ideas as to the best way to do this?
Try adding an click event to the button which closes the parent container like this
$('.ui-datebox-controls').find('a.ui-btn').on("click",function(){
$(this).parent().parent('.ui-datebox-container').hide();
});
The accepted solution didn't work for me, but this one did:
$('.ui-datebox-controls').find('a.ui-btn').live( 'click', function(){
$(this).parent().parent().parent().parent('.ui-datebox-container').hide();
});
Related
I have a modal and after pressing the password update button, the modal should close and an alert box should appear on my homepage. however, the alert box will not appear when the page is first opened. how can I do it? Do you have any examples you can share?
If you are using the alerts provided by the browser, you have to add a EventListener to your button like:
yourCloseButton.addEventListener("click", () => {
alert("The modal has been closed!");
});
Complementing Apollo79's answer, you can also use an inline event listener, but this is no longer recommended. There are some specific cases for this, but if you really don't need one, use Apollo79's answer instead.
<button id="urButton" onclick="alertAndDisappear()">
or
yourCloseButton.onclick = function(){}
which is equivalent to the first one.
Again, only use these if you really need them
Here is my code:
http://codepen.io/murdocgrjey/pen/LFuto
I tried to close the popover when clicking outside of the content and the button but there's an issue with its content. Apparently I can't hide or destroy the content completely.
When I toggle the popover with the 'trigger' link, it works fine. But whenever I close it by clicking outside of the content, I can still hover the link in the content.
Any solution for this please?
I think you mess with the internal mechanism too much.
Here is the working fiddle: http://codepen.io/anon/pen/utbin
If the target isn't the trigger, just toggle the existing open popover.
Heres a link to working example: http://codepen.io/anon/pen/zhIsm
I just keep latest trigger and click it, whenever document is clicked.
Here is another way (will work with data-api too) http://jsbin.com/aRiZiki/1/edit
This is what I did in order to prevent elements within the hidden popover from being clicked
$('button.new-history').on('hidden.bs.popover', function () {
$(this).next().remove();
})
The idea being that when the popover is hidden, you should remove it from the DOM.
Hope it helps!
I am using jquery and both blur and focusout functions require an extra click after the select box is closed to fire. Is there another way to detect when the select box is immediately closed?
As #samsquanch and #bfavaretto point out in comments here, there seems to be no way to reliably detect, across the current browser generation, when a select list is closed. Which is mildly mind-boggling, but there you are.
I think you're looking for .change(). This will just after you choose any option.
$('select').on('change', function() {
// code
});
And if you want to trigger a change event on page load just try:
$('select').on('change', function() {
// code
}).change(); // trigger initial change
I am using a jQuery DateTimePicker addon (By: Trent Richardson) and it will only close after you select the date AND the time. However some users don't care about the time and they want the Calendar to close after they choose the date only.
I managed to close the Calendar after picking the Date only but I need to implement a double click and not a single click. How do I do that?
Here is my code:
$(jqCompletedEndID).datetimepicker({
ampm: true,
onSelect: function(){
$(this).datepicker("hide"); $(this).blur();
}
});
I know there is a dblclick event in Javascript but not sure how to apply it in this context.
Thank you!
I have run into the exact same problem / requirement. I tried something very similar to Alex's solution, but it doesn't work because the datetimepicker seems to wipe all styles and event bindings when a day is selected (I assume it's being reconstructed, but haven't checked), making it impossible for the dblclick event to fire.
I've come up with a solution which isn't pretty but does work. You can use the datetimepicker's onSelect event to bind a couple of handlers as follows:
(assuming this._$input is a jQuery reference to the input control being used)
this._$input.datetimepicker({
...
onSelect: function() {
var self = this;
setTimeout(
function () {
$('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
$('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
},
0
);
}
You're probably wondering why I bind both click and double click, particularly in light of my claim above that double click won't work. It seems that in Chrome, FireFox, Safari, and Opera the event will trigger the "click" event, but in IE it will trigger the "dblclick" event. Also, if you're wondering about the setTimeout, it's required because the popup won't be constructed until after the method is finished, so those selectors won't return anything if executed without it.
You've no doubt noticed that my solution will also close the picker when the currently-selected date is clicked whether or not it's part of a double-click. This is intentional in my case (and I also trigger the same logic in the beforeShow event to wire the handler so clicking on the currently-selected date will always close the picker). In your case, if you want it to work strictly with double clicks, all I can recommend is that you track the time between clicks and make sure they arrive within some threshold.
Try this...
$('#datepicker').datepicker({
//...
});
$('table.ui-datepicker-calendar a').bind('dblclick', function() {
$('#datepicker').val();
});
You can add a doubleclick event handler on the html tag itself. You would be having a emtpy div for the datepicker, so modify it as
<div id="datepicker" ondblclick="close()"></div>
In the close() function write the code to hide the datepicker div.
I m designing an application for mobile in which I m using jquery datepicker. I have date textbox and a submit button. The calendar opens on the submit button. But the problem is, when I click on any day of the month, this button gets focus and is clicked instead of chosing that day.
Thanks,
Do you mean the button under the datepicker gets focused? I had that issue and solved it by adding a callback function to datepicker which would disable all other inputs when it got activated, then re-enable them again on datepicker close.
Check the documentation, datepicker has callbacks for both open and close.
Edit:
Instead of another reply, I'll post here.
When you init your datepicker, you can pass options, including callbacks. These are the two callbacks you want to use, what I've done here is grabbing all inputs in a variabel called "inputs" by $('#containingdiv').find('input'), then beforeShow I add attribute "disabled" to all the inputs, and on close I simply remove this attribute again.
date.datepicker({
beforeShow: function() {
inputs.attr("disabled","disabled");
},
onClose: function() {
inputs.attr("disabled","");
}
});