更新但不刷新页面

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(); 
      } 
     }); 
    } 
    } 
}