通过ajax加载包含更新数据的表

时间:2013-11-18 00:26:20

标签: javascript jquery ajax jquery-mobile cordova

我正在使用Phonegap和jQuery Mobile开发移动应用程序。基本上这是第一次当应用程序加载使用AJAX填充的数据时很好但它不会更新。

示例:如果有来自数据库的5行数据,并且某些用户操作,则在数据库中添加了1行,但仍显示5行。目前只有在我完全退出应用程序时才会更新。

为了解决这个问题,我尝试了以下方法:

tbody.append(tableCells).load();

tbody.append(tableCells).trigger( '创建');

tbody.append(tableCells).trigger( '刷新');

任何解决方案/想法如何在没有用户的情况下直接更新它或完全退出应用程序?请参阅以下代码。

代码:

HTML:

<table id="myPendingChallenges-table" width="100%">
  <thead>
    <tr>
       <th>Game Type</th>
       <th>Team Name</th>
       <th>Initiator Name</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

中追加行

JS: tbody.append(tableCells);

AJAX:

var currentUser = window.localStorage.getItem("currentUser");
user = JSON.parse(currentUser);
var username = user.username; //User name

//alert (username+', '+t_name+', '+formAction);
$.ajax({
    type: 'POST',
    url: 'http://www.example.com/webservice/index.php',
    data: {username: username},
    dataType : 'json',      
    success: function(data){
        var json = JSON.stringify(data);
        window.localStorage.setItem("teamChallenges", json);
        challengePopulate();
    },
    error: function(){
        alert('error!');
    }
});
 return false;

function challengePopulate()
{
    var json = window.localStorage.getItem("teamChallenges");
    var data = null;
    if(!json)
        data = JSON.stringify(window.teamChallenges);
    var data = JSON.parse(json);
    if(!data)
        return;
    var fields = ["game_type", "t_name", "ini_name"];
populatePCTable("#myPendingChallenges-table", fields, data);
}//end challengePopulate


function populatePCDTable(tableId, fields, data) 
{
    var tbody = $(tableId + " tbody");
    var row = null;
    for(var i in data) {
        row = data[i];  

        if(!row)
            continue;

        var tableCells = "";
        var fieldName = "";

        for(var j in fields){
            fieldName = fields[j];
            teamName = row[fields[1]];
            gameParam = row[fields[3]];

            if(row[fieldName] == 'weighin'){
                game_type = 'weighin';
                row[fieldName] = '<img src="images/weightGame.png" width="100%" />';    
            }else if (row[fieldName] == 'activity'){
                game_type = 'activity';
                row[fieldName] = '<img src="images/activityGame.png" width="100%" />';  
            }

            tableCells += "<td onClick=\"setPendingChallTitle('"+teamName+"');pendingchallengeDetails('"+teamName+"');\"><a href='#pendingChallengesDetailsPage'>"+row[fieldName]+"</a></td>";
        }
        tbody.append("<tr>" + tableCells + "<td onClick=\"ignorePendingChallenge(this,'"+teamName+"');\"><a href=''><img src='images/close_button.png' title='Ignore Challenge' /></a></td></tr>"); 
    }
}//end function populatePCDTable

0 个答案:

没有答案