Start Free Trial

asked on

IE fix and additional form

Can anyone help me work out why the following script doesn't display the map object in IE (works fine in Firefox and Chrome)?

Also, I need to add and additional form box after 'store' as a next layer of conditional logic but cant seem to work it out.

Help much appreciated!

PS - the script came from here: http://www.htmlforums.com/html-xhtml/t-conditional-html-form-103522.html

<!DOCTYPE html>
<html>
<head>
<title>Store Locator</title>
<style>
body {
	margin: 20px;
	font: 12pt Constantia, Garamond, serif;
}

select {
	min-width: 200px;
}

#address {
	font-size: 16pt;
}

#map object {
	width: 600px;
	height: 400px;
	border: 1px solid #000;
}
</style>
<script>
var stores = {
	DC: [
		"District of Columbia",
		["The White House", "1600 Pennsylvania Avenue NW, Washington, DC 20500"]
	],
	OK: [
		"Oklahoma"
	],
	NY: [
		"New York",
		["Original Soup Man", "259 West 55th Street, New York, NY 10019"],
		["Tom's Restaurant", "2880 Broadway, New York, NY 10025"]
	]
};

window.onload = function() {
	var el_state = document.getElementById("state");
	var el_store = document.getElementById("store");
	var el_address = document.getElementById("address");
	var el_map = document.getElementById("map");

	for (var i in stores) {
		el_state.options[el_state.options.length] = new Option(stores[i][0], i);
	}

	el_state.onchange = function() {
		el_store.options.length = 0;
		var len = stores[this.value].length;
		for (var i = 1; i < len; i++) {
			el_store.options[el_store.options.length] = new Option(stores[this.value][i][0], stores[this.value][i][1]);
		}
	}

	el_store.onchange = function() {
		el_address.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />" + this.value;
		while (el_map.hasChildNodes()) {
			el_map.removeChild(el_map.firstChild);
		}
		var obj = document.createElement("object");
		obj.data = "http://maps.google.com/maps?q=" + encodeURIComponent(this.value) + "&iwloc=&output=embed";
		el_map.appendChild(obj);
	}
}
</script>
</head>

<body>
	<h3>Choose a store:</h3>
	<select id="state" size="10"></select>
	<select id="store" size="10"></select>
	<p id="address"></p>
	<div id="map"></div>
</body>
</html>

Open in new window

Michel Plungjan

http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/

here:

  var data = "http://maps.google.com/maps?q=" + encodeURIComponent(this.value) + "&iwloc=&output=embed";
  var obj = createMyObject("text/html",data); 
  el_map.appendChild(obj);

Open in new window

using

function createMyObject(type, data) {
   var element = null;
   try {
      // First try the IE way; if this fails then use the standard way
      element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
   } catch (e) {
      // Probably failed because we're not running on IE
   }
   if (!element) {
      element = document.createElement("object");
      element.data = data;
   }
   return element;
}

Open in new window

ASKER

Many thanks mplungjan, that has fixed the IE problem!

Forgive my ignorance (I am very new to JavaScript) but how do I add an additional form box after 'store' to display an extra piece of information from the object array?

E.g. If I add the following after line 43: (code snippet 1 - below)

and then the following after line 57: (code snippet 2 - below)

and add <select id="time" size="10"></select> to the <body> section.

I am going wrong somewhere but not sure where.

Your help is most appreciated.

var el_time = document.getElementById("time");

Open in new window

el_state.onchange = function() {
		el_time.options.length = 0;
		var len = stores[this.value].length;
		for (var i = 1; i < len; i++) {
			el_store.options[el_store.options.length] = new Option(stores[this.value][i][0], stores[this.value][i][1]);
		}
	}

Open in new window

Michel Plungjan

What is the time for? If opening times, perhaps a div or span is nicer than a select

Add what did you add to the object?

ASKER

I am actually using this script to make a booking form with different field names and need a 3rd box, my actual names are:

"centre" (location) > "course" > "dates" (in the script example it is displayed as "state" > "store"

For my needs the dates vary according to the course selected. In the object I have just added some more text e.g:

"District of Columbia",
["The White House", "DATE1", "1600 Pennsylvania Avenue NW, Washington, DC 20500"]

But this seems to stop the map loading.

Michel Plungjan

Ok I'll take a look later

Michel Plungjan

Please first fix your html and your object to use the final format.
It is too confusing for me now

What is DATE1 for example? You want more than one date

If you add stuff, add it to the end if you want the previous stuff to still work

ASKER

Thanks for your response mplungjan, apologies for the confusion - your help is much appreciated!

I will need several dates per course option. Also, rather than showing a google map I want to display a page from the website in the map object box once a course has been selected (which works fine).

I am not sure where to put the dates into the object as there will be multiple dates per course option - as an example I have put some in [[]] which I would like to appear in the 3rd box once the first centre and first course are selected.

Here is the updated code:

<script>
var courses = {
	RA: [
		"Radley",
		["English + Multi-Activity : 11-14 years", "radley.php"],
		["English + Multi-Activity : 14-17 years", "radley.php"],
		[["Arrival: Wednesday 11th July - Departure: Wednesday 25th July 2012"]],
		[["Arrival: Wednesday 11th July - Departure: Wednesday 1st August 2012"]]

	],
	SH: [
		"Shrewsbury",
		["English + Multi-Activity : 12-16 years", "shrewsbury.php"],
		["Sports / Dance Academy : 12-16 years", "sportsacademy.php"]
               
	],
	WO: [
		"Woldingham",
		["English + Multi-Activity : 9-14 years", "woldingham.php"]
       
	],
	MA: [
		"Marymount",
		["English + Multi-Activity : 10-13 years", "marymount.php"]
       
	],
	UP: [
		"Uppingham",
		["English + Multi-Activity : 12-16 years", "uppingham.php"],
		["Pre-Boarding Course : 12-16 years", "uppinghamacademic.php"]
	],
	LH: [
		"London - Half Day (non-res)",
		["Juniors - Mornings (09:00-12:00) : 5-17 years", "london.php"],
		["Juniors - Afternoons (13:00-17:00) : 5-17 years", "london.php"],
		["Adults - Mornings (09:00-12:00) : 18+ years", "london.php"],
		["Adults - Afternoons (13:00-17:00) : 18+ years", "london.php"]
       
	],
	LF: [
		"London - Full Day (non-res)",
		["Full Day : 8-13 years", "londonfullday.php"]
		
        ]
	
	
};

window.onload = function() {
	var el_centre = document.getElementById("centre");
	var el_course = document.getElementById("course");
	var el_dates = document.getElementById("dates");
	var el_address = document.getElementById("address");
	var el_map = document.getElementById("map");

	for (var i in courses) {
		el_centre.options[el_centre.options.length] = new Option(courses[i][0], i);
	}

	el_centre.onchange = function() {
		el_course.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_course.options[el_course.options.length] = new Option(courses[this.value][i][0], courses[this.value][i][1]);
		}
	}
	
	el_course.onchange = function() {
		el_dates.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_dates.options[el_dates.options.length] = new Option(courses[this.value][i][0], courses[this.value][i][1]);
		}
	}
		

	el_course.onchange = function() {
		el_address.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
		while (el_map.hasChildNodes()) {
			el_map.removeChild(el_map.firstChild);
		}
		 var data = "http://www.mydomain.com/" + encodeURIComponent(this.value) ;
		 var obj = createMyObject("text/html",data); 
			el_map.appendChild(obj);
	}
	function createMyObject(type, data) {
   var element = null;
   try {
      // First try the IE way; if this fails then use the standard way
      element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
   } catch (e) {
      // Probably failed because we're not running on IE
   }
   if (!element) {
      element = document.createElement("object");
      element.data = data;
   }
   return element;
}
}
</script>


<body>
	<h3>Choose a course:</h3>
	<select id="centre" size="7" ></select>
	<select id="course" size="7" ></select>
	<h3>Choose the dates:</h3>
        <select id="dates" size="7" ></select>
	<p id="address"></p>
	<div class="rule"></div>
	<br>
	<div id="map"></div>
</body>

Open in new window

Michel Plungjan

I'll have a look.

You would be better off declaring the dates in separate entries like

RA: {
title:"Radley",
courses: [
{course-title:"English + Multi-Activity : 11-14 years",
page:"radley.php",
Arrival: "Wednesday 11th July,
Departure: "Wednesday 25th July 2012"
},
{course-title:"English + Multi-Activity : 14-17 years",
page:"radley.php"},
Arrival: "Wednesday 11th July",
Departure: "Wednesday 1st August 2012"
}
],

ASKER

Thanks, that does look more sensible.

How would I add more dates for each course-title?

Michel Plungjan

Like this

ArrayOfThings: [
{thingName1:"thing 1 value", thingName2:"thing 2 value"}, <<<<<< comma here
{thingName1:"thing 1 value", thingName2:"thing 2 value"}, <<<<<< comma here
{thingName1:"thing 1 value", thingName2:"thing 2 value"} <<<<<< NO comma here on the last item
]

So in your case

RA: {
title:"Radley",
courses: [
{course-title:"English + Multi-Activity : 11-14 years",
page:"radley.php",
schedules: [
{ Arrival: 20120711, Departure: 20120725"},
{ Arrival: 20120726, Departure: 20120731"},
{ Arrival: 20120001, Departure: 20120814"}
]
},
{course-title:"English + Multi-Activity : 14-17 years",
page:"radley.php"},
schedules: [
{ Arrival: 20120711, Departure: 20120725"}
]
}
],

ASKER

Thanks mplungjan.

That definitely looks better but after editing the item names I can't seem to get anything to load into the forms.

Can you spot where I have gone wrong:

var courses = {
	RA: {
  title:"Radley",
  courses: [
    {course-title:"English + Multi-Activity : 11-14 years",
      page:"radley.php",
      schedules: [
        { Arrival: 20120711, Departure: 20120725"},
        { Arrival: 20120726, Departure: 20120731"},
        { Arrival: 20120001, Departure: 20120814"}
      ]    
    },
  {course-title:"English + Multi-Activity : 14-17 years",
    page:"radley.php"},
      schedules: [
        { Arrival: 20120711, Departure: 20120725"}
      ]    
  }
]
	
	
};

window.onload = function() {
	var el_title = document.getElementById("title");
	var el_course-title = document.getElementById("courses");
	var el_schedules = document.getElementById("schedules");
	var el_page = document.getElementById("page");
	var el_map = document.getElementById("map");

	for (var i in courses) {
		el_title.options[el_centre.options.length] = new Option(courses[i][0], i);
	}

	el_title.onchange = function() {
		el_course-title.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_course-title.options[el_course-title.options.length] = new Option(courses[this.value][i][0], courses[this.value][i][1]);
		}
	}
	
	el_course.onchange = function() {
		el_schedules.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_schedules.options[el_schedules.options.length] = new Option(courses[this.value][i][0], courses[this.value][i][1]);
		}
	}
		

	el_course.onchange = function() {
		el_course-title.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
		while (el_page.hasChildNodes()) {
			el_page.removeChild(el_map.firstChild);
		}
		 var data = "http://www.mydomain.com/" + encodeURIComponent(this.value) ;
		 var obj = createMyObject("text/html",data); 
			el_page.appendChild(obj);
	}
	function createMyObject(type, data) {
   var element = null;
   try {
      // First try the IE way; if this fails then use the standard way
      element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
   } catch (e) {
      // Probably failed because we're not running on IE
   }
   if (!element) {
      element = document.createElement("object");
      element.data = data;
   }
   return element;
}
}
</script>


<body>
	<h3>Choose a course:</h3>
	<select id="title" size="7" ></select>
	<select id="courses" size="7" ></select>
	<h3>Choose the dates:</h3>
        <select id="schedules" size="7" ></select>
	<p id="courses"></p>
	<div class="rule"></div>
	<br>
	<div id="page"></div>
</body>

Open in new window

Michel Plungjan

That is correct

the script needs to be fixed to work with the new format.

Here is a beginning. I fixed the typos in the object

I need to continue later

<script>
var courses = {
	RA: {
    title: "Radley",
    courses: [
      {
        "course_title":"English + Multi-Activity : 11-14 years",
        page:"radley.php",
        schedules: [
          { Arrival: 20120711, Departure: 20120725},
          { Arrival: 20120726, Departure: 20120731},
          { Arrival: 20120001, Departure: 20120814}
        ]    
      },
      { 
      "course_title":"English + Multi-Activity : 14-17 years",
      page:"radley.php",
        schedules: [
          { Arrival: 20120711, Departure: 20120725 }
        ]    
      }
    ]
  }	
}

window.onload = function() {
	var el_title = document.getElementById("title");
	var el_course = document.getElementById("courses");
	var el_course_title = document.getElementById("course_title");
	var el_schedules = document.getElementById("schedules");
	var el_page = document.getElementById("page");
	var el_map = document.getElementById("map");

	for (var i in courses) {
		el_title.options[el_title.options.length] = new Option(courses[i].title, i);
	}

	el_title.onchange = function() {
		el_course.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_course.options[el_course.options.length] = new Option(courses[this.value][i].course_title, courses[this.value][i].course_title);
		}
	}
	
	el_course.onchange = function() {
		el_schedules.options.length = 0;
		var len = courses[this.value].length;
		for (var i = 1; i < len; i++) {
			el_schedules.options[el_schedules.options.length] = new Option(courses[this.value][i][0], courses[this.value][i][1]);
		}
	}
		

	el_course.onchange = function() {
		el_course_title.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
		while (el_page.hasChildNodes()) {
			el_page.removeChild(el_map.firstChild);
		}
		 var data = "http://www.mydomain.com/" + encodeURIComponent(this.value) ;
		 var obj = createMyObject("text/html",data); 
			el_page.appendChild(obj);
	}
	function createMyObject(type, data) {
   var element = null;
   try {
      // First try the IE way; if this fails then use the standard way
      element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
   } catch (e) {
      // Probably failed because we're not running on IE
   }
   if (!element) {
      element = document.createElement("object");
      element.data = data;
   }
   return element;
}
}
</script>


<body>
	<h3>Choose a course:</h3>
	<select id="title" size="7" ></select>
	<select id="courses" size="7" ></select>
	<h3>Choose the dates:</h3>
        <select id="schedules" size="7" ></select>
	<p id="courses"></p>
	<div class="rule"></div>
	<br>
	<div id="page"></div>
	<div id="course_title">
</body>

Open in new window

Michel Plungjan

I think this is what you want

<script>
var courses = {
  RA: {
    title: "Radley",
    courses: [
      {
        "course_title":"English + Multi-Activity : 11-14 years",
        page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25"},
          { Arrival: "2012/07/26", Departure: "2012/07/31"},
          { Arrival: "2012/00/01", Departure: "2012/08/14"}
        ]    
      },
      { 
      "course_title":"English + Multi-Activity : 14-17 years",
      page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25" }
        ]    
      }
    ]
  }  
}

var dayNames = "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
var monthNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(","); 
function formatDate(date) {
  var yyyy = date.getFullYear();
  var mm = date.getMonth();
  var dd = date.getDate();
  var day = dayNames[date.getDay()];
  return day + ", " + monthNames[mm] + " " + dd + " " + yyyy;
}
window.onload = function() {
  var el_title = document.getElementById("title");
  var el_course = document.getElementById("courses");
  var el_course_title = document.getElementById("course_title");
  var el_schedules = document.getElementById("schedules");
  var el_page = document.getElementById("page");
  var el_map = document.getElementById("map");

  for (var i in courses) {
    el_title.options[el_title.options.length] = new Option(courses[i].title, i);
  }

  el_title.onchange = function() {
    el_course.options.length = 0;
    var len = courses[this.value].courses.length;
    for (var i = 0; i < len; i++) {
        var thisCourse = courses[this.value].courses[i]
      el_course.options[el_course.options.length] = new Option(thisCourse.course_title, thisCourse.course_title);
    }
  }
  
  el_course.onchange = function() {
    el_schedules.options.length = 0;
    var schedules = courses[el_title.value].courses[el_course.selectedIndex].schedules
    var len = schedules.length;
    for (var i = 0; i < len; i++) {
      thisSchedule = schedules[i];
      var arrival = formatDate(new Date(thisSchedule.Arrival));
      var departure = formatDate(new Date(thisSchedule.Departure));
      el_schedules.options[el_schedules.options.length] = new Option(arrival + " - " + departure,thisSchedule.Arrival+"-"+thisSchedule.Departure);
    }
  }
    

  el_schedules.onchange = function() {
    el_course_title.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
    while (el_page.hasChildNodes()) {
      el_page.removeChild(el_map.firstChild);
    }
     var data = "http://www.mydomain.com/" + courses[el_title.value].courses[el_course.selectedIndex].page;
     var obj = createMyObject("text/html",data); 
     el_page.appendChild(obj);
  }

}

function createMyObject(type, data) {
  var element = null;
  try {
    // First try the IE way; if this fails then use the standard way
    element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
  } 
  catch (e) {
    // Probably failed because we're not running on IE
  }
  if (!element) {
     element = document.createElement("object");
     element.data = data;
  }
  return element;
}

</script>


<body>
  <h3>Choose a course:</h3>
  <select id="title" size="7" ></select>
  <select id="courses" size="7" ></select>
  <h3>Choose the dates:</h3>
        <select id="schedules" size="7" ></select>
  <p id="courses"></p>
  <div class="rule"></div>
  <br>
  <div id="page"></div>
  <div id="course_title">
</body>

Open in new window

ASKER

Many thanks mplungjan, that is almost it. For some reason the first course_title isnt showing but the dates showing for couse_title 2 are showing what should be for course_title 1 (but oddly only 2 of of the 3 in the object).

I have attached a screen shot if that helps.

Your help really is appreciated!

User generated image

Michel Plungjan

Ah, a leftover from your script.

Change i=1 to i=0

for (var i = 0; i < len; i++) {

twice - I fixed it in the previous code

I also moved your question to JavaScript since it does not have anything to do with Java

Here is a DEMO

ASKER

Great that seems to be working.

How do I add more courses to the object now? This following doesnt seem to work:

<script>
var courses = {
  RA: {
    title: "Radley",
    courses: [
      {
        "course_title":"English + Multi-Activity : 11-14 years",
        page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25"},
          { Arrival: "2012/07/26", Departure: "2012/07/31"},
          { Arrival: "2012/00/01", Departure: "2012/08/14"}
        ]    
      },
      { 
      "course_title":"English + Multi-Activity : 14-17 years",
      page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25" }
        ]    
      }
    ],
  SH: {
    title: "Shrewsbury",
    courses: [
      {
        "course_title":"English + Multi-Activity : 12-16 years",
        page:"shrewsbury.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25"},
          { Arrival: "2012/07/26", Departure: "2012/07/31"},
          { Arrival: "2012/00/01", Departure: "2012/08/14"}
        ]    
      },
      { 
      "course_title":"Sports Academy",
      page:"sportsacademy.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25" }
        ]    
      }
    ]
  }
}

var dayNames = "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
var monthNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(","); 
function formatDate(date) {
  var yyyy = date.getFullYear();
  var mm = date.getMonth();
  var dd = date.getDate();
  var day = dayNames[date.getDay()];
  return day + ", " + monthNames[mm] + " " + dd + " " + yyyy;
}
window.onload = function() {
  var el_title = document.getElementById("title");
  var el_course = document.getElementById("courses");
  var el_course_title = document.getElementById("course_title");
  var el_schedules = document.getElementById("schedules");
  var el_page = document.getElementById("page");
  var el_map = document.getElementById("map");

  for (var i in courses) {
    el_title.options[el_title.options.length] = new Option(courses[i].title, i);
  }

  el_title.onchange = function() {
    el_course.options.length = 0;
    var len = courses[this.value].courses.length;
    for (var i = 0; i < len; i++) {
        var thisCourse = courses[this.value].courses[i]
      el_course.options[el_course.options.length] = new Option(thisCourse.course_title, thisCourse.course_title);
    }
  }
  
  el_course.onchange = function() {
    el_schedules.options.length = 0;
    var schedules = courses[el_title.value].courses[el_course.selectedIndex].schedules
    var len = schedules.length;
    for (var i = 0; i < len; i++) {
      thisSchedule = schedules[i];
      var arrival = formatDate(new Date(thisSchedule.Arrival));
      var departure = formatDate(new Date(thisSchedule.Departure));
      el_schedules.options[el_schedules.options.length] = new Option(arrival + " - " + departure,thisSchedule.Arrival+"-"+thisSchedule.Departure);
    }
     var data = "http://www.mydomain.com/" + courses[el_title.value].courses[el_course.selectedIndex].page;
     var obj = createMyObject("text/html",data); 
     el_page.appendChild(obj);
  }
}
    

  el_schedules.onchange = function() {
    el_course_title.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
    while (el_page.hasChildNodes()) {
      el_page.removeChild(el_map.firstChild);
    
  }

}

function createMyObject(type, data) {
  var element = null;
  try {
    // First try the IE way; if this fails then use the standard way
    element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
  } 
  catch (e) {
    // Probably failed because we're not running on IE
  }
  if (!element) {
     element = document.createElement("object");
     element.data = data;
  }
  return element;
}

</script>


<body>
  <h3>Choose a course:</h3>
  <select id="title" size="7" ></select>
  <select id="courses" size="7" ></select>
  <h3>Choose the dates:</h3>
        <select id="schedules" size="7" ></select>
  <p id="courses"></p>
  <div class="rule"></div>
  <br>
  <div id="page"></div>
  <div id="course_title">
</body>

Open in new window

Also, i moved the page load function to work when the course_title is clicked rather than dates which has worked except when I click on a second course_title it loads a seco.nd page object (and continues to load more and more when clicking between the titles)

Michel Plungjan

You missed a }

] <<<< no comma here (schedules
}, <<<<< comma here but not on the very last
SH: {

Demo here: http://jsfiddle.net/mplungjan/Mu6kv/

I do not understand your last paragraph

ASKER

Ah thanks, thought it would be an extra/missing } !

I was hoping that by moving the page load function from el_schedules.onchange to el_course.onchange would mean that it loads the page according to the course_title rather that when the date is clicked. The below has worked in that respect but additional page objects appear everytime a different course_title is clicked. I need it to replace the existing page object rather than create more below.

I also have managed to lose the bit that prints selected dates.

Many thanks for your patience!

var courses = {
  RA: {
    title: "Radley",
    courses: [
      {
        "course_title":"English + Multi-Activity : 11-14 years",
        page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25"},
          { Arrival: "2012/07/26", Departure: "2012/07/31"},
          { Arrival: "2012/00/01", Departure: "2012/08/14"}
        ]    
      },
      {
      "course_title":"English + Multi-Activity : 14-17 years",
      page:"radley.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25" }
        ]    
      }
    ]
  },
  SH: {
    title: "Shrewsbury",
    courses: [
      {
        "course_title":"English + Multi-Activity : 12-16 years",
        page:"shrewsbury.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25"},
          { Arrival: "2012/07/26", Departure: "2012/07/31"},
          { Arrival: "2012/00/01", Departure: "2012/08/14"}
        ]    
      },
      {
      "course_title":"Sports Academy",
      page:"sportsacademy.php",
        schedules: [
          { Arrival: "2012/07/11", Departure: "2012/07/25" }
        ]    
      }
    ]
  }  
}

var dayNames = "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
var monthNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(",");
function formatDate(date) {
  var yyyy = date.getFullYear();
  var mm = date.getMonth();
  var dd = date.getDate();
  var day = dayNames[date.getDay()];
  return day + ", " + monthNames[mm] + " " + dd + " " + yyyy;
}
window.onload = function() {
  var el_title = document.getElementById("title");
  var el_course = document.getElementById("courses");
  var el_course_title = document.getElementById("course_title");
  var el_schedules = document.getElementById("schedules");
  var el_page = document.getElementById("page");
  var el_map = document.getElementById("map");

  for (var i in courses) {
    el_title.options[el_title.options.length] = new Option(courses[i].title, i);
  }

  el_title.onchange = function() {
    el_course.options.length = 0;
    var len = courses[this.value].courses.length;
    for (var i = 0; i < len; i++) {
        var thisCourse = courses[this.value].courses[i]
      el_course.options[el_course.options.length] = new Option(thisCourse.course_title, thisCourse.course_title);
    }
  }
  
  el_course.onchange = function() {
    el_schedules.options.length = 0;
    var schedules = courses[el_title.value].courses[el_course.selectedIndex].schedules
    var len = schedules.length;
    for (var i = 0; i < len; i++) {
      thisSchedule = schedules[i];
      var arrival = formatDate(new Date(thisSchedule.Arrival));
      var departure = formatDate(new Date(thisSchedule.Departure));
      el_schedules.options[el_schedules.options.length] = new Option(arrival + " - " + departure,thisSchedule.Arrival+"-"+thisSchedule.Departure);
    }
    var data = "http://www.mydomain.com/" + courses[el_title.value].courses[el_course.selectedIndex].page;
     var obj = createMyObject("text/html",data);
     el_page.appendChild(obj);
  }
  }
    

  el_schedules.onchange = function() {
    el_course_title.innerHTML = "<b>" + this.options[this.selectedIndex].text + "</b><br />";
    while (el_page.hasChildNodes()) {
      el_page.removeChild(el_map.firstChild);
    }
     

}

function createMyObject(type, data) {
  var element = null;
  try {
    // First try the IE way; if this fails then use the standard way
    element = document.createElement('<object type="'+type+'" data="'+data+'"></object>');
  }
  catch (e) {
    // Probably failed because we're not running on IE
  }
  if (!element) {
     element = document.createElement("object");
     element.data = data;
  }
  return element;
}

Open in new window

Michel Plungjan

I'll look in an hour. The page load works for me

Michel Plungjan

This is missing from the page code
while (el_page.hasChildNodes()) {
el_page.removeChild(el_map.firstChild);
}

and you took one } with you you shouldn't have

while (el_page.hasChildNodes()) {
el_page.removeChild(el_map.firstChild);
}
var data = "http://www.mydomain.com/" + courses[el_title.value].courses[el_course.selectedIndex].page;
var obj = createMyObject("text/html",data);
el_page.appendChild(obj);

Here is the complete code: http://jsfiddle.net/mplungjan/WgWLN/

ASKER

Thank you!

Only slight thing is that now the page load only works for the first course_title that is clicked, it doesnt refresh when a different title is clicked unless you refresh the browser.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

PS: have a look at my own site mentioned in my profile.

ASKER

Cant thank you enough for your help mplungjan.

Reward sent (sorry I cant afford more).

Thanks again!

Michel Plungjan

Thanks, appreciated :)