[英]Update without refreshing the page
我正在使用此代码通过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: </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()">>></button><br><br>
<button id="my_RemoveGroupsFromUser" style="width:40px;" onclick="RemoveGroupsFromUser()"><<</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; });
在您的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();
}
});
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.