using javascript in master and content pages

[manared]

I am creating a website with vb.net 2005 and am using the new Master and Content pages. I once again have a textbox that I need to limit the characters in the box. I have the javascript code that I need to use for this task, but I do not know how to use it with the content page that has the text box. Here is the javascript function that I used on a different program:

<script language="javascript"> 
function textCounter(field, countfield, maxlimit) {
 
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else 
countfield.innerText = maxlimit - field.value.length + " characters remaining";
} 
 
function doPaste(control) {
maxLength = control.attributes["maxLength"].value;
value = control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var oTR = control.document.selection.createRange();
var iInsertLength = maxLength - value.length + oTR.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData;
}
}
</script>

Does anyone know how I call this function and where I put it, either in the master page or content page? I also do not know exactly how to call it in my content page either. Any help is appreciated, thanks!

 

[manared]

I've been using this is my script for the javascript function

txtMessage.Attributes.Add("onkeyup", "textCounter(txtMessage, lblCharacters, 99);")
txtMessage.Attributes.Add("onpaste", "doPaste(txtMessage);")

I've been trying many different ways to call my javascript funtion when keys are pressed, but every time I get an error on the page saying that txtMessage is undefined. Anyone know how to fix this or what I should do/add?

 

[JohnH]

Masterpages does something unique (if you'll excuse the pun) when rendering the asp.net code to client html code, that is ensuring unique element IDs by composing new ones from the placeholder names. You have to address this with this code change:

txtMessage.Attributes.Add("onkeyup", "textCounter(" & txtMessage.ClientID & ", " & lblCharacters.ClientID & ", 99);")

You do the same change with the other code line, use ClientID property to get the server-side ID translated to the rendered client-side ID of the master-content relationship.

The script tag with the javascript code may be placed in the masterpage or in the contentpage within a content tag (latter refered to as inline scripting).

Btw, language attribute of script tag is depreciated, use the type attribute instead, specifying the mime type "text/javascript".

If you review the html code generated you will easily see how asp.net translates everything, and also how these master-content elements are given IDs something like 'ctl00_ContentPlaceHolder1_txtMessage'.

 

[manared]

alright, that makes sense. I've seen many posts that say something like that but couldn't figure out how exactly to integrate it into my code. So I put that line of code in and converted the other one as well. I have the javascript function in the master page. Now when I type in the txtMessage textbox an error comes up that says "ctl00_ContentPlaceHolder1_lblCharacters" is undefined. I think the other error is gone now where the textbox was undefined, but how would I fix this one?

And if the script is in the Master Page, I do Not have to do the inline scripting, right?

Thank you so much for your reply though, no one anywhere else has said anything yet!

 

[JohnH]

I have the javascript function in the master page. Now when I type in the txtMessage textbox an error comes up that says "ctl00_ContentPlaceHolder1_lblCharacters" is undefined.

There is no way that can be 'undefined', the ID is given by the server that created it when it is fetched from control.ClientID.

And if the script is in the Master Page, I do Not have to do the inline scripting, right?

When you look at the html code you see one single html page including the script tag that came from the master part, so you don't put yet another identical script tag there.

 

[manared]

Alright, here's what I have in my master page:

<head runat="server">
<title>Free Master Page</title>
<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {

if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else 
countfield.innerText = maxlimit - field.value.length + " characters remaining";
} 

function doPaste(control) {
maxLength = control.attributes["maxLength"].value;
value = control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var oTR = control.document.selection.createRange();
var iInsertLength = maxLength - value.length + oTR.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData;
}
}

</script> 
</head>

Then here's what I have in my content page:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
txtMessage.Attributes.Add("onkeyup", "textCounter(" & txtMessage.ClientID & ", " & lblCharacters.ClientID & ", 99);")
txtMessage.Attributes.Add("onpaste", "doPaste(" & txtMessage.ClientID & ");")
'Other code
End Sub

And I still get that error about the contentplaceholder_lblCharacters being undefined.. Not sure what I'm doing wrong right now. And yes, I do get that error, but no, I don't know why, but it is there.

 

[JohnH]

I'm clueless as to why this don't work at your place, maybe you should post and attach the master+content pages including code-behind zipped for review.

 

[manared]

Actually, I figured it out. I needed the single quotes as well as the double quotes because it is a string. Here's the one line of code:

txtMessage.Attributes.Add("onkeyup", "textCounter('" & txtMessage.ClientID & "', '" & lblCharacters.ClientID & "', 99);")

Now it is defining the two variables. Now, it is giving me the error of 'value.length is null or not an object' from my javascript. Any clues on how to fix that?

I want to thank you for sticking with this and helping me with it!

 

[JohnH]

No, actually you do it without the single quotes, because it is the object reference that is called in the Javascript, not the string ID. If you put in those single quotes you pass in the string IDs and have to resolve the reference in Javascript again by using the document.getElementById function, which there is no need for. If you don't put in the single quotes, as were the original solution, the script engine will try to resolve the parameters passed in as objects, which is correct with the other code in the textCounter method. The result is the same whether the objects are resolved when passing parameters or by explicit reference function, both ways have to address existing control objects with correct ID. In this case there is no confusion about the existence of the controls and their IDs because the call is generated by server controls that would otherwise error out and not compile if they didn't exist, and the IDs are also generated and given by the same server reference.

 

[manared]

ah, i see. Alright, so I have attached my master and content pages in a zip folder. Hopefully someone will be able to shed some light on this problem. The code is still using the single quotes, so that should be changed when looking at the program. Thanks!

 

[JohnH]

Everything is invisible in that form and we ain't got your db. But it will help you knowing that invisible control are not generated in the webpage that client views. You can also see this by viewing the generated html code at different stages when different controls of that page are made visible. Now here's the clue, your lblCharacters is invisible and never made visible, so it won't be part of the webpage unless you make it visible, which you have to do before trying to access it. Where you make txtMessage visible you must also make lblCharacters visible. Obviously not tested with you pages, I am confident that this is all you have to do to make it work. (and of course decide what way around the object reference you want to go, as is now you send strings of the IDs and try to handle those as references, go back without quotes.)

 

[manared]

Alright, thank you much for taking a look at this. Making it visible allows the ID to pass now, so it works just fine. I appreciate the help!!!