Updating the contents of a dropdown list Javascript/PHP

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

Use ajax to post the data to your php file, echo the html for the new dropdown back to the javascript, and then use jquery to put in the new contents. http://api.jquery.com/jQuery.ajax/

Answer 2

no sample code but I guess it goes like this

1. after the posting, create a callback that updates the DOM, particularly the options for the select box

maybe it goes something like this in code in jquery:

$.ajax({
  method: 'POST',
  data : $('#newjobfield').val(),
  dataType: 'text'
  success : function(data){
    $('#selectbox').append('<option value="' + data + '">' + data + '</option>')
  }
});

in php

function getNew()
{
 if ($_POST)
 {
    // update database 
    // then echo the record's 'name' (or whatever field you have in there)
    echo $newInsertedJobName;
  }
  die();
}

Now this code sucks, so just tell me if something does not work (I haven't tested it, cuz I made it a few minutes ago, while at work :P)

Answer 3

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>