I am developing a site that will consist of one HTML page. The HTML page will act as a shell for all of the XMLHttpRequests. I have two dropdown menu’s the first selection populates the second section, and the second selection populates an <ol> with list elements. Here is the HTML (Formatted to fit the allotted time):
<!DOCTYPE html>
<?php
//Get user Device
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect();
$layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop');
$thisPage = $_GET['mod'];
?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/plantSeed.js"></script>
<script type="text/javascript">pageExecute.init("<? echo $thisPage; ?>");</script>
<link rel="stylesheet" href="css/modstyles.css" type="text/css" media="screen">
<meta charset="utf-8">
<title id="browserTitle"></title>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<header id="mainHeader">
<div id="pageTitle">
<!-- -->
</div>
<script type="text/javascript"> pageExecute.populatePageTitle(); </script>
<div id="imgInfoTxtHead">
<h3 class="imgInfoTxt">Ag-01a</h3>
<p><i>Catheter Angiography</i></p>
</div>
</header>
<section id="mainSection">
<div id="largeImages">
<!-- Image Holder ...
</div>
<!-- End largeImages -->
<div id="leftMenu" class="ui-resizable">
<div id="menuHideBar"></div>
<div id="addHolder">
<!-- Quick Pick By Name Section -->
<h3><a href="#">Quick Pick By Name</a></h3>
<div id="quickPickName">
<form action="#">
<div>
<!-- TODO: Change to JQuery dropdown -->
<label for="areaSelect">Area Selection</label><br/>
<select id="areaSelect"></select><br/>
<label for="slideSelect">Slide Selection</label><br/>
<select id="slideSelect"></select>
</div>
</form>
<script type="text/javascript">
pageExecute.populateAreasDropDown();
</script>
</div>
<!-- Quick Pick By Image Section --> ...
<!-- Notes Section --> ...
<!-- Quiz Section --> ...
<!-- END leftMenu -->
</section>
<!-- END mainSection -->
<footer id="mainFooter">
....
</footer>
<!-- Scripts -->
<script>
$(".ddByArea").click(function () {
pageExecute.rebuild($(this).attr("value"));
});
$(".ddByName").click(function () {
alert(pageExecute.identifiers);
// pageExecute.populateIdentifiers($(this).attr("value"));
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("*").addClass("<? echo $layout ?>");
});
</script>
</body>
</html>
For whatever reason the last $.click() is not working. The alert doesn’t pop up. The click event right above does work, with no problems. So this leads me to believe it has nothing to do with order. Here is the pageExecute object peppered through the script:
JS
var pageExecute = {
identifiers:new Array(),
set:new Array(),
slide:"",
slideTitle:"",
slideType:"",
area:new Array(),
page:"",
selectedArea:"",
selectedIdent:"",
selectedSlide:"",
init:function (thisPage) {
//Populate Area Data from XML
var areaData = "./XML/Areas.xml";
var areaRequest = pageExecute.createXMLHttpRequest();
pageExecute.requestData(areaRequest, areaData, null, "area");
//Populate General Page Info from XML
var generalPageData = "";
if (thisPage != ""){
generalPageData = "./XML/" + thisPage + ".xml";
} else {
generalPageData = "./XML/" + pageExecute.area[0] + ".xml";
}
var generalRequest = pageExecute.createXMLHttpRequest();
pageExecute.requestData(generalRequest, generalPageData, null, "general");
},
requestData:function (request, URL, data, orders) {
if (request) {
request.open('GET', URL, false);
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseXML;
if (orders == "area") {
var rawAreas = response.getElementsByTagName("Areas")[0].childNodes[0].nodeValue;
var splitAreas = rawAreas.split(',');
var sortedAreas = splitAreas.sort();
for (var i = 0; i < splitAreas.length; i++) {
pageExecute.area[i] = sortedAreas[i];
}
}
else if (orders == "general") {
//Pull page title from XML
pageExecute.page = response.getElementsByTagName("Area")[0].childNodes[0].nodeValue;
//Pull all slides from XML
var rawSet = response.getElementsByTagName("Slide");
for(var j = 0; j < rawSet.length; j++){
pageExecute.set[j] = rawSet[j].childNodes[0].nodeValue;
}
pageExecute.slideType = response.getElementsByTagName("Type")[0].childNodes[0].nodeValue;
} else if (orders == "slides"){
}else if (orders == "identifiers"){
var rawIdent = response.getElementsByTagName("Slide").nodeValue(pageExecute.selectedSlide.substring(0,pageExecute.selectedSlide.indexOf(" "))).getElementsByTagName("Identifier");
for (var k = 0; k < rawIdent.length; k++){
pageExecute.identifiers[k]=rawIdent[k].childNodes[0].nodeValue;
}
}
}
} else {
alert('There was a problem retrieving the data: \n' + request.statusText);
request = null;
}
};
request.send(data);
request.abort();
} else {
alert("Sorry, there was an error loading this information!");
}
},
createXMLHttpRequest:function () {
var request = false;
if (window.XMLHttpRequest) {
if (typeof XMLHttpRequest == "undefined") {
var xhrNames = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < xhrNames.length; i++) {
try {
request = new ActiveXObject(xhrNames[i]);
break;
} catch (e) {
request = false;
}
}
} else {
request = new XMLHttpRequest();
}
}
return request;
},
populateAreasDropDown:function () {
for (var i = 0; i < pageExecute.area.length; i++) {
$("<option class='ddByArea' value='" + pageExecute.area[i] + "'>" + pageExecute.area[i] + "</option>").appendTo("#areaSelect");
}
},
populateSlidesDropDown:function (thisArea) {
var slideRequest = pageExecute.createXMLHttpRequest();
pageExecute.requestData(slideRequest, "./XML/" + thisArea + ".xml", null, "slides");
for (var i = 0; i < pageExecute.set.length; i++) {
$("<option class='ddByName' value='" + pageExecute.set[i] + "'>" + pageExecute.set[i] + " - " + pageExecute.slideTitle + "</option>").appendTo("#slideSelect");
}
},
populateIdentifiers:function(thisSlide){
pageExecute.selectedSlide = thisSlide;
var identData = "./XML/" + pageExecute.selectedArea.substring(0, pageExecute.selectedArea.indexOf(" ")) + ".xml";
var identRequest = pageExecute.createXMLHttpRequest();
pageExecute.requestData(identRequest, identData, null, "identifiers");
for(var l = 0; l < pageExecute.identifiers; l++){
$("#identList").append("<li>" + pageExecute.identifiers[l] + "</li>")
}
},
populatePageTitle: function(){
$("#browserTitle").append(pageExecute.slideType + ": " + pageExecute.page);
$("#pageTitle").append("<h3>" + pageExecute.slideType + ": " + pageExecute.page + "</h3>");
var firstSlide = pageExecute.set[0];
var lastSlide = pageExecute.set[pageExecute.set.length - 1];
$("#pageTitle").append("<p><i>" + firstSlide + " through " + lastSlide + "</i></p>")
},
rebuild: function(thisArea){
pageExecute.selectedArea = thisArea;
var trimArea = thisArea.substring(0, thisArea.indexOf(" "));
pageExecute.init(trimArea);
//Rebuild Page information
$("#browserTitle").html(pageExecute.slideType + ": " + pageExecute.page);
$("#pageTitle h3").html(pageExecute.slideType + ": " + pageExecute.page);
var firstSlide = pageExecute.set[0];
var lastSlide = pageExecute.set[pageExecute.set.length - 1];
$("#pageTitle p").html("<i>" + firstSlide + " through " + lastSlide + "</i>");
//Remove existing options from the slides dropdown and add new.
$(".ddByName").remove();
pageExecute.populateIdentifiers(pageExecute.slide[0])
}
};
I apologize for the length, I tried to cut out as much fat as possible. Any ideas why the click event above the last click even works (ddByAreaclass), but the last one doesn’t (ddbyName class)? Both of those items are created with the pageExecute script. Thanks for looking
I have two dropdown menu’s the first selection populates the second section…..
I guess this will populate the first dropdown:
…while the page is loading.
The 2nd dropdown will be populated when the user selects an option, so the options of the 2nd dropdown are not available yet when you call
$(".ddByName").click()solution:
bind the 2nd click-function at the end of
pageExecute.populateSlidesDropDown()