Question

I’m new to Javascript/Jquery and struggling with a certain issue.

In the process of adding a job to a database, the users have an option to update the contents of dropdown lists with new options. Adding the new options is handled through a greybox which posts data with PHP through to the database.

After adding the new option it does not display in the dropdown list. As such they need to be able to click a button to refresh the contents of the dropdown list. Has anyone accomplished this before, and can show me some sample source code? Or is there a more elegant solution fo this issue?

I’ve been researching pretty much non-stop and cannot find a solution, any help is appreciated. n.n

Edit:

<script type="text/javascript">  
function getbrands(){  
   new Ajax.Request('ajax/brand.php',{  
        method: 'get',  
        onSuccess: function(transport){  
            var response = transport.responseText;  
            $("brand").update(response);  
        }  
    });  
}  

It works… sometimes. Highly unstable. Also has a bad habit of conflicting with other scripts on the page. (mainly the greybox)

Any suggestions will be taken on board at this stage. :X

Answer 1

Assuming your using jQuery, you could do the following..

//in a php file that your gonna use to fetch new dropdown values
<?php //pathToPhpFile.php
    header("Content-Type: application/json");

    //here you'd perform a database query 
    //heres a dummy dataset
    $data = array(  
        array( "id" => "dropdown1", "label" => "Dropdown #1"), 
        array( "id" => "dropdown2", "label" => "Dropdown #2"), 
    );

    echo json_encode( $data );
    exit;
?>

javascript code: sould be wrapped in $(document).ready( function(){ }); block to ensure the button is ready to accept events

//attach refresh event to button 
$("#refeshButtonId").click( function() {

    var dropdown = $('#idOfTheDropdown');

    //fetch the key/values pairs from the php script
    jQuery.getJSON( "pathToPhpFile.php", function( data ) {

        //empty out the existing options
        dropdown.empty();

        //append the values to the drop down
        jQuery.each( data, function(i, v) {
            dropdown.append( $('<option value="'+ data[i].id +'">'+data[i].label+'</option>');
        });
    });

});

refined code 🙂

<script type="text/javascript">  
    $(document).ready( function(){

        $("#refeshButtonId").click( function() {

            //fetch the key/values pairs from the php script
            jQuery.getJSON( "pathToPhpFile.php", function( data ) {

                 var dropdown = $('#idOfTheDropdown');

                //empty out the existing options
                dropdown.empty();

                //append the values to the drop down
                jQuery.each( data, function(i, v) {
                    dropdown.append( $('<option value="'+ i +'">'+ v +'</option>') );
                });
            });

        });    
    });
</script>