在更新面板中调用脚本或css样式

时间:2013-06-15 13:50:43

标签: asp.net css

我在页面上使用脚本,因为下拉列表,复选框和文本框的样式会发生变化,但如果我在更新面板中放置下拉列表或任何其他工具,则不会调用该工具的脚本。


这是我的html部分

<head runat="server">
<title>script not working</title>      
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>

<script language="javascript">
    $(function() {
        $('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });
    });
</script>
</head>
<body>
<form id="form1" runat="server">    
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>                 
            </td>               
        </tr>
        <tr>
            <td>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                            onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                            <asp:ListItem>4</asp:ListItem>
                            <asp:ListItem>5</asp:ListItem>
                            <asp:ListItem></asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>               
        </tr>            
        <tr>               
            <td>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddtrial" runat="server" AutoPostBack="True" 
                            onselectedindexchanged="ddtrial_SelectedIndexChanged">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                            <asp:ListItem>4</asp:ListItem>
                            <asp:ListItem>5</asp:ListItem>
                            <asp:ListItem></asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>           
    </table>   
</form>
</body>

我遇到以下问题:

当页面获取加载脚本时,会显示下拉列表,但只要其中一个下拉列表是选择更改,下拉脚本就会被删除。

2 个答案:

答案 0 :(得分:0)

确保处理程序后面的onselectedindexchanged =“DropDownList SelectedIndexChanged”代码引用当前对象,即更新面板

EG:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "abc", "JavascriptFunctionName();", true);
}

答案 1 :(得分:0)

418072上查看答案,在1626515上回答,以及以下how to

问题如下。加载页面后,浏览器会将jqTransform插件应用于表单,插件会将类添加到相关标签中。

当您在下拉菜单中选择一个项目时,浏览器会刷新数据并删除插件添加的类。这就是为什么元素不再按照预期进行设计的原因。

解决方案是在每次刷新后将插件应用于表单。

请尝试以下代码:

<script type="text/javascript">
    $(function() {
        $('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) 
        {
            $('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });
        }
    });
</script>

我无法测试代码,但我希望它可以帮助您进一步。