Search jQuery

jQuery Forum

Datepicker not working unless page is clicked

in Using jQuery UI • 1 year ago

OK, I have an interesting problem. The page has a datepicker on it. When the page first loads I'm required to click somewhere on the page (just in blank space) and then click the datepicker in order for it to come up. If the page loads and I immediately move the mouse to the date picker it does not load. I think the problem is related to the menu bar that is on the page (this menu bar was created by another programmer and is a created using php and jquery). Why could this be happening? I'm thinking that it is related to his code and its halting javascript from being executed until the focus is on another part of the page (just a guess, i'm very new at this). Is there a way to make the focus change automatically?

I'm not sure if I explained myself well, so if you have any questions about the situation I'll try to explain better. Thanks for your help.

talonosi

Replies(9)

talon.osi

Re: Datepicker not working unless page is clicked

1 year ago

ok, I have an update. it looks like maybe the problem is ajax related. I was mistaken on my previous post about when the problem exists. It only happens when datepicker was loaded via ajax. Here is the setup. a <div> is loaded with content from another .html file via the jquery method load(). datepicker then has to be called in conjuction with the live() function in order to work properly. the datepicker will not come up in unless I click somewhere else on the page. Any thoughts? Thanks.

The html file that is called with load()

<div>
<p>Date: <input type="text" id="date"></p>
</div>
<script type="text/javascript">
$j(document).ready(function()
{
$j('#date').live('click',function(e){
e.preventDefault();
$j("#date").datepicker({
});
});
});
</script>

benjamin...

Re: Datepicker not working unless page is clicked

1 year ago

Just call the .datepicker() function in the success callback of your .load() function. You misunderstood the use of the .datepicker() function. .datepicker() just initialises the datepicker control on your selected elements. There is a parameter for the behaviour of the datepicker. The default is when your input field gets focus. So when you click your input field the first time your datepicker gets initialised. Then you click anywhere in the page and when you click into your input field the datepicker IS initialised and behaves in the default manner and that is if the input field gets focus it shows up.

Kind Regards,
Benjamin Paap

talon.osi

Re: Datepicker not working unless page is clicked

1 year ago

Thanks for your reply. what do you mean by call the datepicker funciton. Could you give me a code example? Sorry for the lack of understanding.

talon.osi

Re: Datepicker not working unless page is clicked

1 year ago

How do I call the datepicker function in success of the .load function?

kbwood.au

Re: Datepicker not working unless page is clicked

1 year ago

Something like this:

$('#mydiv').load('newContent.php', function() {
$(this).find('#date').datepicker();
});

talon.osi

Re: Datepicker not working unless page is clicked

1 year ago

awesome. Thanks, that Worked perfectly. Could you help me understand what is actually happening? is the function finding the 'date' ID and then initializing datepicker with datpicker()? Thanks again.

kbwood.au

Re: Datepicker not working unless page is clicked

1 year ago

The load function calls newContent.php and puts the resulting HTML into #mydiv. Once complete it invokes the callback function, which then looks for the #date field within the newly loaded DOM under this (#mydiv) and initialises it with the datepicker functionality.

talon.osi

Re: Datepicker not working unless page is clicked

1 year ago

Is there a way to accomplish the same without using a callback function? The problem is that using a callback function would essentially put all of my jquery code that would be included in newContent.php into the main page. This would be much harder to maintain. I posted this question here as well http://forum.jquery.com/topic/jquery-use-in-a-page-with-multiple-panels#14737000001166119

kbwood.au

Re: Datepicker not working unless page is clicked

1 year ago

You could use the callback in the load to invoke a new function loaded in the new content, thus keeping them separated.

Top Reply

Response title

Attachments

jQuery Forum

Datepicker not working unless page is clicked

Replies(9)

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Re: Datepicker not working unless page is clicked

Statistics

Tags

Actions

Related Posts