i have a two select dropdowns and first has get the items from sharepoint list and when i click the move button selected item moved to second dropdown and when i click the save button status of sharepoint list is dynamically changed.if item is there in first dropdown status is "active" . If item is in second dropdown item status is "Inactive".please tell me how can i do that.?
i did this code only .soo,please tell me how can i do?
$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(retrieveListItems,'sp.js');
});
var ItemContainer = { ItemList: [] };
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('States');
var camlQuery = new SP.CamlQuery();
// camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
Function.createDelegate(this, this.onListDataLoadQueryFailed));
}
function onListDataLoadQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var tempItem = { ID: oListItem.get_id(), Value:
oListItem.get_item('Title') };
ItemContainer.ItemList.push(tempItem);
}
fillDropDown();
}
function onListDataLoadQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' +
args.get_stackTrace());
}
function fillDropDown() {
var ddlCategory = document.getElementById('sct1');
if (ddlCategory != null) {
for (var i = 0; i < ItemContainer.ItemList.length; i++) {
var theOption = new Option;
theOption.value = ItemContainer.ItemList[i].ID;
theOption.text = ItemContainer.ItemList[i].Value;
ddlCategory.options[i] = theOption;
}
}
}
//for button function
$(function(){function moveitems(origin,dest){
$(origin).find(':selected').appendTo(dest);
}
$("#move").click(function(){
moveitems('#sct1','#sct2');
});
});
The requirement seems so close as this one I tested, you may check my test solution.
<select id='selectItems' multiple='multiple'></select>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/SiteAssets/MultiSelectjQLib/multi-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="/SiteAssets/MultiSelectjQLib/jquery.multi-select.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(custom, "sp.js");
function custom() {
var clientContext = new SP.ClientContext.get_current();
//update list as your list
var list = clientContext.get_web().get_lists().getByTitle("MultiSelectTest");
//get the first item only, you may update the logic per you requirement
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
clientContext.load(items);
clientContext.executeQueryAsync(
function () {
var listItemEnumerator = items.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var _Title = oListItem.get_item('Title');
var _Status = oListItem.get_item('Status');
var _ID = oListItem.get_item('ID');
if (_Status) {
$('#selectItems').append($("<option></option>").attr("value", _ID).text(_Title));
} else {
$('#selectItems').append($("<option selected></option>").attr("value", _ID).text(_Title));
}
}
$('#selectItems').multiSelect({
afterSelect: function (values) {
alert("Select value: " + values);
var oListItem = list.getItemById(values);
oListItem.set_item('Status', false);
oListItem.update();
clientContext.executeQueryAsync(
function () {
alert('update complete');
},
function (sender, args) {
console.log(args);
}
);
},
afterDeselect: function (values) {
alert("Deselect value: " + values);
var oListItem = list.getItemById(values);
oListItem.set_item('Status', true);
oListItem.update();
clientContext.executeQueryAsync(
function () {
alert('update complete');
},
function (sender, args) {
console.log(args);
}
);
}
})
},
function (sender, args) {
console.log(args);
})
}
</script>