I am working on an update page and would like to load the current item based on the item selected. I figured out that you can get the id using var itemId = parseInt(GetUrlKeyValue('ID'));
But the bit i am missing is how to load the controls on the pages such as textbox etc on form load with current item based on the id. the below code is not working on pageload
window.onload = function () {
alert('onload');
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Contact Details');
this.oListItem = oList.getItemById(9);
alert(listItem.get_item('Title'));
// var clientContext = new SP.ClientContext.get_current();
// var web = clientContext.get_web();
// var list = web.get_lists().getByTitle('Contact Details');
// var itemId = parseInt(GetUrlKeyValue('ID'));
// //this.oListItem = list.getItemById(9);
// var listItem = list.getItemById(9);
// alert(listItem.get_item('Title'));
// //document.getElementById("Title").value = "value";
// document.getElementById("firstName").value = listItem.get_item('firstName');
// document.getElementById("lastName").value = listItem.get_item('lastName');
//// document.getElementById("fullName").value = "value";
// document.getElementById("location").value = listItem.get_item('Location');
// document.getElementById("Departmant").value = listItem.get_item('Departmant');
};
I am new to client side scripting so some explanation will be greatly appreciated. Please see the whole code.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
window.onload = function () {
// alert('pease select IT');
};
//Update
function ContactsUpdate($scope) {
$scope.contact = { firstName: "", lastName: "", Location: "", Departmant: "" };
$scope.UpdateContact = function ($event) {
var x = $scope.contact;
$event.preventDefault();
//if (x.Departmant == "HR") {
// alert('pease select IT , This is update');
//}
//else {
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('Contact Details');
var itemId = parseInt(GetUrlKeyValue('ID'));
//this.oListItem = list.getItemById(9);
var listItem = list.getItemById(9);
listItem.set_item('Title', 'My new updated Title');
listItem.set_item('Title', x.firstName);
listItem.set_item('firstName', x.firstName);
listItem.set_item('lastName', x.lastName);
listItem.set_item('fullName', x.firstName + " " + x.lastName);
listItem.set_item('Location', x.Location);
listItem.set_item('Departmant', x.Departmant);
alert(listItem.get_item('Title'));
listItem.update();
clientContext.executeQueryAsync(
Function.createDelegate(this, onQuerySucceededUpdate),
Function.createDelegate(this, onQueryFailedUpdate)
);
}
//}
};
onQuerySucceededUpdate = function () {
alert('Successfully updated the contact');
}
onQueryFailedUpdate = function (sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<h1>Contact Information:</h1>
<br />
<div ng-app="">
<div ng-controller="ContactsUpdate">
<strong>First Name</strong>
<input type="text" ng-model="contact.firstName" id="firstName"/><br />
<br />
<strong>Last Name</strong>
<input type="text" ng-model="contact.lastName" id="firstName"/><br />
<br />
<strong>Location </strong> <input type="text" ng-model="contact.Location" id ="location"/><br />
<br />
<strong>Departmant
<select id="Departmant" ng-model="contact.Departmant" >
<option>HR</option>
<option>IT</option>
</select><input type="submit" value="Submit" ng-click="UpdateContact($event)" />
</div>
</div>