Javascript in update panel doesn't work after partial postback

问题

 <script type="text/javascript">
        $(function () {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="TextBox1" class="datePicker" runat="server"></asp:TextBox>
    <asp:UpdatePanel ID="holder" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:DropDownList runat="server" ID="ddl_RespondBy" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged">
                <asp:ListItem Selected="True">1 Hour</asp:ListItem>
                <asp:ListItem>Other</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="txt_RespondBy" class="datePicker" Visible="true" runat="server" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
</asp:Content>

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (ddl_RespondBy.SelectedItem.Text == "Other")
        {
            txt_RespondBy.Visible = true;
        }
        else
        {

        }
    }

I do partial post back with the update panel, I have two text box one outside update panel and one inside, when I select other from the dropdown and try to open the calendar inside the txt_RespondBy text box it doesn't show, but the text box outside update panel shows the calendar. why is Javascript not working inside update panel after partial postback

回答1:

Place your datetimepicker initialisation code in the pageLoad function, which is called whenever the page loads (asynchronously or synchronously).

<script type="text/javascript">
    function pageLoad(sender, args) {
        $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
    }      
</script>

回答2:

You can use pageLoad or .live:

Reference info: $(document).ready() and pageLoad() are not the same

.live:

Jquery .live works but not with .datepicker

$(function(){
    $('.datePicker').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
    });
});

pageLoad():

function pageLoad(sender, args) {
    $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}

回答3:

I understand this is a old question but then also I am posting one more answer here if someone visit this page now or in later times for help. one can use

$(document).on()

as it makes sure that controls bind to the events whenever page loads. Its job is Similar to page load event but you can say syntax is different. And almost for anything and everything this works. I have more than 50 controls in a panel and all to perform different task and I never got into trouble.. not even once as i was using this function.

     $(document).on('eventName', 'element' , function(){
     //your code to perform some task; 
});

eventName can be any event - like click, change, select..

And

Element - can be a name, classname, id

example - as above question -

html -

<script src="lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<input type="text" class="datePicker" data-provide="datepicker-inline" data-date-format="mm/dd/yyyy">

Javascript -

$(function(){
     $(document).on('click', '.datePicker' , function(){
     $(this).datepicker();
    });
});

来源：https://stackoverflow.com/questions/7823969/javascript-in-update-panel-doesnt-work-after-partial-postback

标签

javascript

jquery

ASP.NET

updatepanel

ajaxcontroltoolkit