Member Avatar for justapimp

I have this ASP.NET web page that makes use of the <asp:TextBox> tag and I would like to use it with my codebehind as well as an a small AJAX code. The text box field will be use to edit/enter data into a database. at the same time, I would like to use the text box field to load table data back into the page via a small AJAX program that will be executed by an onclick event.

Example AJAX

<script language="javascript" type="text/javascript">
    function LoadForm(ContactID)
    {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        var url = "../GeoPlaneServices.asmx/AlertsForm";
        xmlHttp.open("POST", url, true);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readystate == 4)
            {
                var response = xmlHttp.responseText;
                var XMLObject = new ActiveXObject("Microsoft.XMLDOM");
                XMLObject.async = false;
                try
                {
                    XMLObject.loadXML(response);
                    var responseStatus = XMLObject.getElementsByTagName("ArrayOfContactDataStructure/ContactDataStructure");
                    for(var index = 0; index < responseStatus.length; index++)
                    {
                        var ContactName = responseStatus[index].getElementsByTagName("UserName").item(0).text;
                        var SMS = responseStatus[index].getElementsByTagName("SMS").item(0).text;
                        var Email = responseStatus[index].getElementsByTagName("Email").item(0).text;
                        
                        //loadcontent into form
                        alert(Email);
                        document.getElementById('txtUser').innerHTML = ContactName;
                        document.getElementById('txtSMS').innerHTML = SMS;
                        document.getElementById('txtEmail').innerHTML = Email;
                        alert(Email);
                    }
                }
                catch(e)
                {
                    alert(e);
                }
            }
        }
        xmlHttp.send('ContactID=' + ContactID);
    }
    </script>

ASP form filed and row control

<td align="left" onmouseover="this.style.backgroundColor='#778899'" onmouseout="this.style.backgroundColor='#efefeb'" onclick='javascript:LoadForm(<%#DataBinder.Eval(Container.DataItem, "ContactID") %>)'><%# DataBinder.Eval(Container.DataItem, "UserName") %></td>
<tr>
                <td>&nbsp;</td>
                <td colspan="9" style="height: 26px">Name: <asp:TextBox ID="txtUser" runat="server" Width="130"></asp:TextBox>
                SMS #: <asp:TextBox ID="txtSMS" runat="server" Width="78"></asp:TextBox>&nbsp;Carrier Name:&nbsp;
                <asp:DropDownList ID="ddlCarrier" runat="server"></asp:DropDownList></td>
            </tr>

The AJAX function works fine with regular HTML tags; but it does not work with the asp:TextBox tag. I think on of the reasons is because the tag is running at a server level and it cannot be access by the AJAX function.

If anyone out there has another view or implementation that would allow me to accomplish this job, I would greatly appreciate it.

  • 2 Contributors
  • 4 Replies
  • 248 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by justapimp

Dani AI

Generated

A short, practical summary and a few fixes that pick up where left off.

ASP.NET server controls do not always render the same id you type in markup — the runtime builds a unique client-side id (use the control’s ClientID on the server to obtain it). Also, plain HTML input elements expose a value property (not innerHTML) that you must set from JavaScript. These two facts explain why document.getElementById('txtUser') and innerHTML can fail on a Web Forms page. (learn.microsoft.com)

Embed the rendered client id into your script (or make the id predictable). Example pattern to set the TextBox value from client script (put this in the .aspx page so the server outputs the real id):

// in an .aspx page
var el = document.getElementById('<%= txtEmail.ClientID %>');
if (el) el.value = emailFromResponse;

If you want stable ids instead of the generated ones, ASP.NET 4+ adds ClientIDMode (eg. Static or Predictable) so you can control how ids are built. Be careful: static ids must be unique on the page. (learn.microsoft.com)

Your AJAX handler should also check the correct XHR properties and HTTP status before trying to use the response:

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // safe to parse xhr.responseText / xhr.responseXML and write to inputs
  }
};

Use XMLHttpRequest (or modern fetch) instead of IE-only ActiveXObject for cross-browser reliability. (developer.mozilla.org)

Final notes: do not assign HTML into input controls (use .value), and avoid inserting unsanitized strings with innerHTML (it has XSS risks) — use text APIs or proper sanitization when you must inject HTML. If controls are repeated (GridView/ListView), pass the specific client id into the JS call or use the Predictable mode with ClientIDRowSuffix to produce stable, addressable ids. (developer.mozilla.org)

Recommended Answers

All 4 Replies

Member Avatar for DangerDev

you inspect the code at client side, there u check the property of text box and then try to put id over text box, using this id access the textbox and use it for ajax,
probably it should work.

Member Avatar for justapimp

I already did that and I still can't get my data inside the tag.

Member Avatar for DangerDev

hi
dont use innerHTML property with text box. its property of tag element like div.
use
document.getElementById('txtSMS').value="hiiiii";

or see an example;

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
  <script type="text/javascript" >
    function clickMe()
    {
        alert(document.getElementById('id_TB1').value);
        document.getElementById('id_TB1').value="hiiiii";
    }
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="id_TB1" runat="server"></asp:TextBox>
    </form>
    <input type='Button' ID="Button1" OnClick="javascript:clickMe();" Text="Click Me" /></div>

</body>
</html>
commented: Nice example +7
Member Avatar for justapimp

I see, it makes sense. I don't know what I was thinking. Text boxes have value properties thus innerHTML would not have worked. I guest I need to take a break from C#/C++ and Java programming and improve on my Java scripting and HTML properties.

Thank you very much for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.