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"> </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" 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?
Before you post, read our: 
