Call script or css style in the update panel

Question

I am using a script on a page due to which the style of dropdown , checkbox and textbox get changes, but if i put dropdown or any other tool inside the updatepanel the script of that tool is not called.

This is my html part

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

I am facing the following problem:

When the page gets load script is applied to the dropdown is shown but whenever one of the dropdown is select changes both of the dropdown script gets removed.

http://stackoverflow.com/questions/418072/asp-net-updatepanel-and-javascript — Adrian Iftode, Jun 15 '13 at 14:59
@AdrianIftode, Thankyou for your reply, i had read your given article , but as i am a starter of asp.net i was not able to understand that, i am giving u my html code please help me for that — Mitesh Jain, Jun 16 '13 at 09:41
@AdrianIftode i have tried as your given link and also as Tomasz Nguyen method but its not working.....as both method are same but its still not working — Mitesh Jain, Oct 30 '13 at 08:06

score 0 · Answer 1 · edited Aug 08 '13 at 20:22

0

Make sure the onselectedindexchanged="DropDownList1_SelectedIndexChanged" code behind handler is referencing the current object whcih is the update panel

EG:

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

edited Aug 08 '13 at 20:22

Jimbo

25,790
15
86
131

answered Aug 08 '13 at 20:05

Lincy

11
1

Also on writing Response.Write("hi"); in the dropdownlist select index change all get fine how??? – Mitesh Jain Aug 09 '13 at 12:47

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Check answer on 418072, answer on 1626515, and the following how to.

The problem is the following. When your page gets loaded, the browser applies the jqTransform plugin to the form and the plugin adds classes to relevant tags.

When you select an item in the dropdown menu, the browser refreshes the data and removes the classes added by the plugin. That's why the elements are not anymore styled as expected.

The solution is to apply the plugin to the form after each refresh.

Try the following code:

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

I'm unable to test the code, but I hope it helps you further.

edited May 23 '17 at 12:28

Community

1
1

answered Oct 28 '13 at 09:49

Tomasz Nguyen

2,561
22
25

i have tried but on the first load the script is not calling to that dropdown – Mitesh Jain Oct 28 '13 at 11:06
Check my comments in the talk – Tomasz Nguyen Oct 28 '13 at 11:16
1 more thing ....i have put dropdown in update panel than how the browser get refreshes?? as u told in answer that "When you select an item in the dropdown menu, the browser refreshes the data and removes the classes added by the plugin. That's why the elements are not anymore styled as expected." – Mitesh Jain Oct 28 '13 at 11:47
Ah, my description was not completely accurate. The browser does not refresh the page, but only refreshes the data. – Tomasz Nguyen Oct 28 '13 at 11:50

Call script or css style in the update panel

2 Answers2

Linked