Refreshing dynamic select boxes without reloading page

Question

I have a jquery mobile app that on page load, reads data from the database and populates select boxes on the page with user specific data like their favorite addresses. Ive implemented an ajax script that deletes the selected option which works well. But I need to find a way refresh the select boxes without reloading the page. I gather AJAX is the way I need to go, but I wouldn't know where to start. I assume I'll need to re-run the php file that reads the database and then the javascript that takes the returned data and populates the select boxes.

index.php (First Part)

<?php 
$show_faves_pass=true;
$show_faves_cctr=true;
include('../includes/favourites.inc');
?>   

favorites.inc

$js_str='';

if ($show_faves_addr){

    // Postgres sql statement here

    $addr_json=json_encode($addr_rows);
    $js_str.="var fave_addresses=$addr_json;\n";
}

if ($show_faves_cctr){

    // Postgres sql statement here

    $cctr_json=json_encode($cctr_rows);
    $js_str.="var fave_costcentres=$cctr_json;\n";
}
if (strlen($js_str)>0){
    echo "<script type='text/javascript'>\n$js_str\n</script>\n";
}

index.php (Second Part)

//populate favourites pickers
    function findFave(arr,key,val){
      var found=null;
      $.each(arr,function(i,v){
        if (v[key]==val){
          found=v;
        }  
      });
      return found;
    }

var pass_fave_sel=$('select#pass_fave_picker');
    $.each(fave_passengers,function(i,fave){
      pass_fave_sel.append("<option value='"+fave.passenger_details_id+"'>"+fave.passenger_nickname.replace("'","\'")+"</option>");
    });


var cctr_fave_sel=$('select#cctr_fave_picker');
    $.each(fave_costcentres,function(i,fave){
      cctr_fave_sel.append("<option value='"+fave.cost_centre_id+"'>"+(fave.cost_centre_code+" ("+fave.cost_centre_nickname+")").replace("'","\'")+"</option>");
    });

Hopefully this all makes sense, any help at all will be appreciated, Thanks heaps in advance!

Answer 1

Every jQM element has its own refresh method used for restyling.

For example:

Listview has a:

$('#listviewID').listview('refresh');

Here's an example: http://jsfiddle.net/Gajotres/AzXdT/ . This is a listview dynamically generated from XML data.

Button elements have a:

$('#buttonID').button('refresh');

Here's an example: http://jsfiddle.net/Gajotres/K8nMX/

Slider has a:

$('#sliderID').slider('refresh')

And you are going to use this one:

Selectmenu has a:

$('select').selectmenu('refresh', true);

By now you can see a pattern here. To refresh always use a component name as s function with 'refresh' parameter.

In case you are doing a whole page restyle you should use this method .

EDIT :

   $.ajax({url: server_url,
        data: save_data,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
           // Here delete elements from select box
        },
        error: function (request,error) {
           // Throw an error
        }
    });