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

Question

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

index.php（第一部分）

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

favorite.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元素都有自己的刷新方法，用於重新樣式化。

例如：

Listview具有：

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

這是一個示例： http : //jsfiddle.net/Gajotres/AzXdT/ 。 這是從XML數據動態生成的列表視圖。

按鈕元素具有：

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

這是一個示例： http : //jsfiddle.net/Gajotres/K8nMX/

滑塊具有：

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

您將使用此代碼：

Selectmenu具有：

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

現在，您可以在此處看到一個模式。 要刷新，請始終使用帶有'refresh'參數的組件名稱作為s函數。

如果要對整個頁面進行樣式調整，則應使用此方法 。

編輯：

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