Friday, February 26, 2016

Using REST With JQuery in Content Editor Webpart

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// occurs when a user clicks the read button
function Read() {
    var listName = "Privacy";
    var url = _spPageContextInfo.webAbsoluteUrl;


    getListItems(listName, url, function (data) {
        var items = data.d.results;

        // Add all the new items
        for (var i = 0; i < items.length; i++) {
            alert(items[i].Title + ":" + items[i].Id);
        }
    }, function (data) {
        alert("Ooops, an error occured. Please try again");
    });
}


function getListItems(listName, siteurl, success, failure) {
    $.ajax({
        url: "<Site url>/_vti_bin/listdata.svc/List",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}

function myFunction() {
   
alert('Hello World');
}



function insertMilestone()
{
            var mileStonesListUrl = "<Site url>/_vti_bin/listdata.svc/Tasks";  
               var milestone = {};
               milestone.Title = "Add Testing from REST";

               var entry = JSON.stringify(milestone);

               $.ajax({
                   type: "POST",
                   url: mileStonesListUrl,
                   data: entry,
                   contentType: "application/json; charset=utf-8",
                   error: function (xhr) {
                       alert(xhr.status + ": " + xhr.statusText);
                   },

                   success: function () {
                       alert('Added');

                   }
               });
}


function updateMilestone(id)
{

               var mileStonesUrl = "<Site url>/_vti_bin/listdata.svc/Tasks";  
               mileStonesUrl = mileStonesUrl + "(" + id+ ")";


               var beforeSendFunction;

               var milestoneModifications = {};
               milestoneModifications.Title = "Updated from REST";

               var updatedMilestoneData = JSON.stringify(milestoneModifications);


               //update exsiting milestone
               beforeSendFunction = function (xhr) {
                   xhr.setRequestHeader("If-Match", "*");
                   // Using MERGE so that the entire entity doesn't need to be sent over the wire.
                   xhr.setRequestHeader("X-HTTP-Method", 'MERGE');
               }

               $.ajax({
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   processData: false,
                   beforeSend: beforeSendFunction,
                   url: mileStonesUrl,
                   data: updatedMilestoneData,
                   dataType: "json",
                   error: function (xhr) {
                       alert(xhr.status + ": " + xhr.statusText);
                   },

                   success: function () {
                       alert("Updated");
                     

                   }
               });

}
 function deleteMilestone(id)
{

               var mileStonesUrl = "<Site url>/_vti_bin/listdata.svc/Tasks";  
               mileStonesUrl = mileStonesUrl + "(" + id+ ")";

               $.ajax({
                   type: "DELETE",
                   contentType: "application/json; charset=utf-8",
                   processData: false,                      
                   url: mileStonesUrl,                    
                   error: function (xhr) {
                       alert(xhr.status + ": " + xhr.statusText);
                   },
                   success: function () {
                       alert("deleted");
                     

                   }
               });

}


</script>

<button onclick="Read()">Read</button>
<button onclick="insertMilestone()">Add</button>
<button onclick="updateMilestone(1)">Update</button>
<button onclick="deleteMilestone(1)">Delete</button>