how to show hide updatePanel using jquery ?

Question

My problem is i want to hide and show UpdatePanel in asp.net which contains some asp.net controls but using jquery , i have tried many code but fail to achieve my goal 

codes i tried are :

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">

     $(document).ready(function () {


         $("#addButtonToShowAddPanel").click(function () {

             $("#addService_Type_UpdatePanel").show("slow");

         });

     
     });
 
 </script>
  

this is just to demonstrate what i did , and one more thing does i m including the right library of jquery ?

  <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

can any one help ?

Answer 1

Can you show the relevant html that is produced by the code?

i.e. the part of the html that contains the elements that you want to hide or show.

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

Answer 2

ya sure i can provide you the mark up

<asp:UpdatePanel ID="addService_Type_UpdatePanel" runat="server" >
            
      <ContentTemplate>


  <table>
            <tr>
            <td><asp:Label ID="service_Type_Name_Label" CssClass="label"  runat="server" Text="Service Name" />
            </td>
            
            <td><asp:TextBox ID="service_Type_Name_TextBox" runat="server" MaxLength="200" ></asp:TextBox>
                <asp:FilteredTextBoxExtender ID="service_Type_Name_TextBox_FilteredTextBoxExtender" 
                    runat="server" Enabled="True" FilterType="Custom, UppercaseLetters,LowercaseLetters,Numbers" ValidChars="' " TargetControlID="service_Type_Name_TextBox">
                </asp:FilteredTextBoxExtender>
                <asp:RequiredFieldValidator ID="requiredFieldValidatorForServiceTypeNameTB" runat="server" 
                    ControlToValidate="service_Type_Name_TextBox" 
                    ErrorMessage="Service Name cannot be empty"></asp:RequiredFieldValidator>
                    <br />
                   


            </td>
            <td>
                &nbsp;</td>
            </tr>
            
            <tr>
            <td><asp:Label ID= "add_Status_Label" CssClass="label"  runat="server" Text="Status"></asp:Label>
            </td>
            
            <td><asp:DropDownList ID="ddlForAddingNewServiceTypes" runat="server" >
            <asp:ListItem>Active</asp:ListItem>
            <asp:ListItem>Inactive</asp:ListItem>
            </asp:DropDownList>
            </td>
            </tr>
            
            <tr>
            <td>

            </td>
            
            <td><asp:Button ID= "save_Button" 
            CssClass="button"
            runat ="server" Text="Save" onclick="save_Button_Click" />
                &nbsp;
                <asp:Button ID= "update_Button" runat ="server" Text="Update" 
                    onclick="update_Button_Click" CssClass="button" />
                &nbsp;
                <asp:Button ID= "close_Button" runat ="server" Text="Close"
                CssClass="button" CausesValidation="false"
                 onclick="close_Button_Click" />
            </td>
            </tr>
            <tr><td>
                &nbsp;</td>

                <td>
                    &nbsp;</td>
                </tr>



    </table>
    </ContentTemplate>
    </asp:UpdatePanel>
            

one more thing i would like to tell you is that this UpdatePanel is nested inside another UpdatePanel

Answer 3

Not the code - the HTML that is produced by the code.

Also - mark the relevant part of the html that should be controlled by the button.

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

Answer 4

<div id="ctl00_mainContent_addService_Type_UpdatePanel">

		





  <table>

            <tr>

            <td><span id="ctl00_mainContent_service_Type_Name_Label" class="label">Service Name</span>

            </td>

            

            <td><input name="ctl00$mainContent$service_Type_Name_TextBox" type="text" maxlength="200" id="ctl00_mainContent_service_Type_Name_TextBox" />

                

                <span id="ctl00_mainContent_requiredFieldValidatorForServiceTypeNameTB" style="color:Red;visibility:hidden;">Service Name cannot be empty</span>

                    <br />

                   





            </td>

            <td>

                &nbsp;</td>

            </tr>

            

            <tr>

            <td><span id="ctl00_mainContent_add_Status_Label" class="label">Status</span>

            </td>

            

            <td><select name="ctl00$mainContent$ddlForAddingNewServiceTypes" id="ctl00_mainContent_ddlForAddingNewServiceTypes">

			<option value="Active">Active</option>

			<option value="Inactive">Inactive</option>



		</select>

            </td>

            </tr>

            

            <tr>

            <td>



            </td>

            

            <td><input type="submit" name="ctl00$mainContent$save_Button" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$mainContent$save_Button&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_mainContent_save_Button" class="button" />

                &nbsp;

                <input type="submit" name="ctl00$mainContent$update_Button" value="Update" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$mainContent$update_Button&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_mainContent_update_Button" class="button" />

                &nbsp;

                <input type="submit" name="ctl00$mainContent$close_Button" value="Close" id="ctl00_mainContent_close_Button" class="button" />

            </td>

            </tr>

            <tr><td>

                &nbsp;</td>



                <td>

                    &nbsp;</td>

                </tr>







    </table>

    

	</div>

            

  

            

Now is that ok

Answer 5

So, if the update panel rendered ID is: ctl00_mainContent_addService_Type_UpdatePanel and it is not visible,

your jquery code should be:

$("#addButtonToShowAddPanel").click(function () {
     $("#ctl00_mainContent_addService_Type_UpdatePanel").show("slow");
});

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

Answer 6

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">

     $(document).ready(function () {


         $("#addButtonToShowAddPanel").click(function () {
             $("#ctl00_mainContent_addService_Type_UpdatePanel").show("slow");
            
         });

         $("#close_Button").click(function () {
             $("#ctl00_mainContent_addService_Type_UpdatePanel").hide("slow");
           
         });

     });
 
 </script>

its still isn't working , what next should i do 

Answer 7

       $(document).ready(function() {
//For HTML Input type Button  
$("#addButtonToShowAddPanel").click(function() {
  document.getElementById("addService_Type_UpdatePanel").style.display = "none";
  });
//For .Net Button (ASP:Button)
 $("#btnTest").click(function() {
 document.getElementById("addService_Type_UpdatePanel").style.display = "none";
                return false;
            });
        });

---

With Thanks and Regards Sambath Raj.C

Answer 8

Seems that you don't get the right ID of the buttons.

What is the HTML (not the code) that you get for these 2 buttons?

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

Answer 9

yes it is now working i just place return false ...but now the problem is when i make the updatepanel's visiblity = false then the html part of UpdatePanel is not generated and because of that out jquery for hideing and showing fails to work , now what can we do to solve this ?

and don't you thing the webserver will not always generate the same id for my button's and UpdatePanel ?

I am talking about deployment because my application is a real time application not the home work ....

Answer 10

yes it is now working i just place return false ...but now the problem is when i make the updatepanel's visiblity = false then the html part of UpdatePanel is not generated and because of that out jquery for hideing and showing fails to work , now what can we do to solve this ?

and don't you thing the webserver will not always generate the same id for my button's and UpdatePanel ?

I am talking about deployment because my application is a real time application not the home work ....

So you shouldn't have "myUpdatePanel.Visible=false;" in server side code if you want to be able to show it via client side later.  You'll need to simply apply a style to hide it via client side, i.e. "display:none".

You are right that the IDs may not stay the same, and you shouldn't hard code them.  There are two solutions available to you.  The first is that the server side objects will have a property called "ClientID".  You can then pass that property to, for example, a javascript variable in the code behind or through a scriptlet. 

Another option, which I personally prefer, is to add a non-asp span/div to the page just outside or inside of the updatepanel, give it an ID, and because it's not an ASP control the ID will be left alone.  You can then use JQuery to access that non-asp control by ID and know that it won't be changed.

Answer 11

Hi ,

Thanks for supporting our forum ,but our forum is to discuss technology about C# General ,not Javascript.

So you may have more luck getting answers in JavaScript Forums.

Have a nice day!

---

Lisa Zhu [MSFT]
MSDN Community Support | Feedback to us

Answer 12

1. Don't use the code the hide the update-panel. Use JQuery to do it on page load.

2. The ID will not be change. That's the way asp produces IDs

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

Answer 13

1. Don't use the code the hide the update-panel. Use JQuery to do it on page load.

2. The ID will not be change. That's the way asp produces IDs

Noam B.

---

---

Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

1. Why hide it on page load?  That will result in a "blip" where it's shown and then hidden a fraction of a second later.  It's better to attach the relevant CSS style server side to ensure that the content is hidden client side.

2. It will change if the ID of the parent object changes, meaning if you modify any of the string of objects between the root and this element the ID will not stay the same.  If there is a master page, then adding/changing elements on that masterpage could easily result in the ID changing.  It's best to be able to make changes to a masterpage without needing to go back and fix every single hard coded ID on every page using that masterpage.