I have been attempting to pass values to code behind and have gone through the forums to determine the best way to do this. A number of the answers suggested using a hidden field. I have been trying to do just that but keep getting an error when I debug saying that the JAVA variable is null when it retrieves the element by ID. I cannot seem to figure out why because I am using the exact code examples from the answers that were marked an the best solution and working correctly. I must be doing something wrong but I can't figure out what is is. Below is the code I borrowed from the forums for the ASPX page and the code behind.
***<Page Code>***
%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript">
{
var hidden1 = document.getElementById('hidvalue')
hidden1.value=window.innerWidth.toString & "X" & window.innerHeight.toString;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<input id="hidvalue" type="hidden" runat="server" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</asp:Content>
***<Code Behind Page>***
Partial Class test
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Label1.Text = hidvalue.Value
End Sub
End Class
The Error is thrown when the JAVA script gets to the line that starts with the code 'hidden1.value=window.innerWidth.toString'. The error says that it can't assign a value to the variable 'hidden1' because it is null. It should be populating with the element 'hidvalue' but it apparently is not and I cannot figure out why. Does anyone have an idea for me as to what I am doing wrong here?
REVISION: Thanks to everyone's help in resolving the initial problem, which was fixed by adding OnLoad and ReSize to the page with code in each to enable these events to track the window size in the proper page load order. (See code below) For the test.aspx page, I am using a visible label to store the size so I can see the values as they change. The test.aspx child page is running under a basically blank master page and it displays the window size at load and displays a constant changing value when resizing perfectly.
***<MASTER PAGE>***
<%@ Master Language="VB" AutoEventWireup="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"/>
</head>
<body>
<form runat="server">
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
</form>
</body>
</html>
***<TEST PAGE>***
<%@ Page Title="" Language="VB" MasterPageFile="~/Empty.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript">
function attachEventHandlerResize(element, eventToHandle, eventHandler) {
if (element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if (element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandlerResize(window, "onresize", function () {
var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
hidden1.innerText=window.innerWidth + "X" + window.innerHeight;
});
function attachEventHandlerLoad(element, eventToHandle, eventHandler) {
if (element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if (element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandlerLoad(window, "onload", function () {
var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
hidden1.innerText = window.innerWidth + "X" + window.innerHeight;
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:Label ID="LabelWindowSize" runat="server"/>
</asp:Content>
***<CODE BEHIND TEST.ASPX>***
Imports System.Diagnostics
Partial Class test
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Debug.Print("LabelWindowSize.text value=" + LabelWindowSize.Text)
End Sub
End Class
The label on the page displays the values correctly in the browser (ie:1050X724). However, for some reason, the code behind can not access the displayed value when getting the Text from the label. The debug output is: 'LabelWindowSize.text value=' with no value, and a check of the text value for LabelWindowSize shows "".
I have a hunch the problem is happening because of the order in which a page loads, executes, and accesses elements, much like the earlier solution resolved. Does anyone have an idea what is actually causing this problem?
REVISION: Ok, changed the aspx page to use a hidden text control
<%@ Page Title="" Language="VB" MasterPageFile="~/Empty.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript">
function attachEventHandlerResize(element, eventToHandle, eventHandler) {
if (element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if (element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandlerResize(window, "onresize", function () {
var hidden1 = document.getElementById('<%= labelwindowsize.ClientID%>');
hidden1.value = window.innerWidth + "X" + window.innerHeight;
});
function attachEventHandlerLoad(element, eventToHandle, eventHandler) {
if (element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if (element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandlerLoad(window, "onload", function () {
var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
hidden1.value = window.innerWidth + "X" + window.innerHeight;
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<input id="labelwindowsize" type="hidden" runat="server"/>
</asp:Content>
It is populating ok as you can see from the page inspector view:
<form name="aspnetForm" id="aspnetForm" action="test.aspx" method="post">...</form>
<div>...</div>
</div>
<div>...</div>
</div>
<div class="page">...</div>
<div class="main">...</div>
<input name="ctl00$MainContent$labelwindowsize" id="ctl00_MainContent_labelwindowsize" type="hidden" value="645X557"></input>
</input>
</div>
</div>
</form>
However, the code behind still cannot see the value ... the following line produces "" for the 'value'
Debug.Print("LabelWindowSize.text value=" + labelwindowsize.Value)
For a more detailed explanation: The purpose for the code I am trying to implement is to retrieve the browser window size in order to store the width and height in an App_Code module as global variables to be accessed by pages. The reason for wanting the global window size variables is to set the size of scrollable popups that open on several pages to the full size of the current window. I am trying to do this in order to display as much as I can of images and other large items like huge tables or grids that are much larger than the average display window. The reason I want to do this is to cut down on the amount of scrolling the user needs to do to view the entire contents of the scrollable popup window and to be able to resize the popup to the full window size when the user resizes the browser window.
