17
votes

OK - so am working on a system that uses a custom datepicker control (I know there are other ones out there.. but for consistency would like to understand why my current issue is happening and fix it).

So its a custom user control with a textbox and on Page_PreRender does this:

protected void Page_PreRender(object sender, EventArgs e)
    {

        string clientScript = @"
        $(function(){
        $('#" + this.Date1.ClientID + @"').datepicker({dateFormat: 'dd/mm/yy', constrainInput: true});
        });";
        Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, clientScript, true);

        //Type t = this.GetType();
        //if (!Page.ClientScript.IsStartupScriptRegistered(t, this.ClientID))
        //{
        //    Page.ClientScript.RegisterStartupScript(t, this.ClientID, clientScript, true);
        //}
    }

Ignore commented out stuff - that was me trying something different - didn't help.

My issue is that this all works fine when I load the page. But if I select something from a dropdownlist causing a page postback - when I click into my date fields they stop working. As in I should be able to click into the textbox and a nice calendar control appears. But after postback there is no nice calendar control appearing!

It's currently all wrapped (in the hosting page) inside an update panel. So I comment out the update panel stuff and the dates are working after page postback. So it appears to be something related to that update panel.

Any suggestions please?

Thanks!!

1

1 Answers

31
votes

Have you tried ScriptManager instead of Page.ClientScript? I looked at some code that I'd written before with UpdatePanels and jQuery and I'd used ScriptManager. I think that the script is not available during a partial postback if it is not registered with the ScriptManager.

Looks like this:

ScriptManager.RegisterStartupScript(Page, this.GetType(), "DatePickerScript", clientScript, true);