Link to home
Start Free TrialLog in
Avatar of robaherne
robaherne

asked on

Using javascript to insert text into a textbox in a DetalilView

I'm trying to use this...

function SetSelected(code)
        {
              document.getElementById("TextBox1").value = code;
       {

... to insert a value into a textbox contained in a DetailsView.

The name of the textbox is 'TextBox1' but when rendered in html it is 'table_Insert$ctl01'.

I can get it to work with a test textbox outside of the details view... but I cant get it to refer to the text box in the DetailsView. Please help!

Avatar of HonorGod
HonorGod
Flag of United States of America image

What kind of DOM element is "TextBox1"?


function SetSelected(code) {
  var textbox = document.getElementById("TextBox1")
  alert( 'TextBox1.nodeName = ' + textbox.nodeName )
  textbox.value = code;
}

Open in new window

Avatar of siancell
siancell

How are you calling the SetSelected function?
Avatar of robaherne

ASKER

Thanks...

The TextBox1 is in the DetailsView Below... as is the call to the SetSelected function, which is in an imageMap href=""


<asp:DetailsView ID="table_Insert" runat="server" AutoGenerateRows="False" DataKeyNames="id" DataSourceID="ObjectDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None" DefaultMode="Insert" Caption="<div style='text-align:left;'><b>Add Postcode</b></div>" OnItemInserting="table_Insert_ItemInserting" Width="250px" >
        <Fields>
            <asp:BoundField DataField="postcode"  HeaderText="Postcode" SortExpression="postcode" >
                <HeaderStyle Font-Bold="False" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Zone" SortExpression="zone">
                <EditItemTemplate>
                    <asp:TextBox   ID="TextBox1" runat="server" Text='<%# Bind("zone") %>'></asp:TextBox>
                </EditItemTemplate>
                <InsertItemTemplate>
                    
                    <asp:DropDownList ID="DropDownList1" runat="server" Text='<%# Bind("zone") %>'>
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="2"></asp:ListItem>
                    
                    </asp:DropDownList>
                </InsertItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("zone") %>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Bold="False" />
            </asp:TemplateField>
            <asp:CommandField ShowInsertButton="True" />
        </Fields>
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <CommandRowStyle BackColor="#D1DDF1" Font-Bold="True" />
        <RowStyle BackColor="#EFF3FB" />
        <FieldHeaderStyle BackColor="#DEE8F5" Font-Bold="True" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />
    </asp:DetailsView>
 
 
<img src="../Image/LoindonPostcodes.gif" width="430" height="392" usemap="#map" style="border:0px;">
<map id="map" name="map">
<area href="javascript:SetSelected('NW1')" shape="POLY" coords="116,92,113,69,96,69,90,50,61,46,79,74,74,85,84,85,82,92,94,96,107,90"/>

Open in new window

Will it work for you if you were to replace the
<asp:TextBox   ID="TextBox1" runat="server" Text='<%# Bind("zone") %>'></asp:TextBox>
with
<input type="text" id="TextBox1" name="TextBox1" value="<%# Bind("zone") %>"/>
and obtain the value of the textbox via post?
Thanks...

That doesn't seem to work. It starts complaining that "A call to bind must be assigned to a property of a control inside a template".

Just to clarify... I want to use this:

<area href="javascript:SetSelected('NW1')" shape="POLY" coords="116,92,113,69,96,69,90,50,61,46,79,74,74,85,84,85,82,92,94,96,107,90"/>

to set the value of TextBox1 to 'NW1'.
OK this is going to be tricky,
 place a hidden field outside of your DetailsView:
<asp:HiddenField ID="HiddenField1" runat="server" />

then on your code behind, on the DetailsView's Databound event put this in

HiddenField1.value = ctype(sender,DetailsView).FindControl("TextBox1").ClientID
(assuing you are using VB.NET and the textbox's ID is TextBox1)

then on the html side of the page(where you have your DetailsView)
use the value of the hidden field like this

function SetSelected(code)
        {
              document.getElementById("<%=HiddenField1.ClientId%>").value = code;
       {

This should workout for you
Sorry, made a mistake, the javascript function should me like this

function SetSelected(code)
        {
              var temp = document.getElementById("<%=HiddenField1.ClientId%>").value;
              document.getElementById(temp).value = code;
       {
Thanks that looks good! Although I just getting this error...

Error      297      'System.Web.UI.WebControls.HiddenField' does not contain a definition for 'ClientId'      C:\Documents and Settings\Robski\My Documents\Visual Studio 2005\WebSites\........
That was just 'ClientId' should have been 'ClientID'

Now I'm getting...

Object reference not set to an instance of an object.

"HiddenField1.Value =  table_Insert.FindControl("TextBox1").ClientID;"

which I thought was my c# equivallent of your...

"HiddenField1.value = ctype(sender,DetailsView).FindControl("TextBox1").ClientID"

Do you know what the C# equivallent of ctype is?




I think for c# its

HiddenField1.value = (System.Web.UI.WebControls.DetailsView)sender.FindControl("TextBox1").ClientID

Dammit!

Object reference not set to an instance of an object.

HiddenField1.Value = ((DetailsView)sender).FindControl("TextBox1").ClientID;
ASKER CERTIFIED SOLUTION
Avatar of siancell
siancell

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi there... thanks for all your help. I think I've nailed down the problem.

I can identify the DetailsView text box in the code behind because this works...

    TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");

But as soon as I make a reference to it's ClientID....

   string boxid = mybox.ClientID;

I get...

"Object reference not set to an instance of an object.
string boxid = mybox.ClientID;"

It's as if there is no ClientID associated with the box!!!???
On second thoughts... I don't necessarily have the TextBox object after declaring...

   TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");

Because if I try.... mybox.Text = "Whatever"; it gives me the "Object reference not set to an instance of an object." error again.

So still... It cant find the TextBox in the details view by it's ID "TextBox1".

I've tried changing it's ID and even using the html generated ID from the page source but neither works!!!
Strange....

I also have a dropdown list in the detailsview and I can alter the selectedIdex on that using....

  DropDownList mylist = (DropDownList)((DetailsView)sender).FindControl("DropDownList1");
  mylist.SelectedIndex = 1;

But altering the textbox like this does not work...
   
   TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");
   mybox.Text = "whatever";

What the hell is going on???!!!
Figured it out...

The TextBox in my details view was not the the one I had set up in the code as a template and named "TextBox1".

I needed to use the "convert field into a template field" first and then I could refer to it.
Thanks a million... I understand whats going on a lot better now!