Master page / javascript issues

davearia · Mar 25, 2008

Hi,

I was playing around with some javascript earlier, I got everything working in a test page and then put it into the page it needs to be in which happens to have a master page.

If I give 2 really basic pages, the first is a non-master page which the javascript correctly fires from:

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>
<!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 onload="testing()">
        <script language="javascript" type="text/javascript">
            <!--   
                //Run when page loads.         
                function testing()
                {
                    alert(Are you listening?);            
                }                        
            //-->        
        </script>
        <form id="form1" runat="server">
            <table>
                <tr style="padding-left:400px">
                    <td valign="middle">
                        <asp:Button ID="btnFade" runat="server" Text="Fade"/>                                                                         
                    </td>
                    <td valign="middle">
                        <img runat="server" id="imgInfo" src="Images/updateSuccessful.jpg" alt=""/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

The second has a master page and the javascript does not fire:

Code:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <div onload="testing()">
        <script language="javascript" type="text/javascript">
            <!--   
                //Run when page loads.         
                function testing()
                {
                    alert(Are you listening?);            
                }                        
            //-->        
        </script>
   </div>
</asp:Content>

Can somebody tell me where I am going wrong?

Thanks, Dave.

Diesel · Mar 31, 2008

The onload event of the window object (or body tag) is specifically fired when the page finishes loading by the browser. The entire HTML page is loaded into a document object model (DOM) and the DOM has certain events that it calls during the lifetime of the page.

In the second code example, you have attached a property to a random div tag called onload. The browser will not do anything with this property. The DOM just sees it as a normal div tag.

You can still use the onload event of the body tag to call the function, but I recommend using a seperate javascript function to add function calls to the onload event. Adding an event to the onload event inline overwrites any other functions calls to that event, and if you are using third party libraries, this can be an issue. Anyway, here is a popular javascript function that you can use to chain function calls to the onload event...

function addLoadEvent(func) {
2 var oldonload = window.onload;
3 if (typeof window.onload != function) {
4 window.onload = func;
5 } else {
6 window.onload = function() {
7 if (oldonload) {
8 oldonload();
9 }
10 func();
11 }
12 }
13 }
14
15 addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);

Master page / javascript issues

davearia

Well-known member

Diesel

Well-known member

Similar threads