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

jns_johnsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
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

0
jns_johnsonAuthor Commented:
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

0
Michel PlungjanIT ExpertCommented:
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jns_johnsonAuthor Commented:
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.
 
0
Michel PlungjanIT ExpertCommented:
Ok I'll take a look later
0
Michel PlungjanIT ExpertCommented:
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
0
jns_johnsonAuthor Commented:
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

0
Michel PlungjanIT ExpertCommented:
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"
  }
],
0
jns_johnsonAuthor Commented:
Thanks, that does look more sensible.

How would I add more dates for each course-title?
0
Michel PlungjanIT ExpertCommented:
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"}
      ]    
  }
],
0
jns_johnsonAuthor Commented:
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

0
Michel PlungjanIT ExpertCommented:
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

0
Michel PlungjanIT ExpertCommented:
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

0
jns_johnsonAuthor Commented:
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! courseselect_screenshot
0
Michel PlungjanIT ExpertCommented:
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


0
jns_johnsonAuthor Commented:
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)



0
Michel PlungjanIT ExpertCommented:
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
0
jns_johnsonAuthor Commented:
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


0
Michel PlungjanIT ExpertCommented:
I'll look in an hour. The page load works for me
0
Michel PlungjanIT ExpertCommented:
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/
0
jns_johnsonAuthor Commented:
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.

 
0
Michel PlungjanIT ExpertCommented:
You removed the map DIV.


     while (el_page.hasChildNodes()) {
      el_page.removeChild(el_page.firstChild);
    }

I updated the fiddle to reflect the change

http://jsfiddle.net/mplungjan/WgWLN/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
PS: have a look at my own site mentioned in my profile.
0
jns_johnsonAuthor Commented:
Cant thank you enough for your help mplungjan.

Reward sent (sorry I cant afford more).

Thanks again!
0
Michel PlungjanIT ExpertCommented:
Thanks, appreciated :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.