I want to use severall datepickers one one page, so i putt the datepicker in a function. The function is triggered on a onfocus event. This works perfect in IE, also in firefox/chrome, but in Firefox i have to click on the input field, lose focus and click again before i get a datepicker....
See the example: http://www.huurhulp.nl/prijzen.php
First click on the second bullet "wij zijn bepaalde periodes gesloten" To unhide the input fields.
Any idea how to get it working in one click in firefox?
Instead of creating your datepickers in onfocus events create them in your $(document).ready block.
The datepicker plugin internally uses the focus event to show the datepicker widget so using it to create the widget is a bad idea.
Looking at your code doing something like this should work:
$(function() {
$('.datums').datepicker({
//List your options here.
});
});
Related
I've just created a simple textbox where inside I binded the .click event to show the Datepicker, anyway, seems that at first click the Datepicker can't show, but if I click outside the control and then click again over the textbox I can see the Datepicker, I wonder why happen this?
Check out my code here:
<input type="text" id="calendar" placeholder="calendar">
$(function()
{
$('#calendar').click(function()
{
$(this).datepicker();
});
});
FIDDLE.
You are initializing Date picker on your text box click. You have to initialize on document ready method if you want to Open date picker immediate after page load
Change your initializing code to
$(function()
{
$('#calendar').datepicker();
});
For your reference fiddler updated
You don't have to use the click event to start the date picker.
All you have to do is remove the click event and it will work!
The date picker is already attached to your input box and will handle the events by itself.
Calling datepicker() does not invoke the calendar display. What datepicker() did was to attach a 'show calendar' event on input-focus. That's the reason why you see the calendar only when you put the focus back on the input field (not on every click of #calendar element).
If you want to trigger the display of calendar due to some other event (like button click), you can call $('#calendar').datepicker('show').
The jQueryUI datepicker can be setup with a Today and Done button. See http://jqueryui.com/datepicker/#buttonbar.
How can I trigger some event (i.e. alert('close');) whenever the Done button is clicked, and then continue with the buttons default functionality (i.e. closing the calender).
Note that I do not wish to use the onClose() method as this is triggered when the calender is closed through any means (i.e. clicking off the calender), and not necessarily when the Done button is clicked.
PS. I don't think it is relevant, but I am using the datepicker in connection with http://trentrichardson.com/examples/timepicker/
You can create a separate handler by using event delegation.
$(document).on('click', 'button.ui-datepicker-close', function(){
alert('close')
});
I bound the event handler to the Done button as it's not entirely clear what behavior you want although I think this is what you are asking
DEMO
Hi i am using a function called LoadCoordinates. My first thougt was i need to read this onload.. but after trying a lot of different codes, i cant..
This is how its triggered normally
$("#address1").blur(function()
{
loadCoordinates("");
});
The problem is to "run" this i have to click the input and then clic the body (so address1 lost focus and blur is triggered)
I have tried to load this on page load using seveeral different codes like
$(loadCoordinates(""));
or this
$(function(){
loadCoordinates();
$("#address1").blur( loadCoordinates );
});
This is not working, i think it has to do something because my select lists are using "SELECT BOX IT" http://gregfranko.com/jquery.selectBoxIt.js/
Anyway..
How can i make or trigger the same as is triggering "blur()" on the address1 input.. but when the page is ready. and after selectbox it has loaded & builded the lists with options..
Thanks
This will trigger blur. You need to make sure you do this before applying any plugin to the element, or have to use the API of the plugin to affect and changes
$("#address1").blur( loadCoordinates ).blur();
DEMO
I have the following situation:
One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event.
When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.
But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.
Chrome and IE is ok, Firefox is not.
Do somebody know a workaround in Firefox?
thanks,
Istvan
After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:
Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
Therefore a pure CSS solution would definitely never work
A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers
See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.
$(document).click(function() {
console.log("document");
});
$("body").click(function() {
console.log("body");
});
$("select").click(function(e) {
e.stopPropagation();
console.log("select");
});
Edit: Sorry, posted an old JSFiddle.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.