asp.net update panel issue

Question

0.00/5 (No votes)

See more:

I'm using asp.net. my gridview have a dropdown with select2 script.when i press add button in gridview my select2 script not working. this happens after add update panel. Please help

Here code :

ASP.NET

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
     <ContentTemplate>
         <asp:GridView ID="grdItems" runat="server" AutoGenerateColumns="False" Font-Names="Arial" ClientIDMode="Static" CssClass="table table-striped table-bordered table-hover" Width="100%" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green" AllowPaging="False" ShowFooter="False" OnRowCommand="grdItems_RowCommand" DataKeyNames="RowId,ItemId">
             <Columns>
                 <asp:TemplateField HeaderText="No">
                     <ItemTemplate>
                         <asp:DropDownList ID="ddlNo" Font-Size="12px" runat="server" CssClass="js-example-placeholder-single" Width="100%" AutoPostBack="true" TabIndex="1" OnSelectedIndexChanged="ddlNo_SelectedIndexChanged"></asp:DropDownList>
                     </ItemTemplate>
                     <HeaderStyle Font-Bold="true" Font-Names="Tahoma" Font-Size="12px" Width="15%" BackColor="#8DC894"
                         ForeColor="Green" HorizontalAlign="Left" />
                     <ItemStyle HorizontalAlign="Left" />
                 </asp:TemplateField>
                 <asp:TemplateField HeaderText="Qty(Pcs)">
                     <ItemTemplate>
                         <asp:TextBox ID="txtQty" runat="server" AutoCompleteType="None" Text='<%# Bind("Qty") %>'
                             ClientIDMode="Static" CssClass="form-control text-right" onkeyup="Calculate();"
                             onkeypress="return isNumberKey(event)" TabIndex="2"></asp:TextBox>
                     </ItemTemplate>

                     <HeaderStyle Font-Bold="true" Font-Names="Tahoma" CssClass="text-right" Font-Size="12px" Width="5%" BackColor="#8DC894" ForeColor="Green" HorizontalAlign="Right" />
                     <ItemStyle HorizontalAlign="Right" />
                     <FooterTemplate>
                     </FooterTemplate>
                 </asp:TemplateField>
                 <asp:TemplateField>
                     <ItemTemplate>
                         <asp:Button ID="btnAddNewRow" ToolTip="Add New Contract" CommandArgument="RowId"
                             CommandName="Add" CssClass="GridAddbtn" runat="server" TabIndex="3" />
                         <asp:Button ID="btngridDelete" ToolTip="Delete" CommandArgument="RowId" CommandName="Delete" data-target="#mpSearch"
                             CssClass="GridDeletebtn" runat="server" TabIndex="4" />
                     </ItemTemplate>
                     <HeaderStyle Font-Bold="true" Font-Names="Tahoma" Font-Size="12px" Width="5%" BackColor="#8DC894" ForeColor="Green" HorizontalAlign="Left" />
                     <ItemStyle HorizontalAlign="Right" />
                 </asp:TemplateField>
             </Columns>
             <AlternatingRowStyle BackColor="#C2D69B" />
             <HeaderStyle BackColor="Green"></HeaderStyle>
         </asp:GridView>
     </ContentTemplate>
 </asp:UpdatePanel>

this is javascript code :

JavaScript

<script type="text/javascript">
          $(".js-example-placeholder-single").select2({
              placeholder: "Select a state",
              allowClear: true
          });

      </script>

Posted 28-Jan-16 1:08am

amnk.info

Updated 28-Jan-16 1:20am

v4

Add a Solution

Comments

F-ES Sitecore 28-Jan-16 7:19am

What is "select2" script? There is no mention of it in the code you posted.

amnk.info 28-Jan-16 7:21am

I just added now javascript code.
you can see select2 script here
https://fk.github.io/select2-bootstrap-css/

F-ES Sitecore 28-Jan-16 9:26am

The problem is that your jQuery code attaches events to elements that were on the page when the page first loads. However your updatepanel removes those elements and replaces them, and the new elements don't have your events attached to them.

As mentioned below if you use the pageLoad event to attach your events that is called not only when the page first loads but also every time the update panel fires.

http://forums.asp.net/t/1982846.aspx?How+to+run+javascript+after+updatepanel+execution+completed

amnk.info 28-Jan-16 9:44am

thanks for reply. i will try this

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2016-01-28T02:57:00

Try moving the script to a global function called pageLoad:

HTML

<script>
function pageLoad(){
    $(".js-example-placeholder-single").select2({
        placeholder: "Select a state",
        allowClear: true
    });
}
</script>

That will work if you only need a single startup script per page. If you need more than one, then try: