Develop Reference

Redirect to list view after updating list item using SPServices.js

I created a custom form to submit list item and attach multiple attachments.
And would need to redirect user to default list view after all the attachments are attached to a list item.
I tried adding window.location.href='default List url' but it redirects while the attachments are getting added.
It works fine for small file(s) but for large file(s), only 1 attachment gets added.
Here is the snippet:
HTML:
var ListTitle = "SubTask";
$( document ).ready(function() {
//$('#attachment').multifile();
$("#NewSaveItem").click(function() {
CreateNewItem();
});
});
function CreateNewItem() {
var data = {
__metadata: { 'type': "SP.Data.SubTaskListItem" },
Title: $('#Title').val()
};
$.ajax({
//_spPageContextInfo.webAbsoluteUrl get current SharePoint site url
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + ListTitle + "')/Items",
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-Type": "application/json;odata=verbose"
},
// to make sync calls.
async: false,
data: JSON.stringify(data),
success: function (data) {
if (data.d.ID != undefined && data.d.ID > 0){
//Uploads files to SharePoint List item
UploadFileToListItem(data.d);
}
else
{
console.log('Item added successfully');
}
},
error: function (error) {
console.log('Problem saving data');
}
});
// window.location.href = 'https://connect.sharepoint.com/sites/SpApps/Lists/SubTask/';
}
//Once the item is created now let’s try to upload documents to SharePoint list item.
function UploadFileToListItem(data) {
var element = document.getElementById("attachment");
lastFileName = element.files[element.files.length - 1].name;
for (var i = 0; i < element.files.length; i++) {
var file = element.files[i];
uploadFile(data, file);
}
alert('Done');
window.location.href = 'https://connect.sharepoint.com/sites/SpApps/Lists/SubTask/';
}
//uploads single file at a time.
function uploadFile(data, file) {
var getFileBuffer = function (file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
getFileBuffer(file).then(function (buffer) {
var binary = "";
var bytes = new Uint8Array(buffer);
var i = bytes.byteLength;
while (i--) {
binary = String.fromCharCode(bytes[i]) + binary;
}
var fileName = file.name;
var error = ''
$().SPServices({
operation: "AddAttachment",
async: false,
listName: ListTitle,
listItemID: data.Id,
fileName: fileName,
attachment: btoa(binary),
completefunc: function (xData, Status) {
console.log(file.name + " uploaded");
}
});
});
}
<table align="left" border="1" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td valign="top">
<h3> Name</h3>
</td>
<td valign="top" style="padding:9px;">
<input type="text" value="" maxlength="255" id="Title" title="Name" style="width: 96%;" ms-spellcheck-true">
</td>
</tr>
<tr >
<td >
<span style="font-family: " segoe ui" ,sans-serif; color: #444444">
Click here to attach file
</span>
<div id="attachFilesHolder ">
<input type="file" id="attachment" name="FileUpload" multiple/>
</div>
</td>
<td>
</td>
</tr>
</table>
<div>
<input name="SaveItem" style=" height: 40px; font-size: 15px;" id="NewSaveItem" accesskey="O" onclick="" type="button" value="Click here to submit " target="_self">
</div>
Please let me know where am i going wrong.

Define a uploadedCount variable in SPServices complete func and then when uploading file to list item, check if the files count in upload box is equal to the uploaded count, then use SetInterval to trace like this:
var ListTitle = "SubTask";
var fileCount=0;
var uploadCount=0;
$( document ).ready(function() {
//$('#attachment').multifile();
$("#NewSaveItem").click(function() {
CreateNewItem();
});
});
function CreateNewItem() {
var data = {
__metadata: { 'type': "SP.Data.SubTaskListItem" },
Title: $('#Title').val()
};
$.ajax({
//_spPageContextInfo.webAbsoluteUrl get current SharePoint site url
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + ListTitle + "')/Items",
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-Type": "application/json;odata=verbose"
},
// to make sync calls.
async: false,
data: JSON.stringify(data),
success: function (data) {
if (data.d.ID != undefined && data.d.ID > 0){
//Uploads files to SharePoint List item
UploadFileToListItem(data.d);
}
else
{
console.log('Item added successfully');
}
},
error: function (error) {
console.log('Problem saving data');
}
});
// window.location.href = 'https://connect.sharepoint.com/sites/SpApps/Lists/SubTask/';
}
//Once the item is created now let’s try to upload documents to SharePoint list item.
function UploadFileToListItem(data) {
var element = document.getElementById("attachment");
lastFileName = element.files[element.files.length - 1].name;
//file count
fileCount=element.files.length;
for (var i = 0; i < element.files.length; i++) {
var file = element.files[i];
uploadFile(data, file);
}
//alert('Done');
setInterval(function(){
if(fileCount!=0&&fileCount==uploadCount){
window.location.href = 'https://connect.sharepoint.com/sites/SpApps/Lists/SubTask/';
}
}, 1000);
}
//uploads single file at a time.
function uploadFile(data, file) {
var getFileBuffer = function (file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
getFileBuffer(file).then(function (buffer) {
var binary = "";
var bytes = new Uint8Array(buffer);
var i = bytes.byteLength;
while (i--) {
binary = String.fromCharCode(bytes[i]) + binary;
}
var fileName = file.name;
var error = ''
$().SPServices({
operation: "AddAttachment",
async: false,
listName: ListTitle,
listItemID: data.Id,
fileName: fileName,
attachment: btoa(binary),
completefunc: function (xData, Status) {
console.log(file.name + " uploaded");
uploadCount++;
}
});
});
}

How to create Fixed page links in angularjs dir-pagination-controls?

I am new to angularjs , I have trying to create fixed Page links in dir-pagination-controls in angularjs
I have try to use 'total-items=100' but not working ,
I am getting all my values from web services ,
What I have tried
app.controller('listdata',['$scope', '$http', function($scope, $http) {
$scope.xxxx = []; //declare an empty array
data = [];
function getResultsPage(pageNumber) {
console.log('Please wait while data is loadind');
$http({
method: 'POST',
url: ajaxurl,
params: {
'action': 'get_xxxx',
'pageNumber': pageNumber,
'usersPerPage': $scope.usersPerPage
}
}).success(function (data, status, headers, config) {
$scope.xxxx = $scope.xxxx.concat(data);
$scope.totalUsers = 100;
});
}
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = usersPerPage; // this should match however many results your API puts on one page
getResultsPage(1);
$scope.pagination = {
current: 1
};
$scope.pageChanged = function(newPage) {
console.log(newPage);
getResultsPage(newPage);
};
$scope.sort = function (keyname) {
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
};
}]);
<tr dir-paginate="xxxx in xxxxs|orderBy:sortKey:reverse|filter:search|itemsPerPage:usersPerPage" >
<!--td>{{xxxx.id}}</td-->
<td>{{xxxx.name}}</td>
<td>{{xxxx.neighborhood}}</td>
<td class="td-edit"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/dist/images/edit.png"></td>
</tr>
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>

get data from json array to Table angularJS

I have this json data:
{
status: "SUCCESS",
data: [
{
FirstName: "Student ",
LastName: "1",
Id: 1,
ObjectState: 0
},
{
FirstName: "Student ",
LastName: "2",
Id: 2,
ObjectState: 0
}
}
]
}
I have tried like this,in my controller and in the view:
app.js:
.controller("etudCtrl",["$scope", "$http", function ($scope, $http) {
var i;
$http({method: 'GET', url: 'MyURL'})
.success(function (data) {
for(i=0;i<data.length;i++){
$scope.paged = data[i].data; // response data
console.log($scope.paged+" $scope.paged");
}
$scope.currentPageStores= $scope.paged;
console.log($scope.currentPageStores+" values");
console.log("success");
}).error(function (data, status, headers, config) {
console.log("data error ...");
});
}])
Students.html:
<table>
<thead>...</thead>
<tbody data-ng-controller="etudCtrl">
<tr ng-repeat="store in currentPageStores" >
<td align="center">{{store.LastName}}</td>
<td align="center">{{store.FirstName}}</td>
</tr>
</tbody>
</table>
and this what I get in console:
values
success
I didn't get any data in console or in the Table :(
any help please
thanks
Update:
I try with this:
$rootScope.usersData = angular.toJson(data.data);
console.log($rootScope.usersData+" my data");
I get all the data that I want to display in console
Update2:
$http({method: 'GET', url: 'MyURL'})
.success(function (data) {
console.log(JSON.stringify(data)+"myData");
for(i=0;i<data.length;i++){
$scope.paged = data.data[i]; // response data
console.log($scope.paged+" $scope.paged");
}
.....
}
I get this in console:
{"status":"SUCCESS","data":[{"FirstName":"Student ","LastName":"1","Id":1,"ObjectState":0},{"FirstName":"Student ","LastName":"2","Id":2,"ObjectState":0}]}myData

No need to loop around in controller. Try the following:
Your Controller:
.controller("etudCtrl",["$scope", "$http", function ($scope, $http) {
$http({method: 'GET', url: 'MyURL'})
.success(function (data) {
$scope.currentPageStores= data.data;
console.log($scope.currentPageStores+ " values");
console.log("success");
}).error(function (data, status, headers, config) {
console.log("data error ...");
});
}])
Your student.html
<table>
<thead>...</thead>
<tbody data-ng-controller="etudCtrl">
<tr ng-repeat="store in currentPageStores track by $index" >
<td align="center">{{store.LastName}}</td>
<td align="center">{{store.FirstName}}</td>
</tbody>
</table>
Here is a PLUNKER example of how you access when the data comes in an array as yours : http://plnkr.co/edit/Q9ewbH7XevsOQG0Yzv6B?p=preview

You can't print a object on console with another string.
use
console.log(JSON.stringify($scope.currentPageStores)+" values");
or
console.log($scope.currentPageStores);

Data not binding to table using KnockoutJS

I am working on my first custom-built KO implementation and I had the data binding to the table in my page, but not it's not binding to it. I can verify that my web service is getting called and it's returning data. However, I don't know why the data isn't loading into the table since I am not getting any errors.
I am sure I am missing something simple since I am a newb to this. :)
I am using KO 3.1.0.
PAGE MARKUP
<table class="dnnGrid">
<thead>
<tr class="dnnGridHeader">
<th>Task ID</th>
<th>Name</th>
<th>Description</th>
<th>Date Updated</th>
</tr>
</thead>
<tbody data-bind="foreach: tasks">
<tr class="dnnGridRow">
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: LastUpdatedDate"></td>
</tr>
</tbody>
</table>
PAGE SCRIPT
var sf = $.ServicesFramework(<%=ModuleId %>);
var userId = <%=UserId%>;
var serviceUrl = sf.getServiceRoot('POC');
var moduleId = sf.getModuleId();
$(document).ready(function() {
ko.applyBindings(TaskViewModel);
GetTasks();
$('#lnkSave').click(function() {
SaveTask();
GetTasks();
});
});
IMPORTED SCRIPT
var Task = function(data) {
data = data || {};
var self = this;
self.ID = ko.observable(data.ID);
self.ModuleId = ko.observable(data.ModelId);
self.ContentItemId = ko.observable(data.ContentItemId);
self.Name = ko.observable(data.Name);
self.Description = ko.observable(data.Description);
self.LastUpdatedDate = ko.observable(data.LastUpdatedDate);
self.LastUpdatedBy = ko.observable(data.LastUpdatedBy);
}
var TaskViewModel = function(items) {
var self = this;
var newTask = {
'ID': ko.observable(),
'ModuleId': ko.observable(),
'ContentItemId': ko.observable(),
'Name': ko.observable(),
'Description': ko.observable(),
'LastUpdatedDate': ko.observable(),
'LastUpdatedBy': ko.observable()
};
self.tasks = ko.observableArray(ko.utils.arrayMap(items, function (data) {
return new Task(data);
}));
self.updateTask = function (task) {
GetTasks();
}
}
function SaveTask() {
var task = {
'ModuleId': moduleId,
'LastUpdatedBy': userId,
'Name': $('#txtName').val(),
'Description': $('#txtDescription').val()
}
$.ajax({
type: 'POST',
url: serviceUrl + 'Task/CreateTask',
data: JSON.stringify(task),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
beforeSend: sf.setModuleHeaders,
success: function (data) {
var results = $.parseJSON(data);
ParseResults(results, viewModel);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("STATUS: " + xhr.status + "\nERROR:\n" + thrownError);
}
});
}
function GetTasks() {
if (TaskViewModel) {
if (TaskViewModel.tasks) {
TaskViewModel.tasks.removeAll();
}
}
$.ajax({
type: 'GET',
url: serviceUrl + 'Task/GetTasks?ModuleId=' + moduleId,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
beforeSend: sf.setModuleHeaders,
success: function (data) {
var results = $.parseJSON(data);
TaskViewModel.tasks = results;
},
error: function (xhr, ajaxOptions, thrownError) {
alert("STATUS: " + xhr.status + "\nERROR:\n" + thrownError);
}
});
}

Try moving this line ko.applyBindings(TaskViewModel) to bottom of .ready function
$(document).ready(function() {
GetTasks();
$('#lnkSave').click(function() {
SaveTask();
GetTasks();
});
ko.applyBindings(TaskViewModel);
});
After this line, var results = $.parseJSON(data); add a debugger; statement and open chrome developer tools (F12 key), refresh the page and step through the code using F10 key.
At this point you should be able to see the parsed data in results. If it is not in required format, you may need to assign TaskViewModel.tasks like this
TaskViewModel.tasks = ko.utils.arrayMap(results, function (task) {
return new Task(task);
});

Refreshing ViewModel after deleting data in Knockout.js

I am using Knockout for binding data of a form to the table,now what i ma facing is that when i am deleting the data from the table it goes to server side and delete the data as well but that data remains there unless we refresh the page which not pratical.So what i tried that i am calling the index method on server side which gives me the list of the datas after refreshing the database but when i am doing this.that refreshed datas are appended to the data that remain on the view.i mean it shows the remaing datas and refreshed data both but pratically it shows only the refreshed datas.
My code:
<table id="table2" style="border: double">
<thead>
<tr>
<td>Ticket ID</td>
<td>Ticket Type</td>
<td>No of Tickets</td>
<td>Ticket Price</td>
<td>Start Date</td>
<td>End Date</td>
<td>Action</td>
</tr>
</thead>
<!--Iterate through an observableArray using foreach-->
<tbody id="ticketid" data-bind="foreach:TicketDatas">
<tr style="border: solid" data-bind="click: $root.getselectedTicket" id="updtr">
<td data-bind="text:TicketId">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:SelectedTicketType">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:No_Of_Ticket">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:Ticket_Price">#*<span data-bind="text:Ticket_Price"></span>*#</td>
<td data-bind="text:Start_Date">#*<span data-bind="text:Start_Date"></span>*#</td>
<td data-bind="text:End_Date">#*<span data-bind="text:End_Date"></span>*#</td>
<td><button id="deletelink">Delete</button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("#deletelink").live('click', function () {
if (confirm('Are you sure to Delete this ticket ??')) {
var deleteLink = $(this);
var tableRow = deleteLink.closest('tr');
var firstCell = tableRow.find('td:first-child');
var tickid = firstCell.text();
//var tickid = $("#table2 tbody tr td:eq(0)").html();
$.ajax({
type: "POST",
data: { id: tickid },
url: "Ticket/DeleteTicket",
//data: "{id:" + ko.toJSON(id) + "}",
success: function (data) {
self.TicketDatas.remove(data);
alert("Record Deleted Successfully");
//ko.mapping.fromJS(self.TicketDatas, data)
//GetTickets();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
// alert("Clicked" + employee.EmpNo)
}
});
function GetTickets() {
//Ajax Call Get All Employee Records
$.ajax({
type: "GET",
cache: false,
url: "Ticket/GetAllTickets",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
self.TicketDatas.push(data[i]);
}
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
</script>

In your ajax call, I notice you have a success handler like this:
success: function (data) {
self.TicketDatas.remove(data);
alert("Record Deleted Successfully");
//ko.mapping.fromJS(self.TicketDatas, data)
//GetTickets();//Refresh the Table
},
I can see where you're trying to remove the deleted item by calling self.TicketDatas.remove(data);. However, this isn't likely to remove anything from your client-side array of TicketDatas, because you're using the data from the response of the ajax call, and trying to remove that literal object from the array. That actual object isn't in the array, because it was just created from the ajax response.
When removing an object from an array, you either need to reference it by index, or by the an object reference which points to the same memory address as an object in the array.
Try something like this instead:
success: function (data) {
self.TicketDatas.remove(ko.dataFor(deleteLink));
...
},
http://knockoutjs.com/documentation/unobtrusive-event-handling.html

Why bother trying to remove a single ticket from your array when shortly after you ask for all tickets? Also I imagine you don't actually want to use a 'push' if GetTickets really is returning all tickets.
<script type="text/javascript">
$("#deletelink").live('click', function () {
if (confirm('Are you sure to Delete this ticket ??')) {
var deleteLink = $(this);
var tableRow = deleteLink.closest('tr');
var firstCell = tableRow.find('td:first-child');
var tickid = firstCell.text();
**DeleteTicket(tickid);**
}
});
function DeleteTicket(tickid) {
$.ajax({
type: "POST",
data: { id: tickid },
url: "Ticket/DeleteTicket",
success: function (data) {
alert("Record Deleted Successfully");
**GetTickets()**
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
function GetTickets() {
//Ajax Call Get All Employee Records
$.ajax({
type: "GET",
cache: false,
url: "Ticket/GetAllTickets",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
**self.TicketDatas(data);**
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
</script>