更新但不刷新頁面

Question

我使用此代碼將項目從一個列表移動到另一個列表，並使用POST和GET調用來回移動。但是，每次更改後頁面都會刷新。我試圖弄清楚如何在不更新頁面的情況下應用列表更新和更改。這可能嗎？

只是通過代碼，我不能告訴是什麼導致頁面刷新，但我猜它必須做的HTML按鈕？

JS：

var user; 


$(document).ready(function() { 
    //Populate the users pick list 
    var strHTMLSiteUsers = ""; 
    $().SPServices({ 
     operation: "GetUserCollectionFromSite", 
     async: true, 
     completefunc: function(xData, Status) { 
     $(xData.responseXML).find("User").each(function() { 
      strHTMLSiteUsers += "<option value='" + $(this).attr("LoginName") + "'>" + $(this).attr("Name") + "</option>"; 
     }); 
     $("#my_SiteUsers").append(strHTMLSiteUsers); 
     } 
    }); 
    RefreshGroupLists(); 
}); 

function RefreshGroupLists(){ 
    var strHTMLAvailable = ""; 
    var strHTMLAssigned = ""; 
    var arrOptionsAssigned = new Array(); 
    var intOpts = 0; 
    var booMatch; 
    var booErr = "false"; 

    //current user 
    user = $('#my_SiteUsers').val(); 

    $("#my_SPGroupsAssigned").html(""); 
    $("#my_SPGroupsAvailable").html(""); 

    if($("#my_SiteUsers").attr("value") == 0){ 
    alert("You must select a user"); 
    return; 
    } 

    //Populate the Groups Assigned 
    $().SPServices({ 
     operation: "GetGroupCollectionFromUser", 
     userLoginName: user, 
     async: true, 
     completefunc: function(xData, Status) { 
     $(xData.responseXML).find("errorstring").each(function() { 
      if(user='default'){ 
      return; 
      }else{ 
     alert("User not found"); 
     booErr = "true"; 
     return; 
     } 
     }); 
     $(xData.responseXML).find("Group").each(function() { 
      strHTMLAvailable += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>"; 
      arrOptionsAssigned[intOpts] = $(this).attr("Name"); 
      intOpts = intOpts + 1; 
     }); 
     $("#my_SPGroupsAssigned").append(strHTMLAvailable); 
     } 
    }); 

    //Populate available site groups 
    if(booErr == "false"){ 
    $().SPServices({ 
     operation: "GetGroupCollectionFromSite", 
     async: true, 
     completefunc: function(xData, Status) { 
      $(xData.responseXML).find("Group").each(function() { 
      booMatch = "false"; 
      for (var i=0;i<=arrOptionsAssigned.length;i++){ 
       if($(this).attr("Name") == arrOptionsAssigned[i]){ 
       booMatch = "true"; 
       break; 
       } 
      } 
      if(booMatch == "false"){ 
       strHTMLAssigned += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>"; 
      } 
      }); 
      $("#my_SPGroupsAvailable").append(strHTMLAssigned); 
     } 
    }); 
    } 
} 

function AddGroupsToUser(){ 
    var i; 

    if($("#my_SiteUsers").attr("value") == 0){ 
    alert("You must select a user"); 
    return; 
    } 

    if($("#my_SPGroupsAvailable").val() == null){ 
    alert("You haven't selected any groups to add"); 
    return; 
    } 
    else{ 
    var arrGroups = $("#my_SPGroupsAvailable").val(); 

    for (i=0;i<arrGroups.length;i++){ 
     $().SPServices({ 
      operation: "AddUserToGroup", 
      groupName: arrGroups[i], 
      userLoginName: user, 
      async: true, 
      completefunc: null 
     }); 
    } 
    RefreshGroupLists(); 
    } 
} 

function RemoveGroupsFromUser(){ 
    var i 

    if($("#my_SiteUsers").attr("value") == 0){ 
    alert("You must select a user"); 
    return; 
    } 

    if($("#my_SPGroupsAssigned").val() == null){ 
    alert("You haven't selected any groups to remove"); 
    return; 
    } 
    else{ 
    var arrGroups = $("#my_SPGroupsAssigned").val(); 

    for (i=0;i<arrGroups.length;i++){ 
     $().SPServices({ 
      operation: "RemoveUserFromGroup", 
      groupName: arrGroups[i], 
      userLoginName: user, 
      async: true, 
      completefunc: null 
     }); 
    } 
    RefreshGroupLists(); 
    } 
} 

HTML：

<table align="center"> 
    <tr> 
    <td colspan="3" style="text-align:center"> 
     <font style="font-weight:bold">Select a User:&nbsp;&nbsp;&nbsp;</font> 
     <select id="my_SiteUsers" style="width:250px;" onchange="RefreshGroupLists()"> 
     <option value='default' disabled="disabled">Select a user</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <th class='ms-vh2'>Available Groups</th> 
    <th></th> 
    <th class='ms-vh2'>Assigned Groups</th> 
    </tr> 
    <tr> 
    <td class='ms-vb2'> 
     <select id="my_SPGroupsAvailable" style="width:150px;height:150px;" multiple="multiple"></select> 
    </td> 
    <td> 
     <button id="my_AddGroupsToUser" style="width:40px;" onclick="AddGroupsToUser()">&gt;&gt;</button><br><br> 
     <button id="my_RemoveGroupsFromUser" style="width:40px;" onclick="RemoveGroupsFromUser()">&lt;&lt;</button></td> 
    <td class='ms-vb2'> 
     <select id="my_SPGroupsAssigned" style="width:150px;height:150px;" multiple="multiple"></select> 
    </td> 
    </tr> 
</table> 

這是什麼樣子：

編輯：我知道按鈕是造成刷新，所以我把這個添加到JS中。現在頁面不刷新，但列表不能正確更新。所以如果我選擇5組並移動它們，也許1或2會「視覺上」移動，然後當我刷新它們時，它們都會移動。所以現在只是一些UI問題。 .click(function() { return false; });

Answer 1

在AddGroupsToUser函數中添加一個將調用RefreshGroupList的returnfunc。然後在for循環之後的RefreshGroupList中移除該調用。

您發佈的代碼將運行一個週期並啓動n個異步操作。循環後它將更新列表，但由於操作是異步的，其中一些已經完成並且一些正在運行。這就是爲什麼你看到部分更新的列表。

這應該更新名單在每一個「拯救」的一組：

function AddGroupsToUser(){ 
    var i; 

    if($("#my_SiteUsers").attr("value") == 0){ 
    alert("You must select a user"); 
    return; 
    } 

    if($("#my_SPGroupsAvailable").val() == null){ 
    alert("You haven't selected any groups to add"); 
    return; 
    } 
    else{ 
    var arrGroups = $("#my_SPGroupsAvailable").val(); 

    for (i=0;i<arrGroups.length;i++){ 
     $().SPServices({ 
      operation: "AddUserToGroup", 
      groupName: arrGroups[i], 
      userLoginName: user, 
      async: true, 
      completefunc: function(xData, Status) { 
      RefreshGroupLists(); 
      } 
     }); 
    } 
    } 
}