What's wrong with my JavaScript? (C#/ASP.NET)

Question

Here is my JavaScript:

<script type="text/javascript">
function onholdev(index) {
    var chk = document.getElementById('<%=grdCons.Rows[' + index + '].FindControl("chkHold").ClientID %>');
    var txt = document.getElementById('<%=grdCons.Rows[' + index + '].FindControl("txtReason").ClientID %>');


    if (chk.checked == true) {
        txt.disabled = false;
    }
    else {
        txt.disabled = true;
        txt.value = "";
    }
}
</script>

The 'index' variable comes from the RowDataBound event of my GridView, like so:

  CheckBox chkHold = ((CheckBox)e.Row.FindControl("chkHold"));
  chkHold.Attributes.Add("onchange", "onholdev(" + e.Row.RowIndex + ")");

However, I'm getting 'too many characters in string literal' in the first line of my function (beginning with var chk). Why is this?

Nick Craver · Accepted Answer · 2010-11-25 10:06:44Z

3

You're mixing client and server-side script...you just can't do this. This is executed server-side:

grdCons.Rows[' + index + '].FindControl("chkHold").ClientID

But you're calling it client-side and trying to pass an ID, that's just not something you can do, look at your rendered JavaScript function and this will be much clearer. Instead just use the ID of the table, then you can find your controls that way, for example:

var row = document.getElementById("grdCons").rows[index];
var inputs = row.getElementsByTagName("input");
//then filter by ID match, class, whatever's easiest and set what you need here

answered Nov 25, 2010 at 10:06

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Basic Over a year ago

That's not strictly true - He's using server-side to output the client Id of a control which is pretty much the only way to get the Id as ASP.Net generates them semi-randomly. The generated javascript should look something like: var chk = document.getElementById('chk_0000001');. That said, I agree it's better to try and stay all server side if you can

Nick Craver Over a year ago

@Basiclife - That's not correct, look at the function, index is a parameter that gets passed in, this would have JavaScript trying to access a server-side collection (grdCons.Rows) by index, you simply can't do this.

Basic Over a year ago

Ah - I hadn't spotted that he was using a JS index in the call. Yeah that's never going to work :)

Ioannis Karadimas · Accepted Answer · 2010-11-25 10:07:56Z

1

That's probably because ASP.NET throws an error, which is written in the client side call of getElementById. The onholdev function is executed client - side, and so cannot pass the index parameter to ASP.NET which is executed server - side. Try this:

<script type="text/javascript">
function onholdev(checkbox, textbox) {
    var chk = document.getElementById(checkbox);
    var txt = document.getElementById(textbox);

    if (chk.checked == true) {
        txt.disabled = false;
    }
    else {
        txt.disabled = true;
        txt.value = "";
    }
}
</script>

Replacing your server - side code with this:

CheckBox chkHold = ((CheckBox)e.Row.FindControl("chkHold"));
chkHold.Attributes.Add("onchange", "onholdev('" + 
    e.Row.FindControl("chkHold").ClientID + "','" + 
    e.Row.FindControl("txtReason").ClientID + "')");

answered Nov 25, 2010 at 10:07

Ioannis Karadimas

7,9263 gold badges38 silver badges48 bronze badges

2 Comments

Nick Craver Over a year ago

+1 - definitely another viable solution...I'd personally go the unobtrusive route, but in webforms the page is littered with inline script anyway...

Ioannis Karadimas Over a year ago

I know (sigh), and I've got some issues with that currently. It sucks big time mixing the two... :)

Klemen Slavič · Accepted Answer · 2010-11-25 10:07:22Z

0

The problem is your use of the single quote characters in ' + index + '. Change those to double qoutes and it should work.

answered Nov 25, 2010 at 10:07

Klemen Slavič

19.9k3 gold badges36 silver badges44 bronze badges

4 Comments

Nick Craver Over a year ago

This isn't the issue, I mean syntactically yes, but if you step back and look at what he's doing, this won't really solve it :)

David Hedlund Over a year ago

No it shouldn't. index is a variable within the javascript function. This will never work, and Rows[] expects an integer, not the string " + index + ".

Nick Craver Over a year ago

@David - Not even that, this is a client side function, JavaScript, you can't access a server-side collection like this in the first place.

David Hedlund Over a year ago

@Nick: Hmm, that's what I was getting at (my response wasn't aimed at you, btw, your comment wasn't there when I started typing it). Sorry if I wasn't being very clear. What I meant to say was that implementing the change Krof suggests would be passing " + index + ", rather than an integer, to Rows[], which would just plain not work.

Collectives™ on Stack Overflow

What's wrong with my JavaScript? (C#/ASP.NET)

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related