Could you please help on this JavaScript and Ajax question please. Appreciate your help

Make the necessary changes to index.html and ajax-framework.js to accomplish the following:

Send an AJAX request to the server with the dept code when the user changes the selection from the program name drop down menu.

When the results are returned to your JavaScript, the response text should be used to build the list of options in the second drop down menu.

Send another AJAX request to the server with both dept code and course_id when the user changes the selection in the course number drop down menu.

When the results are returned to your JavaScript, the response text should be used to populate the catalog description container.

Review the contents of the course-info-query.php to become familiar with the two different response texts it produces.

If one value is sent to the script, dept only, the script returns one response text.

If two values are sent to the script, dept and course_id, the script returns a different response text.

index.html file

Using AJAX

Query a database with no ACTION, SUBMIT button, or page refresh.

To begin with, only the first "combo box" is populated with any values: CSCI, DBMS, INFM, and SDEV. These are hard coded into the HTML for this page. The options for the second combo box are not populated until the user chooses one of the available programs. As soon as the user changes the selection for the program field, AJAX queries the database (behind the scenes) for all courses in that program and populates the second combo box with the results. Change the program field selection again, and the Course options change as well. Once the user selects a specific course from the second "combo box," AJAX performs another behind the scenes query to display the course description. At no point does the user have to click a "submit" button or refresh this page. The beauty of AJAX is at your disposal. The effect is a smoother, more transparent user experience that more closely replicates the behavior of a desktop application.

Program

--Choose One--

CSCI

DBMS

INFM

SDEV

Course

--Choose One--

Description

Ivy Tech Community College © 2015. | SDEV 250 Client-side Scripting

ajax-framework.js file

/* AJAX Framework for PHP/MySQL Query in SDEV 250 Lab11 */

//Browser Support Code

function ajaxFunction(){

var ajaxRequest; // The variable that makes Ajax possible!

try{

// REAL BROWSERS

ajaxRequest = new XMLHttpRequest();

} catch (e) {

// Internet Exploder Browsers

try{

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try{

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

// something went wrong

alert("Your browser broke!");

return false;

}

}

}

// Create a function that will recieve data sent from the server

lab11.css file

/* CSS for Lab 10 - Course Info AJAX Assignment */

@import url("fonts/ffftusj.css");

@import url("fonts/simonetta.css");

@import url("fonts/osp-din.css");

body { background: url(images/powder-blue-bkgrnd.png); }

#wrapper { margin-left: auto;

margin-right: auto;

width: 960px;

}

#courseDescription,

#catalog { vertical-align:text-top;

}

#ajaxExample { height: 340px;

}

footer,

article,

header { font: 1em SimonettaItalic,"Times New Roman",Times;

border-radius: 7px;

background-color: rgba(0,0,102,0.3);

color: rgb(255,255,255);

padding: 10px;

box-shadow: 2px 2px 2px rgb(102,102,102);

margin-top: 15px;

margin-bottom: 15px;

}

footer { font-size: 0.8em;

text-align: center;

}

h1,h2,

h3,legend { font: 1.3em OSPDIN,Arial,Helvetica;

margin: 5px;

text-shadow: 1px 1px 1px rgb(51,51,51);

}

h1 { font: 2.5em FFFTusjBold,Arial,Helvetica;

margin: 5px;

}

table { margin-bottom: 200px; }

th { text-align: left; }

article { background-color: rgba(102,102,102,0.3);

text-shadow: 1px 1px 1px rgb(255,255,255);

color: rgb(0,0,0);

font-size: 1.2em;

}

code { color: rgb(255,255,255);

text-shadow: 1px 1px 1px rgb(0,0,0);

}

p { margin: 0px;

padding: 0px;

}

fieldset p { font: 1em Calibri, Helvetia, sanserif; }

course-infor-quary.php file

Query Failed.
SELECT courseNum,courseName FROM ajaxLab WHERE program = '' ORDER BY courseNum
Table 'test.ajaxLab' doesn't exist

simonetta.css file

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 21, 2012 09:10:15 PM America/New_York */ @font-face { font-family: 'SimonettaRegular'; src: url('Simonetta-Regular-webfont.eot'); src: url('Simonetta-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Simonetta-Regular-webfont.woff') format('woff'), url('Simonetta-Regular-webfont.ttf') format('truetype'), url('Simonetta-Regular-webfont.svg#SimonettaRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SimonettaItalic'; src: url('Simonetta-Italic-webfont.eot'); src: url('Simonetta-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('Simonetta-Italic-webfont.woff') format('woff'), url('Simonetta-Italic-webfont.ttf') format('truetype'), url('Simonetta-Italic-webfont.svg#SimonettaItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SimonettaBlack'; src: url('Simonetta-Black-webfont.eot'); src: url('Simonetta-Black-webfont.eot?#iefix') format('embedded-opentype'), url('Simonetta-Black-webfont.woff') format('woff'), url('Simonetta-Black-webfont.ttf') format('truetype'), url('Simonetta-Black-webfont.svg#SimonettaBlack') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SimonettaBlackItalic'; src: url('Simonetta-BlackItalic-webfont.eot'); src: url('Simonetta-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Simonetta-BlackItalic-webfont.woff') format('woff'), url('Simonetta-BlackItalic-webfont.ttf') format('truetype'), url('Simonetta-BlackItalic-webfont.svg#SimonettaBlackItalic') format('svg'); font-weight: normal; font-style: normal; }

osp-din.css file

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 21, 2012 09:07:08 PM America/New_York */

@font-face { font-family: 'OSPDIN'; src: url('OSP-DIN-webfont.eot'); src: url('OSP-DIN-webfont.eot?#iefix') format('embedded-opentype'), url('OSP-DIN-webfont.woff') format('woff'), url('OSP-DIN-webfont.ttf') format('truetype'), url('OSP-DIN-webfont.svg#OSPDIN') format('svg'); font-weight: normal; font-style: normal;

}

ffftusj.css file

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 24, 2012 09:40:47 PM America/New_York */

@font-face { font-family: 'FFFTusjBold'; src: url('FFF_Tusj-webfont.eot'); src: url('FFF_Tusj-webfont.eot?#iefix') format('embedded-opentype'), url('FFF_Tusj-webfont.woff') format('woff'), url('FFF_Tusj-webfont.ttf') format('truetype'), url('FFF_Tusj-webfont.svg#FFFTusjBold') format('svg'); font-weight: normal; font-style: normal;

}