whatjsom

• Jsom stands for JavaScript Object Model 
• JSOM is dependent on 3 client side libraries( MicrosoftAjax.js, SP.Runtime.js  and SP.JS)

                References:

                 <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

              <script type="text/javascript" src="/_layouts/15/sp.js"></script>

              <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>

•   JSOM send the  XML format request to the server and receives the JSON response.

to ensure JSOM code is executed after SP.js file is loaded, we need to use SP.SOD.executeOrDelayUntilScriptLoaded (SOD- Script On Demand)



 Code Example:

 SP.SOD.executeOrDelayUntilScriptLoaded(mytask, 'SP.js'); 

    function mtask() 
              {   
                 var cc= new SP.ClientContext.get_current();
                 var getWeb = cc.get_web(); 
                .....
             }


if you use SP.SOD.executeOrDelayUntilScriptLoaded, the code block that is waiting to be executed  sp.js(any other file in that place if mention). it will wait endlessly and may not be executed at all. overcome this issue, SP.SOD has another useful function SP.SOD.executeFun

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', mytask);   \\ here 3 parameters

    function mtask() 
              {   
                 var cc= new SP.ClientContext.get_current();
                 var getWeb = cc.get_web(); 
                .....
             }

Sp.js : The script file that will be invoked and loaded to the page(use any file name here).
SP.ClientContext – The main object within the script file that will be used. It can be kept null.
mytask– The function to run after the script files are loaded to the page.


We must follow below 3 steps to use JSOM
1.  Reference the require JS files
2.  Get a client context and load
3.  Execute the query and provide callback functions

•        JSOM supports Async, hence Execute the query using ExecuteQueryAsync. 
•       As part of ExecuteQueryAsync, you have to provide two callback functions  1.  success and 2. failure call back. Ex: clientContext.executeQueryAsync(onQuerySuccessded, onQueryFailed);

Code Explanation:

1.  Reference the require JS files
       

$(document).ready(function() 
{     
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', Mytask); 
})

 2. Get a client context and load

Note: Add below code under <script lang="javascript" type="text/javascript"> </Script>

function Mytask() {
var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item("Title", $("#CategoryTitle").val());
    oListItem.set_item("CategoryName", $("#CategoryName").val());
 oListItem.set_item("CategoryId", $("#CategoryId").val());

    oListItem.update();
    clientContext.load(oListItem);

3.  Execute the query and provide callback functions
two callback functions. one is the success and other failures call back

clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)

    );
}

function onQuerySucceeded() {
           alert('Save Record succefully');

        // if success, we can add iterated by instantiating an enumerator object. we will see the code in the next examples
}

function onQueryFailed(sender, args) {
    alert('Failed Records ');

}