Hey All,
I'm relatively new to all this and any help would be appreciated.
What I'm aiming to do is create a few requests, to
1. Search for a Student against XML created from the database
2. If more than one student, list all students using DOM
3. Finally, return individual student and enrolments.
Heres the code (sorry it's going to be a long one):
request.php
------------------------------------------------------
<html>
<head>
<title>AJAX Request Test</title>
<script language="javas cript">
<!--
function createRequestOb ject() {
var ro;
var browser = navigator.appNa me;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject(" Microsoft.XMLHT TP");
}
else {
ro = new XMLHttpRequest( );
}
return ro;
}
http = createRequestOb ject();
function searchStudents( ) {
updateStatus('s how', 'Searching for students...', 'working');
var params = "";
var search_adno = document.getEle mentById('searc h_adno').value;
var search_forename s =
document.getEle mentById('searc h_forenames').v alue;
var search_surname = document.getEle mentById('searc h_surname').val ue;
var search_dob = document.getEle mentById('searc h_dob').value;
if (search_adno != "") params += 'student_studen treference='+
search_adno;
if (search_forenam es != "") {
if (params != "") params += '&student_foren ames='+ search_forename s;
else params += 'student_forena mes='+ search_forename s;
}
if (search_surname != "") {
if (params != "") params += '&student_surna me='+ search_surname;
else params += 'student_surnam e='+ search_surname;
}
if (search_dob != "") {
if (params != "") params += '&student_dob=' + search_dob;
else params += 'student_dob='+ search_dob;
}
if (params != "") {
http.open('post ', 'student.xml');
//http.overrideMi meType('text/xml');
http.onreadysta techange = listStudents;
http.send(param s);
}
else {
alert('You must enter search criteria');
}
}
function listStudents() {
if(http.readySt ate == "4"){
updateStatus('h ide');
var response = http.responseXM L.documentEleme nt;
var div = document.getEle mentById('resul ts');
var string = "";
var results = response.getEle mentsByTagName( 'student').leng th;
document.getEle mentById('total Students').inne rHTML =
response.getEle mentsByTagName( 'student').leng th;
document.getEle mentById('resul ts-outer').style.d isplay = "";
if (results == 1) {
getIndividualSt udent(response. getElementsByTa gName('student' )
[0].getAttribute(' id'));
}
else if (results 0) {
string = '<ul>';
for (i=0; i<response.getE lementsByTagNam e('student').le ngth; i++) {
string += '<li>';
string += '<a href="javas'+'c ript:getIndivid ualStudent(\''+
response.getEle mentsByTagName( 'student')[i].getAttribute(' id')
+'\')">';
string += response.getEle mentsByTagName( 'adno')
[i].firstChild.nod eValue;
string += ' - ';
string += response.getEle mentsByTagName( 'forenames')
[i].firstChild.nod eValue;
string += ' ';
string += response.getEle mentsByTagName( 'surname')
[i].firstChild.nod eValue;
string += '</a>';
string += '</li>';
}
string += '</ul>';
div.innerHTML = string;
}
}
}
function getIndividualSt udent(id) {
updateStatus('s how', 'Getting Student...', 'working')
// Hide old Div's
document.getEle mentById('searc h').style.displ ay = "none";
document.getEle mentById('resul ts-outer').style.d isplay = "none";
document.getEle mentById('amend ments').style.d isplay = "";
// Get Student and Populate Form
http.open('post ', 'individual.xml ');
http.onreadysta techange = populateStudent AmendmentForm;
http.send('stud ent_id='+id);
}
function populateStudent AmendmentForm() {
if(http.readySt ate == 4){
updateStatus('s how', 'Populating Form...', 'working')
var response = http.responseXM L.documentEleme nt;
document.getEle mentById('a_id' ).value =
response.getEle mentsByTagName( 'student')[0].getAttribute(' id');
document.getEle mentById('a_for enames').value =
response.getEle mentsByTagName( 'forenames')[0].firstChild.nod eValue;
document.getEle mentById('a_sur name').value =
response.getEle mentsByTagName( 'surname')[0].firstChild.nod eValue;
document.getEle mentById('a_adn o').value =
response.getEle mentsByTagName( 'adno')[0].firstChild.nod eValue;
document.getEle mentById('a_dob ').value =
response.getEle mentsByTagName( 'dob')[0].firstChild.nod eValue;
document.getEle mentById('a_add ress').value =
response.getEle mentsByTagName( 'address')[0].firstChild.nod eValue;
document.getEle mentById('a_pos tcode').value =
response.getEle mentsByTagName( 'postcode')[0].firstChild.nod eValue;
document.getEle mentById('a_ema il').value =
response.getEle mentsByTagName( 'email')[0].firstChild.nod eValue;
document.getEle mentById('a_tel ephone').value =
response.getEle mentsByTagName( 'telephone')[0].firstChild.nod eValue;
document.getEle mentById('a_ema il').value =
response.getEle mentsByTagName( 'email')[0].firstChild.nod eValue;
document.getEle mentById('a_mob ile').value =
response.getEle mentsByTagName( 'mobile')[0].firstChild.nod eValue;
http.open('post ', 'enrolments.xml ');
http.onreadysta techange = updateEnrolment s;
http.send('stud ent_id='+respon se.getElementsB yTagName('stude nt')
[0].getAttribute(' id'));
}
}
function updateEnrolment s() {
if(http.readySt ate == 4){
var response = http.responseXM L.documentEleme nt;
var div = document.getEle mentById('resul ts');
var string = "";
var results = response.getEle mentsByTagName( 'enrolment').le ngth;
if (results == 0) {
// Add Row with 'No Enrolments'
tbl = document.getEle mentById('enrol ment');
var lastrow = tbl.rows.length ;
var row = tbl.insertRow(l astrow);
var ne_cell = row.insertCell( 0);
ne_cell.colSpan = 4;
var text = document.create TextNode('No Current Enrolments...') ;
ne_cell.appendC hild(text);
}
else {
for (i=0; i<response.getE lementsByTagNam e('enrolment'). length; i++)
{
var id = response.getEle mentsByTagName( 'enrolment')
[i].getAttribute(' id');
var code = response.getEle mentsByTagName( 'code')
[i].firstChild.nod eValue;
var title = response.getEle mentsByTagName( 'title')
[i].firstChild.nod eValue;
var status = response.getEle mentsByTagName( 'status')
[i].firstChild.nod eValue;
addEnrolmentTab leRow(id, code, title, status);
}
}
updateStatus('h ide');
}
}
function addEnrolmentTab leRow(id, code, title, status) {
tbl = document.getEle mentById('enrol ments');
var lastrow = tbl.rows.length ;
var iteration = lastrow - 1;
var row = tbl.insertRow(l astrow);
// Add Hidden ID
id_input = document.create Element('input' );
id_input.type = 'hidden';
id_input.name = 'enrolment[' + lastrow + '][id]';
id_input.value = id;
document.getEle mentById('amend ments').appendC hild(id_input);
// Numbered Cell
var numbered_cell = row.insertCell( 0);
var textNode = document.create TextNode(iterat ion);
numbered_cell.a ppendChild(text Node);
// Add Code Cell with Input Box
var code_cell = row.insertCell( 1);
var code_input = document.create Element('input' );
code_input.type = 'text';
code_input.name = 'enrolment[' + lastrow + '][code]';
code_input.size = 8;
if (code != null) {
code_input.valu e = code;
code_input.disa bled = true;
}
code_cell.appen dChild(code_inp ut);
// Add Title Cell with Input Box
var title_cell = row.insertCell( 2);
var title_input = document.create Element('input' );
title_input.typ e = 'text';
title_input.nam e = 'enrolment[' + lastrow + '][title]';
title_input.siz e = 15;
if (title != null) {
title_input.val ue = title;
title_input.dis abled = true;
}
title_cell.appe ndChild(title_i nput);
// Add Status Cell with Status Select
var status_cell = row.insertCell( 3);
var status_select = document.create Element('select ');
status_select.n ame = 'enrolment[' + lastrow + '][status]';
status_select.o ptions[0] = new Option('Pre-Enrolled', '0');
status_select.o ptions[1] = new Option('Current ', '1');
status_select.o ptions[2] = new Option('Complet ed', '2');
status_select.o ptions[3] = new Option('Withdra wn', '3');
status_select.o ptions[4] = new Option('Transfe rred', '4');
status_select.o ptions[5] = new Option('Never Attended', 'W');
switch (status) {
case (status = "Current"):
status_select.s electedIndex = 1;
break;
case "Completed" :
status_select.s electedIndex = 2;
break;
case "Withdrawn" :
status_select.s electedIndex = 3;
break;
case "Transferre d":
status_select.s electedIndex = 4;
break;
case "Never Attended":
status_select.s electedIndex = 5;
break;
default:
status_select.s electedIndex = 0;
break;
}
status_cell.app endChild(status _select);
// Add Date Cell with Input Box
var date_cell = row.insertCell( 4);
var date_input = document.create Element('input' );
date_input.type = 'text';
date_input.name = 'enrolment[' + lastrow + '][date]';
date_input.size = 6;
date_cell.appen dChild(date_inp ut);
}
function updateStatus(sh owhide, text, image) {
if (showhide == "show")
document.getEle mentById('statu s').style.displ ay="";
else if (showhide = "hide")
document.getEle mentById('statu s').style.displ ay="none";
status_image = document.getEle mentById('statu s-image');
status_text = document.getEle mentById('statu s-text');
if (text != null) status_text.inn erHTML = text;
if (image != null) status_image.in nerHTML = '<img src="'+ image
+'.gif" border="0" alt="Status Image" height="16" />';
}
//-->
</script>
</head>
<body>
<div id="status">
<span id="status-image"></span>
<span id="status-text"></span>
</div>
<h1>Student Amendment Form</h1>
<div id="search">
<h2>Search For Student</h2>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<caption>Sear ch for Student</caption>
</tr>
<tr>
<td class="field">A d No:</td>
<td><input type="text" name="search_ad no" id="search_adno "
size="6" /></td>
</tr>
<tr>
<td class="field">S urname:</td>
<td><input type="text" name="search_su rname"
id="search_surn ame" /></td>
</tr>
<tr>
<td class="field">F orenames:</td>
<td><input type="text" name="search_fo renames"
id="search_fore names" /></td>
</tr>
<tr>
<td class="field">D ate of Birth:</td>
<td><input type="text" name="search_do b" id="search_dob " /></td>
</tr>
<tr>
<td colspan="2"><in put type="button" value="Get Results"
onClick="javasc ript:searchStud ents();" /></td>
</tr>
</table>
</div>
<div id="results-outer" style="display: none">
<h2>Results</h2>
<b>Total Students:</b<span id="totalStuden ts"> </span>
<div id="results">&n bsp;</div>
</div>
<form action="post.ph p" method="post" id="amendments " style="display:
none">
<input type="hidden" name="id" id="a_id" />
<h2>Amendment s</h2>
<table border="0" cellspacing="2" cellpadding="1" >
<tr>
<caption>Person al Details</caption>
</tr>
<tr>
<td class="field">A d No:</td>
<td><input type="text" name="adno" id="a_adno" disabled /></td>
</tr>
<tr>
<td class="field">S urname:</td>
<td><input type="text" name="surname" id="a_surname" /></td>
</tr>
<tr>
<td class="field">F orenames:</td>
<td><input type="text" name="forenames " id="a_forenames " /></td>
</tr>
<tr>
<td class="field">D ate of Birth:</td>
<td><input type="text" name="dob" id="a_dob" /></td>
</tr>
</table>
<table border="0" cellspacing="2" cellpadding="1" >
<tr>
<caption>Contac t Details</caption>
</tr>
<tr>
<td class="field">A ddress:</td>
<td><textarea name="address" id="a_address"> </textarea></td>
</tr>
<tr>
<td class="field">P ost Code:</td>
<td><input type="text" name="postcode" id="a_postcode " /></td>
</tr>
<tr>
<td class="field">E-Mail:</td>
<td><input type="text" name="email" id="a_email" /></td>
</tr>
<tr>
<td class="field">T elephone:</td>
<td><input type="text" name="telephone " id="a_telephone " /></td>
</tr>
<tr>
<td class="field">M obile:</td>
<td><input type="text" name="mobile" id="a_mobile" /></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" id="enrolments" >
<tr>
<caption>Enrolm ents</caption>
</tr>
<tr>
<th> </th>
<th>Code</td>
<th>Course Title</td>
<th>Status</td>
<th>Date</td>
</tr>
</table>
<div align="right">< a href="javascrip t:addEnrolmentT ableRow();">Add
New Enrolment</a></div>
<input type="submit" name="Submit" value="Update" />
</form>
</body>
</html>
XML Formats:
Student.xml
<students>
<student id="93000001061 744">
<adno>xxx</adno>
<forenames>xx x</forenames>
<surname>xxx</surname>
<title>Mr</title>
<gender>Male</gender>
</student>
<student id="93000001061 745">
<adno>xxx</adno>
<forenames>Ne w</forenames>
<surname>Person </surname>
<title>Mr</title>
<gender>Male</gender>
</student>
</students>
Enrolment.xml:
<enrolments>
<enrolment id="11938913" student="930000 01061744">
<code>xxx</code>
<title>xxx</title>
<start>03-OCT-00</start>
<end>15-JUN-00</end>
<status>Complet ed</status>
</enrolment>
<enrolment id="12128794" student="930000 01061744">
<code>xxx</code>
<title>HND Computing Full Time</title>
<start>03-OCT-00</start>
<end>15-JUN-00</end>
<status>Current </status>
</enrolment>
<enrolment id="12754637" student="930000 01061744">
<code>xxx</code>
<title>xxx</title>
<start>03-OCT-00</start>
<end>15-JUN-00</end>
<status>Current </status>
</enrolment>
</enrolments>
This all works fine in Firefox, but when it comes to IE it returns a
'null' is null or not an object error on the line:
var results = response.getEle mentsByTagName( 'student').leng th;
Is there anything glarinly obvious that I'm missing or am I using bad
practices? I'm finding it really hard to find anything on responseXML
anywhere!
Thanks in advance
