How to add onfocus to my textbox

[readbanana]

I am trying to add onfocus to my textbox that is in a gridview. No matter which textbox I click in that row, the divs become visible in the first cell only

 TextBox tb = (TextBox)e.Row.FindControl("costTB");
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          tb.Attributes.Add("onfocus", "Visible(this)");
          tb.Attributes.Add("onblur", "Invisible(this)");
        }

[gits]

what javascript framework do you use? some ASP.net addOn or similar? ... the code you posted is far from any standard JavaScript.

[readbanana]

I'm working in asp.net - C#. Like I said, I don't know any javascript. All those functions do is document.getelemntbyid('leftDiv').style.visibility ='visible'
If you have something else that would work right, I'd love to hear.

[readbanana]

I just realized I posted what was on my .cs page, not the javascript function - that's just calling the function.

function Visible(obj)
{
document.getElementById("leftDiv").style.visibility='visible';
document.getElementById("rightDiv").style.visibility='visible';
 
}
function Invisible(obj)
{
document.getElementById("leftDiv").style.visibility='hidden';
document.getElementById("rightDiv").style.visibility='hidden';
}

[gits]

what is the exact problem then? ... the JavaScript code would set the visibility css-property but first you stated that you want to apply an onfocus method to a textbox?

what obj is passed to the two functions you posted? from where are they called?

kind regards

[readbanana]

obj should be the textbox you click. On focus of a textbox in a gridview, I want the divs surrounding that textbox to become visible.

   TextBox tb = (TextBox)e.Row.FindControl("costTB");
        if (tb != null)
        {
            tb.Attributes.Add("onfocus", "Visible(this)");
            tb.Attributes.Add("onblur", "Invisible(this)");
        }

[gits]

so in that case it seems that your code relies on ids that wouldn't be unique. id's have to be unique otherwise getElementById() fails ...

[readbanana]

I have the same thing for a hover over an image and that works - the right image shows. do you have a better way that I can go about doing this?

[gits]

so do you have nodes with duplicate ids? if not try setting the display property to 'none' (=false) or 'block' instead of using the visibility ...

btw. it is a bit difficult to deal with problems when having only small pieces of information ...

[readbanana]

I don't have separate nodes. it's a databound column. I've tried setting the display - but it's exactly the same. Tell me what information you need and I'll give it to you. I need this done quickly! I'm getting pretty desperate!

 <ItemTemplate>
 
             <div id="leftDiv" class="leftdiv" style="display:none"></div>
               <asp:TextBox ID="costTB" runat="server" Text='<%# Bind("Cost") %>' AutoPostBack="true" CssClass="grid-input"  ></asp:TextBox>
               <div id="rightDiv" class="rightdiv" style="display:none"></div>
 
            </ItemTemplate>

[gits]

how is the serverside code rendered in the client - i mean how does the resulting html ook like?

[readbanana]

the two divs show a yellow little line on each side the background of the textbox becomes yellow. when you click the second row, the background becomes yellow (because thats the css :hover) but the two divs stay visible in the firsts cell. if you click a different column then the divs go away since you are no longer on focus. I'm not sure if I understood your question and gave the proper answer

[readbanana]

I really understand what the problem is I just need to know how to get around it. really I need to say e.row.cellp[2].attributes.add("onfocus") - you just can't add onfocus to a cell

[gits]

i meant the html-code - could you post a portion of the page when it is loaded in the browser and you have a look at the source view? and it should of course be a piece where the nodes with the divs in question appear.

[readbanana]

this is from firebug. you can't view source while your focused - it takes the focus off

<input type="text" onblur="Invisible(this)" onfocus="Visible(this)" class="grid-input" id="ctl00_ContentPlaceHolder1_gridUC_summaryGV_ctl03_costTB" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$gridUC$summaryGV$ctl03$costTB\',\'\')', 0)" value="294.00" name="ctl00$ContentPlaceHolder1$gridUC$summaryGV$ctl03$costTB">

[gits]

the textbox isn't very relevant in this case ... we would need to have a look at the surrounding code ... i think the problem is the setting of the display of the divs? i think that such a line:

document.getElementById("leftDiv").style.visibility='visible';

fails ... and i suppose that "leftDiv" is either not unique or that id is not present at all ... so i asked for the html-code where the divs appear.

[readbanana]

<div style="display: none;" class="leftdiv" id="leftDiv"></div><input type="text" onblur="Invisible(this)" onfocus="Visible(this)" class="grid-input" id="ctl00_ContentPlaceHolder1_gridUC_summaryGV_ctl03_costTB" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$gridUC$summaryGV$ctl03$costTB\',\'\')', 0)" value="294.00" name="ctl00$ContentPlaceHolder1$gridUC$summaryGV$ctl03$costTB"><div style="display: none;" class="rightdiv" id="rightDiv"></div>

[readbanana]

each <td> has the divs surrounding them but they stay display:none. the first divs change to display block

[gits]

so the id's aren't unique as a already metioned. you should make them unique by adding something unique to them serverside which could be recognized from your textbox - for example its id - so the function on the client could look like this then:

function Visible(obj) {
    var lDivId = 'leftDiv_' + obj.id;
    document.getElementById(lDivId).style.visibility='visible';
}

for example.

[readbanana]

What would the server side code look like? This doesn't work just like this

[gits]

i guess the ItemTemplate would need to take care of that - there the div's ids are assigned -> so they would need to be adapted.

[readbanana]

I'm not exactly sure what you are saying I should do. The code that you gave me doesn't do anything - my divs don't show up at all.

[gits]

• the id of a node has to be unique in a document - that is the purpose of an id
• in your serverside code make it unique (this is probably to do in the ItemTemplate that you posted)
• the id should be identifyable by the node that is passed to the Visible() method for example its id - so that the method could then identify the corresponding divs - note that this id in the current shown code would need to be the clientId of the textnode

[readbanana]

I thought that's what (this) passes in.it tells it which textbox it is. how would I know they dynamically given id?

[gits]

don't know asp.net quite well - but i think there is a property called ClientID for a control - which should be the one you might use ...

PS: and this is then the object=textbox-node ... but you would need to use a property like the id then ... as shown already

[readbanana]

I figured it out.I have div, textbox, div. so the div is a sibling of the textbox. Instead of saying leftdiv visible, I made the previous and next siblings of the textbox invisible. Thanx for all your help.

function Visible(textbox)
{
var rightdiv =textbox.nextElementSibling;
rightdiv.style.display='block';
var leftdiv = textbox.previousElementSibling;
leftdiv.style.display= 'block';
}
function Invisible(textbox)
{
var rightdiv =textbox.nextElementSibling;
rightdiv.style.display='none';
var leftdiv = textbox.previousElementSibling;
leftdiv.style.display= 'none';
}