javascript не работает при обновлении панели

Question

На моей странице есть несколько вкладок, и на одной вкладке я пытаюсь изменить другой снимок, когда я выбираю первый снимок. Для этого я использую updatepanel и диспетчер сценариев. Проблема в том, что я написал javascript функцию datepicker, и она отлично работает в первый раз, если я не выбираю раскрывающийся список, но когда я выбираю раскрывающийся список, javacript не работает. Будет полезно, если кто-то сможет определить, что я делаю неправильно.

<asp:ScriptManager ID="ScriptManager1" runat ="server"></asp:ScriptManager> 
<div id="requestHistory" class="tab-pane"> 
<asp:UpdatePanel ID="UpdatePanelCRHistory" runat="server" CssClass="row"  DefaultButton="btnSearch" UpdateMode="Conditional"> 
<ContentTemplate> 
    <div class="colmd-3 col-sm-3 col-xs-3 responsive-filterbar"> 
    <asp:DropDownList runat="server" ID="drpCRHistoryFramework" ClientIDMode="AutoID" DataTextField="title" DataValueField="frameworkID" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="drpCRHistoryFramework_SelectedIndexChanged"> 
    <asp:ListItem Selected="true" Text ="--Framework--" value="0" ></asp:ListItem> 
    </asp:DropDownList>     
    </div> 
    <div class="colmd-3 col-sm-3 col-xs-3 responsive-filterbar"> 
    <asp:DropDownList runat="server" ID="drpCRHSkillName" ClientIDMode="AutoID" DataTextField="skillName" DataValueField="skillID" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="drpCRHSkillName_SelectedIndexChanged"> 
    </asp:DropDownList> 
    </div> 
    <div class="colmd-3 col-sm-3 col-xs-3 responsive-filterbar"> 
    <asp:DropDownList runat="server" ID="drpCRHLevel" ClientIDMode="AutoID" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="drpCRHLevel_SelectedIndexChanged"> 
    </asp:DropDownList> 
    </div> 

    <div class="colmd-3 col-sm-3 col-xs-3 responsive-filterbar input-group date" style="padding-left: 15px;" id="dpDate"> 
    <asp:TextBox runat="server" ID="txtFromDate" ClientIDMode="Static" TextMode="SingleLine" CssClass="form-control datepicker" placeholder="0"></asp:TextBox> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 

    <asp:TextBox runat="server" ID="txtToDate" ClientIDMode="Static" TextMode="SingleLine" CssClass="form-control datepicker" placeholder="0"></asp:TextBox> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div><br /><br /> 
     <div class="col-md-3 col-sm-12 col-xs-12 responsive-filterbar"> 
      <div class="input-group"> 
      <asp:TextBox runat="server" ID="canidateRequestHistorySearchTextBox" ClientIDMode="Static" CssClass="form-control"></asp:TextBox> 
      <span class="input-group-btn"> 
       <asp:LinkButton runat="server" ID="canidateRequestHistorySearchLinkButton" ClientIDMode="Static" OnClick="btncandidateRequestHistorySearch" CssClass="btn btn-primary" CausesValidation="false" ><span class="glyphicon glyphicon-search"></span></asp:LinkButton> 
      </span> 
      </div> 
     </div> 
     <br/><br/> 
     </ContentTemplate> 
     </asp:UpdatePanel> 

Код За

protected void drpCRHistoryFramework_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    frameworkID = Convert.ToInt32(drpCRHistoryFramework.SelectedValue); 
    drpCRHSkillName.DataSource = CompetencyManager.GetCompetencyByFrameworkAndMentoringRequests(((int)Session[CommonHelper.Constants.CURRENT_CANDIDATE]), frameworkID); 
    drpCRHSkillName.DataBind(); 
    drpCRHSkillName.Items.Insert(0, new ListItem("-- Competency --", "0")); 
    string script = @" 
     $(function() { // will trigger when the document is ready 
      $('.datepicker').datepicker(); //Initialise any date pickers 
     })"; 
    ScriptManager.RegisterClientScriptBlock((sender as Control), this.GetType(), "alert", script, true); 
    //ScriptManager.RegisterStartupScript(UpdatePanelCRHistory, UpdatePanelCRHistory.GetType(), "alert",script, true); 
    UpdatePanelCRHistory.Update(); 
} 

Answer 1

Вопрос заключается в том, что вы установили JavaScript только называться, когда страница готова. Когда вы делаете обновление с помощью панели обновления, ваша страница не загружается снова, но отдельные разделы обновляются. В этих разделах содержится html, для которого требуется ваша функция javascript, чтобы снова инициализировать элементы управления.

Вы можете активировать элементы управления инициализацией как для начальной загрузки, так и для обновленных панелей обновлений, используя следующее (вводя это по голове на MacBook, чтобы не проверить его), добавив его в нижнюю часть главной страницы или в в нижней части конкретной страницы:

<script type="text/javascript"> 
function PartialPostBackFinished(sender, args) { 
    var updatePanels = args.get_panelsUpdated(); 
    for (i = 0; i < updatedPanels.length; i++) { 
     //Do whatever needs to be triggered for each updated update panel 
     InitializeControls(updatedPanels[i]); 
    } 
} 

function InitializeControls(container) { 
    $('.datepicker', container).datepicker(); //Initialise any date pickers 
} 

if (Sys != undefined) { 
    //There's a ScriptManager on the page 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(PartialPostBackFinished); 

    if (!prm.get_isInAsyncPostBack()) { 
     //Trigger initialization for synchronous post back triggered outside updatepanels 
     InitializeControls(document); 
    } 
} 
else { 
    //Trigger initialization for pages without ScriptManager 
    InitializeControls(document); 
} 
</script> 

Это будет также заменить необходимость RegisterClientScriptBlock, так что удалить, что от вашего кода позади.