刷新動態選擇框，無需重新加載頁面

Question

我有一個jQuery的移動應用程序，頁面加載時，從數據庫中讀取數據，並填充用戶特定的數據，如他們喜歡的地址頁面上的選擇框。 我實現了一個ajax腳本，刪除所選的運行良好的選項。但我需要找到一種方法來刷新選擇框，而無需重新加載頁面。 我收集AJAX是我需要去的方式，但我不知道從哪裏開始。 我假設我需要重新運行讀取數據庫的php文件，然後使用返回的數據並填充選擇框的JavaScript。

的index.php（上）

<?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（第二部分）

//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>"); 
    }); 

希望這一切都有道理，任何幫助都將不勝感激， 感謝提前堆！

Answer 1

每個jQM元素都有自己的刷新方法用於重新設置。

例如：

列表視圖有：

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

下面是一個例子：http://jsfiddle.net/Gajotres/AzXdT/。這是從XML數據動態生成的listview。

按鈕元素有：

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

下面是一個例子：http://jsfiddle.net/Gajotres/K8nMX/

滑塊有：

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

你要使用這一個：

Selectmenu有一個：

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

現在你可以在這裏看到一個模式。刷新時總是使用一個組件名稱作爲s函數，'refresh'參數。

如果你正在做一整頁restyle你應該使用這個method。

編輯：

$.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 
     } 
    });