Обновление без обновления страницы

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> 

Это то, что он выглядит следующим образом:

EDIT: Я понимаю, что кнопка была причиной Refresh, поэтому я добавил это в JS. Теперь страница не обновляется, но списки не обновляются правильно. Поэтому, если я выбираю 5 групп и перемещаю их, возможно, 1 или 2 будут перемещаться «визуально», а затем, когда я обновляю их, все перемещаются. Так что сейчас это лишь некоторые проблемы с пользовательским интерфейсом. .click(function() { return false; });

Answer 1

В функции AddGroupsToUser добавьте returnfunc, который вызовет RefreshGroupList. Затем удалите вызов в RefreshGroupList сразу после цикла for.

Ваш опубликованный код будет запускать цикл и начать n асинхронных операций. После цикла он обновит список, но поскольку операции выполняются async, некоторые из них завершены, а некоторые из них запущены. Вот почему вы видите, что список частично обновлен.

Это должно обновить список на каждом «сохранить» группы:

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