how to achieve the following ajax

Question

I am working with php and want to have a page that has a drop down on top. elements in the drop down have some id associated with them. Underneath the drop down there is a text box and underneath the text box some images. so like the following

<drop down box>
______________
<textbox _content_ loaded via ajax onchange of drop down box>
<some images loaded via ajax onchange of drop down box>

I want to query the DB everytime the drop down menu is changed and populate the text box with info from DB and load the images that were fetched from the DB.

is there some ajax library that can be used for this? I assume there will be a php page to execute the query and send the result back to the main page?

can you guys tell me some examples/tutorials I should be looking at.

Answer 1

Short answer: jQuery. Here's an example of how to deal with dropdown controls in jQuery

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Answer 2

You might also want to look at YUI's version on the same thing. The rich autocompletes that you can create there are pretty cool as well. http://developer.yahoo.com/yui/autocomplete/

Answer 3

If you need to retrieve more complex data, You will have to retrieve json data instead of plain html. For images you dont need ajax, just create an image tag and the image will be retrieved. You cant transmit files using ajax.

Answer 4

One way you could do this is to use the prototype library.

Assuming you have a page to output the HTML content for the textbox and a page that outputs the image or images, you would do something like the following:

<script type="text/javascript" src="javascript/prototype.js">
<script type="text/javascript">
function select_changed() {
    // get the selected value
    var parms = 'selection='+$F('selectbox');
    // request the textbox value and pop it into the textbox
    new Ajax.Updater(
        'textbox',
        'http://example.com/textbox_handler.php',
        {
            method: 'post',
            parameters: parms
        });

    // request the image(s) and pop them into the image container div
    new Ajax.Updater(
        'image_container',
        'http://example.com/images_handler.php',
        {
            method: 'post',
            parameters: parms
        });
}

</script>

<select id="select" onChange="javascript:select_changed();">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
</select>

<textarea name="textbox"></textarea>

<div id="image_container"></div>

Answer 5

The easiest way is using Jquery. For example you could do something like this.

$('#dropdown').change(function(){ //listen for the change event of #dropdown box
 $.get('example.com/script.php', 
  {$('#dropdown').val()}, //send the value of dropdown as GET parameter 'val'
  function(data){
  $('#content').html(data.content);
  //first clear the image area:
  $('#imgs').empty();
  //Insert all the images
  for(x in data.imgs){
   $('#imgs').append('<img src="'+data.imgs[x]+'">');
  }
 }, 'json');
});

That is supposing your HTML looks something like this:

<select id='dropdown'>
 <option value='1'>Option1</option>
 <option value='2'>Option2 etc.</option>
</select>

<div id='content'>I contain the content, I might as well be a textarea or something else, as long is my id='content'</div>
<div id='imgs'><img src='iContainImgs.jpg'></div>

Then on the server side you create a Json object with the following structure:

content: "all the content",
imgs: array('img1.jpg', 'img2.jpg', 'etc')