?
Solved

IE fix and additional form

Posted on 2011-10-06
25
Medium Priority
?
236 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:jns_johnson
  • 15
  • 10
25 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36923936
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
 

Author Comment

by:jns_johnson
ID: 36924345
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36924517
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:jns_johnson
ID: 36924650
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36924781
Ok I'll take a look later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36925626
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
 

Author Comment

by:jns_johnson
ID: 36929947
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36929976
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
 

Author Comment

by:jns_johnson
ID: 36929998
Thanks, that does look more sensible.

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

Expert Comment

by:Michel Plungjan
ID: 36930288
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
 

Author Comment

by:jns_johnson
ID: 36931053
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36931239
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36936471
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
 

Author Comment

by:jns_johnson
ID: 36938422
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36938429
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
 

Author Comment

by:jns_johnson
ID: 36938469
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36938564
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
 

Author Comment

by:jns_johnson
ID: 36938641
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36938765
I'll look in an hour. The page load works for me
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36938795
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
 

Author Comment

by:jns_johnson
ID: 36938879
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 36938924
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36938931
PS: have a look at my own site mentioned in my profile.
0
 

Author Closing Comment

by:jns_johnson
ID: 36939486
Cant thank you enough for your help mplungjan.

Reward sent (sorry I cant afford more).

Thanks again!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36940624
Thanks, appreciated :)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question