当其他事件发生时,使用javascript隐藏的文本框变为可见

时间:2013-12-16 17:10:41

标签: javascript asp.net ajax

当下拉值改变时(来自ddlSource),我有javascript会隐藏几个文本框,这是正常的。接下来,当用户在另一个文本框中输入某个值时,我有一个ajax调用来填充少量标签。在加载表单后调用此ajax后,隐藏的文本框现在可见。我哪里出错?

<asp:DropDownList ID="ddlSource" runat="server" 
                  TabIndex="80" EnableViewState="True" CssClass="Input" 
                  Width="162px" onchange="DisableEnable();">

    <asp:ListItem Text="" Value="" />
    <asp:ListItem Text="x" Value="x" />
    <asp:ListItem Text="y" Value="y" />

</asp:DropDownList>

我的javascript for enabledisable是

function DisableEnable() {
    var DropDown_Source = document.getElementById("<%= ddlSource.ClientID %>")

    if (DropDown_Source.options[DropDown_Source.selectedIndex].text == "y") {

        document.getElementById('txtSupplementNbr').style.visibility = 'visible';
        document.getElementById("txtDelDate").style.visibility = 'visible';
        document.getElementById('lblSupplementNbr').style.display = '';
        document.getElementById('lblDelDate').style.display = '';
    }

    else {
        document.getElementById("txtSupplementNbr").style.visibility = 'hidden';
        document.getElementById("txtDelDate").style.visibility = 'hidden';
        document.getElementById('lblSupplementNbr').style.display = 'none';
        document.getElementById('lblDelDate').style.display = 'none';
    }
}

进行ajax调用的文本框

<asp:UpdatePanel id="UpdatePaneltxtTrialCaseNbr" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtTrialCaseNbr" runat="server" Text="" tabindex="100" 
                     Width="200px" maxlength="120" cssclass="input" 
                     OnTextChanged="GetCaseSummaryCivilPlaintiffInfo"  
                     onblur="SearchTrialCaseNbr();GetCasePlaintiffInfo();" 
                     AutoPostBack="false" />
    </ContentTemplate>
</asp:UpdatePanel>

在它执行OnTextChanged()函数后,我看到之前隐藏的所有控件。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

由于对其初始状态的ajax请求,重新呈现html。使用Sys.WebForms.PageRequestManager endRequest Event在ajax请求DisableEnable()上调用ends来更新表单元素的状态。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
     DisableEnable();
}

您还可以在更新面板中放置所有更改的控件,以便在ajax调用之间由asp.net维护其状态。

答案 1 :(得分:0)

您不需要在切换功能中处理可见性和显示。主要区别在于可见性隐藏元素但保持其位置,摆脱它。显示值应该适合您。这里有一个更简单的显示切换脚本,传递一个对象,它将检查它是否已经显示。

function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
}

现在您只想确保只在您需要时调用它,并且onchange将继续切换显示。我相信@Adil的回复会管理你问题的这一部分。