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

【问题标题】：Call script or css style in the update panel在更新面板中调用脚本或 css 样式
【发布时间】：2013-06-12 00:56:28
【问题描述】：

我在页面上使用了一个脚本，因此下拉菜单、复选框和文本框的样式发生了变化，但是如果我将下拉菜单或任何其他工具放在更新面板中，则不会调用该工具的脚本。

这是我的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>

我面临以下问题：

当页面加载脚本被应用到下拉列表时，当下拉列表之一被选择更改时，两个下拉脚本都会被删除。

【问题讨论】：

stackoverflow.com/questions/418072/…
@AdrianIftode，谢谢您的回复，我已经阅读了您的文章，但由于我是 asp.net 的初学者，我无法理解，我给您我的 html 代码，请帮助我为那个
@AdrianIftode 我已尝试作为您给定的链接以及 Tomasz Nguyen 方法，但它不起作用.....因为两种方法相同但仍然不起作用
对不起 Mitesh，但我没有其他想法。

标签： asp.net css

【解决方案1】：

确保处理程序后面的 onselectedindexchanged="DropDownList1_SelectedIndexChanged" 代码引用的是更新面板的当前对象

EG：

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

【讨论】：

也在写 Response.Write("hi");在下拉列表中选择索引更改都很好如何？？？

【解决方案2】：

查看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>

我无法测试代码，但希望它能进一步帮助您。

【讨论】：

我已经尝试过了，但在第一次加载时脚本没有调用该下拉菜单
在谈话中检查我的 cmets
还有一件事......我在更新面板中放置了下拉菜单，而不是浏览器如何刷新？正如您在回答中所说的那样“当您在下拉菜单中选择一个项目时，浏览器会刷新数据并删除插件添加的类。这就是为什么元素不再按预期设置样式的原因。”
啊，我的描述并不完全准确。浏览器不刷新页面，只刷新数据。