CRUD operations in SharePoint hosted apps using Javascript Object Model (JSOM)

Code in App.js

var context = SP.ClientContext.get_current();
var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
var hostcontext = new SP.AppContextSite(context, hostUrl);
var web = hostcontext.get_web();
var lists = web.get_lists();


$(document).ready(function () {
    var scriptbase = hostUrl + "/_layouts/15/";
    $.getScript(scriptbase + 'SP.Runtime.js',
    function () {
        $.getScript(scriptbase + 'SP.js',
       function () {
           $.getScript(scriptbase + 'SP.RequestExecutor.js', execCrossDomainRequest);
       });
    });
});

function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

function execCrossDomainRequest() {
    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);
    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('Employee');
    var camlQuery = new SP.CamlQuery();
    camlQuery.  set_viewXml('<View><RowLimit>10</RowLimit></View>');
    var collListItem = mylist.getItems(camlQuery);
    context.load(mylist);
    context.load(collListItem);
    context.executeQueryAsync(
     Function.createDelegate(this, successHandler),
     Function.createDelegate(this, errorHandler)
    );



    function successHandler() {
        var listItemInfo = '<div><table class="hovertable"> <tr><th width=100px; align=center;>Title</th><th width=100px>First Name</th><th width=100px>Last Name</th><th width=100px>Edit</th><th width=100px>Delete</th><th width=100px>View</th></tr>';
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();

            //listItemInfo += "<li style='height: 20px;'>" + oListItem.get_item('Title') + " " + oListItem.get_item('FirstName') + " " + oListItem.get_item('LastName') + "</li>";
            listItemInfo += '' +
                //"<tr> <td>" + oListItem.get_item('Title') + "</td> <td>" + oListItem.get_item('FirstName') + "</td> <td>" + oListItem.get_item('LastName') + "</td> <td><a href=" + hostUrl + "/Lists/OOB/EditForm.aspx?ID=" + oListItem.get_id() + " class='popup' >Edit</td> <td><a href=" + hostUrl + "/Lists/OOB/EditForm.aspx?ID=" + oListItem.get_id() + " class='popup' >Delete</a></td> <td><a href=" + hostUrl + "/Lists/OOB/DispForm.aspx?ID=" + oListItem.get_id() + " class='popup' >View</a></td> </tr></table>";
                '<tr> <td>' + oListItem.get_item('Title') + '</td> <td>' + oListItem.get_item('FirstName') + '</td> <td>' + oListItem.get_item('LastName') +

                '</td> <td><input type=button value=Edit onClick=edititem(' + oListItem.get_id() + ')> </td> <td><input type=button value=Delete onclick=deleteitem(' + oListItem.get_id() + ')></td> <td><input type=button value=View onclick=viewitem(' + oListItem.get_id() + ')></td></tr>';

            //document.getElementById("message").innerHTML = '<h1>' + mylist.get_title() + '</h1><br/>';
            //document.getElementById("message").innerHTML += listItemInfo.toString();
        }
        listItemInfo = listItemInfo + '<tr><td cellpadding=3><input type=button value=AddNew onClick=addnew()> </td></tr></table></div>'
        $('#spapp').html(listItemInfo);
    }
}
   
function addnew() {
    var html = '<div id=addform>  <h2 align=center color=#F28772>Add New Item</h2>' +
        '<table class="hovertable">' +
        '<tr>' +
            '<td >Title</td>' +
            '<td ><input type="text" id="newtitle"/></td>' +
        '</tr>' +

        '<tr>' +
            '<td >First Name</td>' +
            '<td ><input type="text" id="newfirstname"/></td>' +
        '</tr>' +
        '<tr>' +
            '<td >Last Name</td>' +
            '<td ><input type="text" id="newlastname"/></td>' +
        '</tr>' +
        '<tr>' +
            '<td >&nbsp;</td>' +
            '<td ><input type="button" value="Save" onClick="saveNewItem()"></td>' +
        '</tr>' +
    '</table>';
    $.colorbox({ html: html });

}

function saveNewItem() {
    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('Employee');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = mylist.addItem(itemCreateInfo);

    oListItem.set_item('Title', $("#newtitle").val());
    oListItem.set_item('FirstName', $("#newfirstname").val());
    oListItem.set_item('LastName', $("#newlastname").val());

    oListItem.update();
    context.load(mylist);
    context.load(oListItem);

    context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Operation Completed, Item Id : ' + oListItem.get_id());
    execCrossDomainRequest();
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    execCrossDomainRequest();
}


function edititem(id) {

    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('Employee');

    this.oListItem = mylist.getItemById(id);

    context.load(mylist);
    context.load(oListItem);
    context.load(oListItem);
    context.executeQueryAsync(Function.createDelegate(this, function(){loadEdit(id);}), Function.createDelegate(this, this.onQueryFailed));
}

function loadEdit(id) {
    var html = '<div id=editform> <h2 align=center color=#F28772>Edit Item</h2> <table class="hovertable">' +
               
                '<tr>' +
                    '<td >Title</td>' +
                    '<td ><input type="text" id="edittitle" value="' + oListItem.get_item('Title') + '"/></td>' +
                '</tr>' +

                '<tr>' +
                    '<td >First Name</td>' +
                    '<td ><input type="text" id="editfirstname" value="' + oListItem.get_item('FirstName')+ '"/></td>' +
                '</tr>' +
                '<tr>' +
                    '<td >Last Name</td>' +
                    '<td ><input type="text" id="editlastname" value="' + oListItem.get_item('LastName')+'"/></td>' +
                '</tr>' +
                '<tr>' +
                    '<td >&nbsp;</td>' +
                    '<td ><input type=button value=Save onClick=saveEditItem('+id+') ></td>' +
                '</tr>' +
            '</table>';


    $.colorbox({ html: html });
}




function saveEditItem(id) {
    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('Employee');

    this.oListItem = mylist.getItemById(id);

    oListItem.set_item('Title', $("#edittitle").val());
    oListItem.set_item('FirstName', $("#editfirstname").val());
    oListItem.set_item('LastName', $("#editlastname").val());

    oListItem.update();
    context.load(mylist);
    context.load(oListItem);

    context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function deleteitem(id) {
    debugger;
    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('Employee');
    this.oListItem = mylist.getItemById(id);
    oListItem.deleteObject();
    mylist.update();
    context.load(mylist);
    context.executeQueryAsync(Function.createDelegate(this, this.onDeleteSucceeded), Function.createDelegate(this, this.onQueryFailed));
 }

function onDeleteSucceeded()
{
    alert("Item Deleted Successfully");
    execCrossDomainRequest();
}

    function viewitem(id) {
        //var list = lists.getByTitle("Employee");

        var context;
        var factory;
        var appContextSite;
        var mylist;
        context = new SP.ClientContext(appweburl);

        factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
        context.set_webRequestExecutorFactory(factory);
        appContextSite = new SP.AppContextSite(context, hostUrl);
        this.web = appContextSite.get_web();
        mylist = this.web.get_lists().getByTitle('Employee');

        this.oListItem = mylist.getItemById(id);

        context.load(mylist);
        context.load(oListItem);
        context.load(oListItem);
        //clientContext.load(oListItem, 'Title');
        //context.executeQueryAsync(Function.createDelegate(this, function(){loadEdit(id);}), Function.createDelegate(this, this.onQueryFailed));
        context.executeQueryAsync(Function.createDelegate(this, this.loadView), Function.createDelegate(this, this.onQueryFailed));
    }

    function loadView(id) {
        var html = '<div id=editform> <h2 align=center color=#F28772> View Item</h2>' +
            ' <table class="hovertable">' +

                    '<tr>' +
                        '<td >Title</td>' +
                        '<td ><input type="text" readonly="readonly" id="edittitle" value="' + oListItem.get_item('Title') + '"/></td>' +
                    '</tr>' +

                    '<tr>' +
                        '<td >First Name</td>' +
                        '<td ><input type="text" readonly="readonly" id="editfirstname" value="' + oListItem.get_item('FirstName') + '"/></td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td >Last Name</td>' +
                        '<td ><input type="text" readonly="readonly" id="editlastname" value="' + oListItem.get_item('LastName') + '"/></td>' +
                    '</tr>' +
                '</table>';


        $.colorbox({ html: html });
    }


    function errorHandler() {
       
        alert('Error');
    }