I am trying to create a JQuery DatePicker Asp.Net ServerControl
To atach a datepicker to a TextBox I am creating a JQuery line of code from c# code behind and output it directly to the webpage using ClientScript.RegisterStartupScript()
So if for example there are 3 instance of the DatePicker control with ids: dpfa,dpar,dpen
then the script being rendered will be:
<script type="text/javascript">
//<![CDATA[
;jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});
;jQuery(function($){$('#dpar').datepicker({dateFormat:'yy/mm/dd',regional:'ar'}).change(function(){validateDatepicker(this,1);});});
;jQuery(function($){$('#dpen').datepicker({dateFormat:'yy/mm/dd',regional:''}).change(function(){validateDatepicker(this,1);});});
//]]>
</script>
Everything works fine except for when I put the datepickers inside an asp.net updatepanel and make an ajax call after the asyncpostback the JQuery functions do not work and the datepickers are not attached to the textboxes.
This is what I tried so far:
I tried to put the scripts on the onclick event of the DatePicker (wich extends asp.net TextBox control) as follows:
1- When I do it this way:
onclick=";jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});"
the datepicker is attached to the textbox but it does not popup and I need to leave the control and click on it again for it to show.
2- I tried to debug some javascript when I came up to the following script that attaches the datepicker to the textbox and shows it on the first click but as you can see an alert will also popup wich is not a good thing and should not happen:
onclick=";jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});alert('hi');"
What is the alert causing? and can it’s behavior be resambled by calling another dummy function but without showing any popups?
My main question: How can I modify the above jQuery functions to work after async postbacks?