刷新动态选择框而不重新加载页面

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 元素都有自己的用于重新设置样式的刷新方法。

例如：

Listview 有一个：

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

这是一个示例：http://jsfiddle.net/Gajotres/AzXdT/。这是一个从 XML 数据动态生成的列表视图。

按钮元素有一个：

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

这是一个例子：http://jsfiddle.net/Gajotres/K8nMX/

滑块有一个：

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

而你将使用这个：

选择菜单有一个：

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

现在您可以在此处看到一个模式。要刷新，请始终使用带有“刷新”参数的组件名称作为 s 函数。

如果你要对整个页面进行重新设计，你应该使用这个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
        }
    });