Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Professional
| Search | Today's Posts | Mark Forums Read
ASP.NET 2.0 Professional If you are an experienced ASP.NET programmer, this is the forum for your 2.0 questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Professional section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 11th, 2006, 03:10 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Can you show us the final HTML markup for the page? Where do you include the external JavaScript? In the master page or in the content page?

With regards to number 4: yes I have, in many sites. The only issues I have ever run into is referencing the correct JavaScript file in the master (you can't use the ~ syntax in the path, so I usually use a root based path which brings some problems of its own) and the changed names of page elements. Using ClientID usually solves that problem.

If you post your code, I may be able to recommend something.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
While typing this post, I was listening to: Atmosphere by Joy Division (Track 3 from the album: Heart And Soul (CD 2)) What's This?
 
Old October 11th, 2006, 04:18 PM
Friend of Wrox
 
Join Date: Apr 2005
Location: Fort Walton Beach, FL, USA.
Posts: 190
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Imar and other responders:

Thanks for the help. I have found the problem and the solution.

Turns out that with master - content pages the value for the attribute ID on a control in the content place holder area gets changed. gbianchi put me onto that. I checked and found that what is, id = "Label2" in the source becomes "ctl00_ContentPlaceHolder1_Label2" in the executable. Thus, changing the javascript function as follows, will result in x being an object, and not null.
// JScript File
function button1_onclick() {
    var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");
    if (x == null) {
        alert("x is null.");
        }
    else {
        alert("Label's text is: " + x.innerText);
    }
}

A few things to note:

1. The ctl00 is lowercase letters C, T, and L followed by numbers 00. That is, there is not a number one hundred. !@#$#$%^$%^*&%^(*&.

2. The redefined function works whether it is in line on the page, in a script block, or in a separate .js file.

3. Note that you can use debug checkpoint only if you put your javascript in a separate file. A much better way to debug.

4. I note from the values obtainable in the debug time Immediate Window that the converted names of master page objects are also available. In other words your javascript can manipulate any and all controls on a derived page regardless of where they originated.

5. Imar: In attempting to get a peek at the final compiled and rendered page to send to you, I found the difference in names. Thanks for that. Also, I'm not sure but I think you are going to some extra trouble (with your naming comments). If you use the aspx page's prerender event handler to register your javascript (one line of code) as shown below... that's all you need to call any external file javascript functions on an aspx page.
 For example:

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Me.ClientScript.RegisterClientScriptInclude("xxx", "Default.js")
    End Sub
End Class

Thanks.

VV



 
Old October 11th, 2006, 04:39 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

If with "with your naming comments" you're referring to my comment about changed names and ClientID, I think you misunderstood me.

ClientID is a control property that returns the client side ID of any server side control with its full naming container prefixes. So, in your case, it would return ctl00_ContentPlaceHolder1_Label2 instead of Label2. You can use that tweak client side code with the correct ID. Consider the following JavaScript:
Code:
      <script type="text/javascript">
        var x = document.getElementById('<%= Label2.ClientID %>');
      </script>

      <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
      Notice the embedded call to Label2.ClientID. At run-time, that's replaced with the Label's client id:

var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");

No more messing around with JavaScript debuggers. And better yet: you get a compile-time warning when you rename Label2 to something else.

This doesn't work with external files, but personally I would never hard code control names in external files anyway. Instead, I pass the Id to a method in an external file and use a parameter from there.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
While typing this post, I was listening to: Exercise One (Peel Sessions) by Joy Division (Track 8 from the album: Heart And Soul (CD 3 - Studio Rarities & Unreleased)) What's This?
 
Old October 12th, 2006, 11:32 AM
Friend of Wrox
 
Join Date: Apr 2005
Location: Fort Walton Beach, FL, USA.
Posts: 190
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks Ivar. I can see that using the ClientID property is a better way of getting the required *name* arg for the getElementById function. If only I had known... I would have not spent hours and hours in the debug immediate page drilling down to find the changed name of the control.
For anyone interested in the general problem of employing a javascript function in an ASP.NET 2 project which employs content pages inherited from a master page, I offer the following complete mini project as an illustration on how to do it. You may know of an even better way. (I have had several emails from folks who have had difficulty in that kind of situation.) However the code shown below works. And, employing Imar's suggestion above (using ClientID) would make it even better.
--------------------------

Here is a complete ASP.NET 2.0 project (VB) employing a master page and a derived content page. The program demonstrates how one would go about using javascript (button click on the content page) to change the value of two labels: one inherited from the master page and one on the content page. Once one sees the technique employed, one can extend the principle in any number of ways for much clientside manipulation.

VV
-----------------------------------------

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:Label ID="Label1" runat="server" Style="z-index: 100; left: 24px; position: absolute;
            top: 24px" Text="111111" Width="136px"></asp:Label>
        <br />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
---------------------------------------
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
    AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Label ID="Label2" runat="server" Style="left: 68px; position: absolute;
        top: 128px" Text="222222" Width="76px"></asp:Label>
    <input id="Button1" style="left: 36px; position: absolute; top: 160px" type="button"
        value="html Button1" onclick="button1_onclick()" />
    <script language="javascript" type="text/javascript" src="Default.js"></script>
</asp:Content>
---------------------------------------
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Me.ClientScript.RegisterClientScriptInclude("xxx", "Default.js")
    End Sub
End Class
---------------------------------------
// JScript File
function button1_onclick() {
    var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");
    x.innerText = "asdf";
    var y = document.getElementById("ctl00_Label1");
    y.innerText = "4567";
}
---------------------------------------


 
Old January 15th, 2010, 05:59 PM
Registered User
 
Join Date: Jan 2010
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

According to IMAR's statement: "ClientID is a control property that returns the client side ID of any server side control with its full naming container prefixes. It would return ctl00_ContentPlaceHolder1_Label2 instead of Label2."

This tweak client side code "var x = document.getElementById('<%= <ControlName>.ClientID %>'); "with the correct ID of course should be used instead of hard coded "var x = document.getElementById("ctl00_ContentPlaceHolder1 _<ControlName>") ".

So far so good. This statements is rather straighforward, thanks IMAR! Moreover .... IMAR stated as well: This doesn't work with external files. According IMAR reply on VictorVictor, he personally, would never hard code control names in external files. Instead, he passes the Id to a method in an external file and use a parameter from there.

So, finally my question: How?

I have been fiddlling around with VictorVictor's tutorial to pass the value of the innerHTML property of an element found by document.getElementById("ctl00_ContentPlaceHolder1 _<ControlName>") however not by use of: document.getElementById("<%=<ControlName>.ClientID %>")

Is it possible for IMAR to show the way he should implement with the use the tutorial of VictorVictor .. that would be nice!! Thanks on behave of the RooiBosTea community.
 
Old January 15th, 2010, 06:53 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

Suppose you have a JavaScript function like this:

function SomeMethod(element)
{
var myElement = document.getElementById(element);
}

This method expects the ID of an element and then calls getElementById to get a refence to it. From your ASPX page, you can call the method like this:

<script ...>
SomeMethod ('<%=Button1.ClientID%>');
</script>

This sends the ClientID of Button1 as a string to SomeMethod.

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!




Similar Threads
Thread Thread Starter Forum Replies Last Post
javascript: null or not an object exception ganeshbraj ASP.NET 1.0 and 1.1 Professional 0 September 28th, 2007 08:01 AM
why File System GetAuditRules() returns null nomyjee ASP.NET 2.0 Professional 0 March 26th, 2006 08:06 PM
Using getElementById Frank Huddleston XML 4 November 11th, 2005 01:44 PM
getRealPath returns null in Fedora bbhutta Servlets 0 October 21st, 2005 07:20 AM
Access from a Dbase drop down returns NULL topshed Access 0 December 2nd, 2004 10:48 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.