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/

Slider有一个：

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

你将使用这个：

Selectmenu有一个：

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

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

如果您正在整页重做，请使用此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
        }
    });

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

1 个答案: