0

我有一个 jquery 移动应用程序，它在页面加载时从数据库中读取数据，并使用用户特定的数据（如他们最喜欢的地址）填充页面上的选择框。我已经实现了一个 ajax 脚本，它删除了运行良好的选定选项。但是我需要找到一种方法来刷新选择框而不重新加载页面。我收集 AJAX 是我需要走的路，但我不知道从哪里开始。我假设我需要重新运行读取数据库的 php 文件，然后重新运行获取返回数据并填充选择框的 javascript。

index.php（第一部分）

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

收藏夹.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>");
    });

希望这一切都有意义，任何帮助都将不胜感激，提前致谢！

4

1 回答 1

0

每个 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);

现在你可以在这里看到一个模式。要刷新始终使用组件名称作为带有“刷新”参数的函数。

如果您要重新设计整个页面，您应该使用此方法。

编辑 ：

   $.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
        }
    });
于 2013-01-22T09:27:56.090 回答