Ajax sample code request

Forum Moderators: open

Message Too Old, No Replies

Ajax sample code request

dbarasuk

12:09 pm on Nov 25, 2011 (gmt 0)

Hi all,
I have two tables in database, one with a list of university faculties and another with professors with a relation to the faculty in which they teach.

I have also a form that inserts a thesis topic in another table with two select fields (IN fact the form does not contain only two fields, this is to explain the idea i am trying to convey). The first field contains the list of faculties and another select field is designed to be populated with the list of professors depending on the faculty chosen in the previous field. Although my Ajax knowledge is low, i believe that an ajax request is sent in the background to the server to retrieve the list of professors from the database and then display that list according to the faculty chosen in the faculty html select field.

Can someone point me to a good tutorial to learn how that is done or even provide me a sample code for that?

Thanks in advance

astupidname

9:28 am on Nov 30, 2011 (gmt 0)

No takers so far, eh. How are you getting on with this? Made any progress or still need help?
Based on the information given so far, I would advise that ajax may not be required at all in your situation here. Ajax can be highly useful for some things, but is IMHO and also in fact way overused, primarily because people don't really know what they're doing sometimes and they hear of ajax and it is such a neat simple catch-phrase that people latch on to and want to do. Often merely wasting unnecessary extra net connections and processing. It is fine to learn however, which I see in another thread here you are doing, so that's good. But in the case of a simple drop-down select element it is much simpler (practice K.I.S.S. [en.wikipedia.org] at every turn) to have all the data pre-loaded (so long as it's not a huge amount of data, let's say over 10kb or so, which a list of faculties and professor names will most likely not approach) rather than fire off an ajax request each time the selection changes.

I will give you a simple, normally-aspirated (non-ajax), example of populating the second drop-down select element based upon selection changes of the first:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Some Title</title>
<script type="text/javascript">

var FACULTIES = { //an object who's property names are names of Faculty divisions, and who's properties are arrays of professor names
    'Applied Health Sciences' : ['Abdullah Abrahams', 'Clare Dorr', 'Louis Gascon', 'Ericka Trousdale'],
    'Arts' : ['Ivette Mackin', 'Ayana Faison', 'Cristofer Rasco', 'Lesly Manke', 'Taj Patch', 'Emelia Otey'],
    'Engineering' : ['Morgan Duan', 'Ramon Hoven', 'Ruth Nishimura', 'Campbell Mate'],
    'Mathematics' : ['Jaslyn Aspinwall', 'Audrianna Draughn', 'Baileigh Hines', 'Willa Bouvier', 'Jaquelin Horsley'],
    'Science' : ['Rocio Heiser', 'Coen Henderson', 'Kelly Crager', 'Sidney Lachman', 'Taylar Andrews']
};
 
//utility function used to add new Option to a <select> object
function addOption(select, option) {
    try {
        select.add(option, null); //standard method
    } catch(er) {
        select.add(option); //IE only
    }
}
 
//utility function to empty out a <select> object
function emptySelect(select) {
    for (var i = select.options.length - 1; i >= 0; i--) {
        select.remove(select.options[i]);
    }
}
 
//used by someForm.facultySelect's onchange event
function buildProfessorSelect(arrayOfProfessors) {
    var i, profName,
        len = arrayOfProfessors.length,
        select = document.forms.someForm.professorSelect; //<-- edit "someForm.professorSelect" if you change name(s) of form and/or select>
    addOption(select, new Option('Please Choose Professor'));
    for (i = 0; i < len; i++) {
        profName = arrayOfProfessors[i];
        addOption(select, new Option(profName, profName));
    }
}
 
//initiation/assignment of onchange event to facultySelect
window.onload = function () {
    var el = document.forms.someForm.facultySelect; //<-- edit "someForm.facultySelect" if you change name(s) of form and/or select>
    el.onchange = function () {
        var value = this.options[this.options.selectedIndex].value;
        emptySelect(this.form.professorSelect); //<-- edit "professorSelect" if you change name of select>
        if (value && value in FACULTIES) {
             //FACULTIES[value] will be one of the arrays of professor names from within the FACULTIES object
            buildProfessorSelect(FACULTIES[value]);
        }
    };
};

</script>
</head>
<body>
<div>
<form name="someForm" action="" method="post">
<p>
<select name="facultySelect">
<option value="" selected="selected">Please Choose Faculty</option>
<option value="Applied Health Sciences">Applied Health Sciences</option>
<option value="Arts">Arts</option>
<option value="Engineering">Engineering</option>
<option value="Mathematics">Mathematics</option>
<option value="Science">Science</option>
</select>
 <select name="professorSelect"></select>
</p>
</form>
</div>
</body>
</html>

If anybody's wondering, how to post formatted code on webmasterworld [webmasterworld.com]
Do not copy formatted code on webmasterworld from IE, use other browser such as Firefox.

If you want the FACULTIES object to be database driven, it is simple enough. Either output it in the page via php at time of page load or else output it in a php script which looks up all faculties and professors and writes out the javascript FACULTIES variable and is linked to the page via script tags and use header('Content-type:text/javascript') at top of the php.

Now, having said all that, if you still really really want an ajax version of this and can't figure out how to hook ajax in to the example above instead, just ask.

[All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental]
[Names randomly generated]