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.

@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
– Mitesh Jain, Commented Jun 16, 2013 at 9: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
– Mitesh Jain, Commented Oct 30, 2013 at 8:06

Jimbo · Accepted Answer · 2013-08-08 20:22:20Z

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 8, 2013 at 20:22

Jimbo

26.7k16 gold badges93 silver badges135 bronze badges

answered Aug 8, 2013 at 20:05

Lincy

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Mitesh Jain Over a year ago

Also on writing Response.Write("hi"); in the dropdownlist select index change all get fine how???

Community · Accepted Answer · 2017-05-23 12:28:14Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Oct 28, 2013 at 9:49

Tomasz Nguyen

2,62125 silver badges25 bronze badges

4 Comments

Mitesh Jain Over a year ago

i have tried but on the first load the script is not calling to that dropdown

Tomasz Nguyen Over a year ago

Check my comments in the talk

Mitesh Jain Over a year ago

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

Tomasz Nguyen Over a year ago

Ah, my description was not completely accurate. The browser does not refresh the page, but only refreshes the data.

Collectives™ on Stack Overflow

Call script or css style in the update panel

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related