Blog Topics
| Development ( 16 ) |
| DNS ( 17 ) |
| Javascript ( 6 ) |
| Linux ( 8 ) |
| MySQL ( 4 ) |
| Oracle ( 4 ) |
| Perl ( 9 ) |
| PHP ( 6 ) |
| Solaris ( 10 ) |
| Sybase ( 8 ) |
| VitalQIP ( 7 ) |
| Windows Server ( 2 ) |
What's Popular?
| Adding options to select element using Prototype |
 |
 |
 |
| Written by Patrick H. Piper |
|
index.php - main HTML/PHP page <html> <head> <script src="prototype.js" type="text/javascript"> <script src="dhcpservers.js" type="text/javascript"> </head> <body> <select id="pri_server_id"></select> </body> </html>Our dhcpservers.js javascript file looks like the following: dhcpservers.js - javascript file function get_dhcp_servers() { $('pri_server_id').options.length = 0; <!-- this is the Ajax Request for fetching the list --> new Ajax.Request('ajax_dhcpscopes.php', { method: 'post', parameters: { meth: 'get_pri_dhcp_servers' }, onSuccess: function(transport) { var response = transport.responseText || "no response text"; if(eval(response)) { <!-- use prototype here to flip through and add options --> } else { alert ("Error in the AJAX call to retrieve servers"); } } }); } document.observe('dom:loaded', function() { get_dhcp_servers(); }); Our ajax_dhcpscopes.php file is supposed to do all the back end work and reply with a string representation of an array that can be eval'ed in the Ajax.Request upon success. The ajax_dhcpscopes.php file looks something like this: global $db; $sql = "SELECT p.server_id, p.server_name, pd.domn_name FROM qipadmin.srvrs p, qipadmin.parm_values pv, qipadmin.domain pd WHERE pv.owner = p.server_id AND pv.parm_id = 14 AND p.domn_id = pd.domn_id"; $res = $db->GetAll($sql); $options_str = "["; $tmp_array = array(); foreach($res as $row) { $server = $row['SERVER_NAME'] . "." . $row['DOMN_NAME']; array_push($tmp_array,"['".$row['SERVER_ID']."','".$server."']"); } $options_str .= join(',',$tmp_array); $options_str .= "]"; print $options_str; The ajax_dhcpservrs.php page will return an array of arrays. The struct looks like this [[server_id1,server_name1],[server_id2,server_name2]];. This is sent as a string back to the Ajax.Request object for eval. Assuming that our SQL and output string are properly formatted, our Ajax.Request object will eval this string just fine. Let's look inside the Ajax.Request object and specifically look at how we can interpret that output and create options elements and associate them with the drop-down box in our original page.
new Ajax.Request('ajax_dhcpscopes.php', {
method: 'post',
parameters: { meth: 'get_pri_dhcp_servers' },
onSuccess: function(transport) {
var response = transport.responseText || "no response text";
if(eval(response)) {
var my_options = $A(eval(response));
$A(my_options).each(function(s, index) {
var tmp = $A(s);
var opt = document.createElement('option');
opt.text = tmp[1];
opt.value = tmp[0];
$('pri_server_id').options.add(opt);
});
}
else { alert ("there was a problem in the AJAX call to retrieve servers") };
}
});
On success, we pull out a response from the responseText, and we eval it to make sure its an array. If the eval returns false, we error out with an alert dialog. Otherwise, we extend the eval'ed response into a Prototype array $A(). This allows us to iterate through the collection using the each() method. The each() method will pass in each inner array that must also be eval'ed. Instead, we use the $A() to capture each inner array to a tmp variable. Next, we create a new DOM option element, and set the text and value parameters. Last, we call the 'pri_server_id' select element and add each of our newly created option elements to the end. NOTE: we first set the select element to have NO options elements to ensure that each time this function is called that we don't keep duplicating appending our options. We accomplish this by $('pri_server_id').options.length = 0; This empties out the select element of any options. That's it. I have not completed full cross-browser testing, but it should be portable across most browsers. I wanted to get this documented, as it is something that has always eluded me.Add this page to your favorite Social Bookmarking websites        |
| Last Updated on Thursday, 13 March 2008 17:23 |
