Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts

    onload not executing when script is included in HTML?

    I am attempting to set up an AJAX feature on my e-commerce site that I built more or less from scratch. I have implemented AJAX before where I had the Javascript written into the page's HTML document (ie not by using the <script src="..." type="..."></script> method).

    Well this time I am using the <script></script> method so that the Javascript is not on the actual HTML page (I have been advised to keep the different languages separated to reduce confusion). For some reason my window.onload function does not seem to be executing. Any help would be appreciated.

    The HTML code, of particular interest is the "<script src="includes/product_grid_order.js" type="text/javascript"></script>" toward the end. Let me know if I should cut out a bunch of the extra code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>World's Leader in All Things Shiny | Bright Lights</title>
        <meta name="keywords" content="lights, glowsticks, rave, electronic music, led" />
        <meta name="description" content="Bright Lights is an online marketplace and vendor of rave gear, lights, and any other light-related ideas your imagination can come up with.Bright Lights is the leader in quality light accessories" />
        <link href="includes/templatemo_style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="templateo_container">
    	<div id="templatemo_top_panel">
                <div id="site_logo"> <a href="index.php"><img src="images/templatemo_logo.fw.png" alt="Bright Lights Logo" /></a>
                </div>
                <!-- OR if you want to use text site title, use below codes -->
                        <!--
                <div id="site_title">
                        <a href="#">Company Name    
                    <span>your company slogan goes here</span>
                    </a>
                </div> 
                        -->
                <div id="header_menu_section">
                    <div id="header_links">
                    <a href="settings.php">Settings</a> | <a href="logout.php">Logout</a>                </div>
                    <div id="header_buttons">
                        <span class="header_menu contact_menu">
                            <a href="contact_us.php"></a>
                        </span>       
                        <span class="header_menu home_menu">
                            <a href="index.php"></a>
                        </span>
                    </div> 
            </div><!-- end of header mneu section -->      
        	<div class="cleaner"></div>
        </div> <!-- end of top panel -->
            <div id="templatemo_menu_banner_panel">
                            <div id="templatemo_banner">
                                <div class="header_02">Whatever your party and lighting needs, Bright Lights has you covered.
                                    <br /><br />
                                <p>Founded in 2012, Bright Lights aims to be the one stop shop for music and party lighting accessories. 
                                    <a href="#">Read more...</a></p>
                                 </div> <!-- end of header_02 -->
                            </div> <!-- end of banner -->
                            <div class="cleaner">&nbsp;</div>    
                        </div> <!-- end of menu & banner panel -->        <div id="templatemo_menu_wrapper">
                <div id="templatemo_menu">
                        <a href="index.php" class="current">Homepage</a>
                        <a href="partners.php">Partners</a>
                        <a href="our_company.php">Our Company</a>
                        <a href="contact_us.php">Contact Us</a>
                </div> <!-- end of menu -->        
           </div> <!-- end of menu wrapper -->
            <div id="templatemo_content_wrapper">
                <div id="templatemo_content">
                    <div id="templatemo_side_column">
                        <div class="special_header"><a href="submit_product.php">Submit</a></div>	            <div class="header_03"><a href="index.php?category=apparel">Apparel</a></div>
                        <div class="header_03"><a href="index.php?category=dj_systems">DJ Systems</a></div>
                        <div class="header_03"><a href="index.php?category=electronics">Electronics</a></div>
                        <div class="header_03"><a href="index.php?category=glowsticks">Glowsticks</a></div>
                        <div class="header_03"><a href="index.php?category=lighting_systems">Lighting Systems</a></div>
                        <div class="header_03"><a href="index.php?category=speakers">Speakers</a></div>                                  
                    </div> <!-- end of side column -->
    
                    
    <script type="text/javascript">
        var getCategory = '';
    </script>
    <script type="text/javascript" src="includes/utilities.js"></script>
    <script type="text/javascript" src="includes/ajax.js"></script>
    <script type="text/javascript" src="includes/json2.js"></script>
    
                <div id="templatemo_main_content_column">
                	<div class="header_01" style="background:none;">Current Listings</div>
                    <div class="product_grid_parameters">
                        <form name="product_grid_parameters" action="index.php" method="get">
                            <fieldset class="submit_fieldset">
                                        <select name="criteria" id="criteria">
                                            <option  value="date_of_creation">Recently Added</option>
                                            <option  value="price">Price</option>
                                            <option  value="product_name">Name</option>
                                        </select>
                                        <select name="order" id="order">
                                            <option value="DESC" >High to Low</option>
                                            <option value="ASC" >Low to High</option>
                                        </select>
                                        <select name="view_count" id="view_count">
                                            <option value="20" >20</option>
                                            <option value="40" >40</option>
                                            <option value="60" >60</option>
                                            <option value="80" >80</option>
                                            <option value="100" >100</option>
                                        </select>   
                            </fieldset>
                            <fieldset class="submit_fieldset">
                                        <input type="submit" id="submit" name="submit" value="Sort" />
                                        <input type="hidden" name="sorted" value="TRUE" />
                            </fieldset>
                        </form>
                    </div>
                    <div id="product_grid">
                    <div class="product_box"> 
                                <div class="product_image">
                                    <a href="view_product.php?product_id=17">
                                        <img style="width:190px; height:190px; margin-top:4px;" src="products/images/770588972.jpg" 
                                            alt="4&quot; Red Lighstik with Lanyard attached.  Will glow up to 10 hours."/>
                                    </a>
                                </div>
                                
                                <br /><strong>4" Red Supreme Glowstick</strong><br />
                                <strong>Price</strong>: $5.00<br />
                                <strong>Product Description</strong>: 4" Red Lighstik with Lanyard attached.  Will glow up to 10 hours....<br />
                                <strong>Product Created</strong>: 2013-02-21 11:57:22<br />
                                <strong>Product Category</strong>: <a href="index.php?category=Glowsticks">Glowsticks</a><br /><br />
                                
                                <div>
                                    <form class="product_grid_submit" action="cart.php" method="post" enctype="multi-part/form-data"><fieldset class="submit_fieldset"><em>Qty</em>: <select name="quantity"><option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="10">10</option>
    </select></fieldset>
                                        <fieldset class="submit_fieldset">
                                        <input type="submit" name="submit" value="Add to Cart" />
                                        <input type="hidden" name="product_id" value="17" />
                                        <input type="hidden" name="submitted" value="TRUE"/>
                                        </fieldset>
                                    </form>
                                </div>
                            </div><div class="product_box"> 
                                <div class="product_image">
                                    <a href="view_product.php?product_id=16">
                                        <img style="width:169px; height:190px; margin-top:4px;" src="products/images/597008355.jpg" 
                                            alt="Blue glow-in-the-dark top for ladies.  Powered by 2 AA batteries."/>
                                    </a>
                                </div>
                                
                                <br /><strong>Girls' Glow-in-the-Dark Top</strong><br />
                                <strong>Price</strong>: $80.00<br />
                                <strong>Product Description</strong>: Blue glow-in-the-dark top for ladies.  Powered by 2 AA batteries....<br />
                                <strong>Product Created</strong>: 2013-02-15 19:40:47<br />
                                <strong>Product Category</strong>: <a href="index.php?category=Apparel">Apparel</a><br /><br />
                                
                                <div>
                                    <form class="product_grid_submit" action="cart.php" method="post" enctype="multi-part/form-data"><fieldset class="submit_fieldset"><em>Qty</em>: <select name="quantity"><option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="10">10</option>
    </select></fieldset>
                                        <fieldset class="submit_fieldset">
                                        <input type="submit" name="submit" value="Add to Cart" />
                                        <input type="hidden" name="product_id" value="16" />
                                        <input type="hidden" name="submitted" value="TRUE"/>
                                        </fieldset>
                                    </form>
                                </div>
                            </div><div class="product_box"> 
                                <div class="product_image">
                                    <a href="view_product.php?product_id=7">
                                        <img style="width:190px; height:190px; margin-top:4px;" src="products/images/677848166.jpg" 
                                            alt="Blah  blah blah"/>
                                    </a>
                                </div>
                                
                                <br /><strong>Speaker 2</strong><br />
                                <strong>Price</strong>: $53.00<br />
                                <strong>Product Description</strong>: Blah  blah blah...<br />
                                <strong>Product Created</strong>: 2012-12-04 13:35:49<br />
                                <strong>Product Category</strong>: <a href="index.php?category=Electronics">Electronics</a><br /><br />
                                
                                <div>
                                    <form class="product_grid_submit" action="cart.php" method="post" enctype="multi-part/form-data"><fieldset class="submit_fieldset"><em>Qty</em>: <select name="quantity"><option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="10">10</option>
    </select></fieldset>
                                        <fieldset class="submit_fieldset">
                                        <input type="submit" name="submit" value="Add to Cart" />
                                        <input type="hidden" name="product_id" value="7" />
                                        <input type="hidden" name="submitted" value="TRUE"/>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>                </div>
                    <div class="cleaner"></div>
                </div> <!-- end of main content column -->            
                
                <div class="cleaner"></div>
    <script src="includes/product_grid_order.js" type="text/javascript"></script>
            </div> <!-- end of templatemo_content div -->
        </div> <!-- end of templatemo_content_wrapper -->
    
        <div id="templatemo_footer">
            Copyright © 2013 <a href="index.php">Bright Lights</a> | Designed by <a href="http://kylan.danconia.us">Kylan Hurt Web Services</a>
        </div> <!-- end of footer -->
    </div> <!-- end of templateo_container -->
            <script type="text/javascript">
                window.onload = function javascript_alert() {
                    'use strict';
                    //delete javascript disabled error message
                    document.getElementById('javascript_disabled_message').innerHTML = '';
                    
    
                    //re-calculate the total cart quantity in upper-right hand corner
                    if(sessionCart == true){
                        var totalCartQty = document.getElementById('total_cart_qty');
                        totalCartQty.innerHTML = '0';
                    }
                }
            </script>
            <script type="text/javascript">var sessionCart = false;</script><div>
        <p class="error_span" id="javascript_disabled_message">
            You currently have Javascript disabled.  You may lose some functionality without Javascript enabled.
        </p>
    </div>
    <ul id="notes_list"><li>Javascript test</li><li>Page accessed via default method.</li></ul><ul id="errors_list"></ul></body>
    </html>
    And here is the code for the product_grid_order.js file:
    Code:
    window.onload = function () {
        
        //add acquire elements by their names
        'use strict';
        var criteria = document.getElementById('criteria');
        var order = document.getElementById('order');
        var viewCount = document.getElementById('view_count');
        
        //U.addEvent(document.getElementById('criteria'), change, function() {reorder(); });
        //U.addEvent(document.getElementById('order'), change, function() {reorder(); });
        //U.addEvent(document.getElementById('view_count'), change, function() {reorder(); });
        document.getElementById('criteria').onchange=function(){reorder()};
        document.getElementById('order').onchange=function(){reorder()};
        document.getElementById('view_count').onchange=function(){reorder()};
        var notesList = document.getElementById('notes_list');
        notesList.innerHTML = 'onload executed';    
        
        function reorder () {
            'use strict';
            var notesList = document.getElementById('notes_list');
            notesList.innerHTML = 'onload executed';
            var ajax = getXMLHttpRequestObject();
            if (ajax) {
                
                //assign the values, at that moment, 
                var criteriaValue = criteria.value;
                var orderValue = order.value;
                var viewCountValue = viewCount.value;
                
                //create ajax object
                ajax.onreadystatechange = function() { //begin of function clause for readyStateChange
                    if(ajax.readyState === 4) { //start of correct ajax readyState (4) clause
                     //check the status code
                     if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status === 304) ) { //start of correct ajax status clause
                         var reorderResponse = JSON.parse(ajax.responseText);
                         
                         } //end of correct ajax status clause
                     
                    } //end of correct ajax readyState (4)
                 
                }; //end of function for execution on ready state change
                    var data = 'newCriteria=' + encodeURIComponent(criteriaValue) + '&newOrder=' + encodeURIComponent(orderValue) + 'newViewCount=' + encodeURIComponent(viewCountValue) + getCategory;
                    ajax.open('GET', 'resources/product_grid_order.php?' + data, true);
                    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    ajax.send(data);
            } //end of ajax object being set
            
        } //end of reorder() function definition
        
    } //end of javascript
    Notice that my notes_list element at the very bottom of the page is supposed to change when the windows.onload function is executed but it does not seem to be changing when the page is loaded. What gives?
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Move the script tags to immediately before the </body> tag. Once you do that you can get rid of the window.onload and just let the script run straight away.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    d'Anconia (03-15-2013)

  • #3
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Felgall: thank you I will keep that in mind next time.

    On a different note I think I figured out the issue. Apparently you have to be careful when you have multiple "window.onload" functions. I had one before the <script src="..."></script> area and that must have confused the browser. I simplified it to one function and that worked just fine.

    Consider this resolved.
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by d'Anconia View Post
    Apparently you have to be careful when you have multiple "window.onload" functions.
    Yes but I have only ever come across one situation where the script needs to use onload if placed at the bottom of the page - where it tests whether all the images loaded successfully and replaces any that didn't with something else. With all other scripts except framebreaker scripts simply placing them at the bottom of the page allows them to run straight away without crashing (framebreaker JavaScript is the one example where the script needs to go in the head instead of at the bottom).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,289
    Thanks
    12
    Thanked 345 Times in 341 Posts
    Quote Originally Posted by d'Anconia View Post
    Apparently you have to be careful when you have multiple "window.onload" functions. I had one before the <script src="..."></script> area and that must have confused the browser.
    well, this is expected behaviour. what you did is overwriting a property (the onload property (method) of the window object). or put simple, the last function of the same name defined wins.

    therefore the Event Listeners have been introduced.
    PHP Code:
    function test_1(evt) {
        
    console.log("function #1 executed ");
    }
    function 
    test_2(evt) {
        
    console.log("function #2 executed ");
    }
    window.addEventListener("load"test_1);
    window.addEventListener("load"test_2);
    // check the JS Console for the output 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •