• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 917
  • Last Modified:

Problem with my Update Panel in AYAX

HI Experts:
Problem: I am trying to add some Ajax to my web page. I am working in hte Update Panel, I have two text boxes and 1 buttonimage in my aspx page
 <TR id="trSSN" runat="server">
        <TD class="field" style="HEIGHT: 24px">
             <ASP:TEXTBOX id="txthidde" runat="server" width="280px" ForeColor="DarkGray"
                          maxlength="11" Font-Bold="True" BackColor="#E0E0E0" Font-Size="Medium"
                           Height="22px"    Enabled="False">***********
              </ASP:TEXTBOX><SPAN class="validationlabel" id="Span1" runat="server">
             <ASP:TEXTBOX id="txtSSN" runat="server" width="280px" ForeColor="Black" maxlength="11"
                          Font-Bold="True" Visible="False" BackColor="#E0E0E0">
              </ASP:TEXTBOX><SPAN  class="validationlabel" id="spanSSN" runat="server">&nbsp;*</SPAN>
              <ASP:IMAGEBUTTON  id=imgBtnShowHide runat="server"
The radio Button is a ImageBUtton, The code hide and show the social Security number. The first textbox take the number from a server, the second textbox
has *********** on it , just to hide the number. By default the first box appear showing your SSN and the button appears with an image of "Show" when you click
the button image changes to "Hide"and the second textbox is call and appears this  "*********"

My problem is that everytime that I push this button ALL THE PAGE REFRESH. I want the UpdatePanel to refresh only this 2 text boxes and the button.
By the way my Page load is private and It is working in a class that is public (example):
public class project
   protected System.Web.UI.WebControls.TextBox textbox1; (and so on with many more. When I create the update panel I don't see it here. DO i need to write them manually? how?)
 private void Page_Load(object sender, System.EventArgs e)

The code in my aspx.cs:
private void imgBtnShowHide_Click(object sender, System.Web.UI.ImageClickEventArgs e)
    if(imgBtnShowHide.ImageUrl == "ima/btnShowSSN.gif")
      imgBtnShowHide.ImageUrl = "ima/btnHideSSN.gif";
      txtSSN.Visible =true;
      txthidde.Visible = false;
    else if(imgBtnShowHide.ImageUrl == "ima/btnHideSSN.gif")
       imgBtnShowHide.ImageUrl = "ima/btnShowSSN.gif";

I try to do it with the update panel and It didn't work. WHY????
Thanks for your time and your advice

  • 2
1 Solution
Tommie Nathaniel Carter, Jr., MBAFounderCommented:
Change the button type to an HtmlInputButton. This will make the button a client-side HTML button. You can then use Javascript to control the behavior of the server elements. How you ask? Use the clientid associated with each control that you would like to update on the client side of the web application. Once the button is an HTML element you can manage the controls just like any other web page.

The reason this works is that the runat attribute makes the element into a server control meaning that your button will post back to the server automatically (every time its clicked). You will need to revert the button to a true client side element in order to make your web app more client-side friendly.
eddyinperuAuthor Commented:
Thanks for your fast answer but before to do this(by the way I like that idea)
I start testing why  doesn't work and I copy my web.config in another example with update panel and still didn't work until I erase this line :    <xhtmlConformance mode="Legacy"/>
Then  the test start to work so I went and copy the same web.config in my project without that line and this error message appear:

Control 'ScriptManager1' of type 'ScriptManager' must be placed inside a form tag with runat=server.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
This project  has been created in asp.net 1.1 and C# . We are merging to asp.net 2.0 and we are playing with ayax. I hate to delete the line in web.config 'cause the project is huge and I don't know what will do to the rest of  the program beside I can't not pass this error.
 Is there a way to fix this problem without changing the web.config? and If I change the web.config  how can I do this? here is my aspx code.The tag of my scriptmanager is:(I only print part of it)
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
             <table cellSpacing="0" cellPadding="0" width="570" border="0">
          <td><SPAN class="body1">
              <DIV class="head2" id="ERHeading">Enrollment Setup</DIV>
   <form id="FORM1" method="post" runat="server">
Thanks so much. By the way could you write an example usign the same code, 'cause I am new in this kind of coding style . I will appreciate this THANKSSS..one more time Experts
eddyinperuAuthor Commented:
Thank you Experts!!I tink I found the answer, by they way for someone that might be reding this!!
My problem was that I did't have the scriptManager inside teh <Form> tags. Thats it!! The new asp.net 2.0 is really picky about HTML. I also have problems with the MEGA and LINKS. in asp.net 1.1 you could put it anywhere, but now it need to be inside the Header. Another of my problems was that I used to have a tag name in which my body tag was set up, but asp 2.0 doesn;t like that, It is necessary to write the tag <body> inside the document.  Eventhough I found the answere I think that tcarternyc deserve the points because that is another way how to fix that problem. If you don't  mind tcarternyc, Would you write an example or point me to the right directiojn about how to do it??? THANKS buddy!!....
Thanks Experts one more time for all your help!!    AWESOME WEB PAGE...!!!

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now