Question

我的页面中有几个选项卡，在一个选项卡中，当我选择第一个下拉菜单时，我正在尝试更改另一个选项卡。我正在使用updatepanel和脚本管理器。问题是我写了一个datepicker javascript函数，如果我没有选择下拉框，它第一次正常工作，但当我选择下拉框时，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的需求，因此请从代码隐藏中删除它。

更新面板时javascript无法正常工作

1 个答案: