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

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')