<Update/ Populate DropDown using Ajax ⁄ >

I won't get in detail about Ajax, nowadays almost everyone know what Ajax (Asynchronous JavaScript And XML) stands for, basically it's a technology that allow us to refresh some parts of our webpage without making a full postback. It saves resources in the "pipes", because less information's transferred. However if it's misused, for sure, it will bring some serious issues to our application. You can get more detailed information in this link.

I'll focus more in the "J" of Ajax. I'll try to give a few examples on how we can OOP JavaScript, such as: private methods; public methods; private attributes; static classes, etc.

One other thing that it'll be used is JSON (JavaScript Object Notation), quoting from Wiki: "... JavaScript Object Notation - is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate ...". In this snippet all the servers answers to our requests will be in JSON format, but we'll see it later.

Going back to the snippet, this example will try to show a possible way to update dropdowns without loading the page completely, if we just want to change some dropdown items, why take a full postback?

A fairy simple example. We have various countries and each country has some martial arts, so, by selecting a country we want to know its martial arts, can't get simpler than that. Only martial arts dropdown will be constantly updated.

style.css, nothing new in here... just to beautify the screenshots a little :)

Events.js - this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.

ajax.js -This class will trigger the server events and will process its answers for our requests. As I already said the server answer will be in JSON format, we'll use "eval" so that JavaScript understands the answer and process it as we want

ajax.php - the server-side file that we'll take care of our requests. In this case I just used a hard-coded solution, but normally we'll retrieve the data from a database or do other operations. Please just take a note about the answers Json format

<?php

$action=$_GET["action"];

if($action=="get_options"){

$value=$_GET["value"]; //get the country we'll process

if($value=="japan"){

$result = "

({

'options': [

{'value': '','description': '(pick an item)'},

{'value': 'aikido','description': 'Aikido'},

{'value': 'kendo','description': 'Kendo'},

{'value': 'sumo','description': 'Sumo'},

{'value': 'shurikenjutsu','description': 'Shurikenjutsu'}

]

});

";

}

elseif($value=="china"){

$result = "

({

'options': [

{'value': '','description': '(pick an item)'},

{'value': 'tai_chi_chuan','description': 'Tai chi chuan'},

{'value': 'shaolin_kung_fu','description': 'Shaolin kung fu'},

{'value': 'shuai_jiao','description': 'Shuai Jiao'},

{'value': 'wing_chun','description': 'Wing Chun'}

]

});

";

}

elseif($value=="korea"){

$result = "

({

'options': [

{'value': '','description': '(pick an item)'},

{'value': 'taekwondo','description': 'Taekwondo'},

{'value': 'hapkido','description': 'Hapkido'},

{'value': 'taekyon','description': 'Taekyon'},

{'value': 'soobak','description': 'Soobak'}

]

});

";

}

else{

$result = "

({

'options': [

{'value': '','description': '(please, pick a country)'}

]

});

";

}

}

echo$result; //return answer

?>

Init.js, well this is where all begins. In this snippet it has some functionalities, for example it'll fill the countries dropdown (we could do this manually by adding the options directly in the dropdown, however we'll use HtmlControl class); it'll add the startup Events; and so on