Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > ASP.NET 4 General Discussion
|
ASP.NET 4 General Discussion For ASP.NET 4 discussions not relating to a specific Wrox book
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 4 General Discussion section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 4th, 2013, 09:27 AM
Authorized User
 
Join Date: Apr 2006
Posts: 79
Thanks: 1
Thanked 0 Times in 0 Posts
Send a message via AIM to anujrathi Send a message via MSN to anujrathi Send a message via Yahoo to anujrathi
Default Problem with JQuery datepicker inside update panel while setting its initial value

Hi,
I am using datepicker in my page for user's date of birth. It is working fine when user first time enters his/her date of birth. But when he want to update date of birth then datepicker doesn't set its initial value. But It can set another date when user selects date. It doesn't show previous selected date.
My datepicker is inside an Update Panel. below is code the which I am using.

Because My datepicket is inside update panel, that's why I have used function & then I have registered this function. So that jqiery will also work after updating the panel.
For Creating the datepicker control:
Code:
function BindJQueryControls() { 
$('#DateOfBirth').datepicker({ 
altField: '#<%# txtDateOfBirth.ClientID %>', 
altFormat: "mm/dd/yy",
changeMonth: true, 
changeYear: true, 
showOtherMonths: true, 
selectOtherMonths: true });
$('#DateOfBirth').datepicker("option", "showAnim", "blind");
}
I have placed below script inside my update panel:
Code:
<script type="text/javascript">  
if (typeof BindJQueryControls== 'function') 
Sys.Application.add_load(BindJQueryControls);  </script>
Above Code is working fine when User select date.
At the time of update, I am using below script from Code behind to set datepicker's value.
Code:
string strDOBScript = @"$(function () { $('#DateOfBirth').datepicker(""setDate"", """ + strDateOfBirth + @""");});";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "insexdt", strDOBScript , true);
I have also tried hard coded data at the end of page:

$('#DateOfBirth').datepicker("setDate", "01/12/2013");
But doesn't work.

If I place above code in a separate page without update panel, it is working smoothly.

Can someone please tell me where I am doing wrong?

--
Anuj Rathi
 
Old January 4th, 2013, 09:55 AM
Friend of Wrox
 
Join Date: Sep 2005
Posts: 166
Thanks: 2
Thanked 33 Times in 33 Posts
Default

BindJQueryControls is called on page load, not immediately, so $('#DateOfBirth').datepicker("setDate", "01/12/2013"); will probably run before the datepicker is initialized. Try adding that code to Sys.Application.add_load as well.

I think the RegisterStartupScript is not working because you are registering it against the page, not the UpdatePanel. So try changing it to:

Code:
ScriptManager.RegisterStartupScript(
    updatePanelId, updatePanelId.GetType(), "insexdt", strDOBScript, true);
You could also pass a defaultDate option to the datepicker constructor (see http://api.jqueryui.com/datepicker/#option-defaultDate)

Phil
 
Old January 4th, 2013, 10:22 AM
Authorized User
 
Join Date: Apr 2006
Posts: 79
Thanks: 1
Thanked 0 Times in 0 Posts
Send a message via AIM to anujrathi Send a message via MSN to anujrathi Send a message via Yahoo to anujrathi
Default

Hey, I have found the solution.
We will have to call datepicker outside the function also. Because the datepicker which is inside update panel, will be invoked only when update panel will get update. So, if we have to set its value on first page rendring, then we will have to call it outside function also.
function BindJQueryControls() {
$('#DateOfBirth').datepicker({ altField: '#<%# txtDateOfBirth.ClientID %>',
altFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true });
$('#DateOfBirth').datepicker("option", "showAnim", "blind");
}

apart from above, I have also written:
$(function(
$('#DateOfBirth').datepicker({ altField: '#<%# txtDateOfBirth.ClientID %>',
altFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true });
$('#DateOfBirth').datepicker("option", "showAnim", "blind");
));

rest code behind code is same.

Cheers !!!!





Similar Threads
Thread Thread Starter Forum Replies Last Post
Greeting Cards Image Upload Inside Update Panel asp2go BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 4 October 4th, 2012 04:06 PM
Help, using update panel and updateprogress inside a datalist control ysfkay ASP.NET 3.5 Professionals 0 May 9th, 2010 10:15 PM
Update panel problem abhishekkashyap27 ASP.NET 2.0 Professional 1 August 14th, 2009 10:43 AM
Gridview Update not firing in Update Panel akshay144 Ajax 1 August 13th, 2009 10:20 AM
Setting an initial value for a Checkbox jpullam ASP.NET 2.0 Basics 2 December 7th, 2006 03:05 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.