Client Side Object Model (CSOM) only works in Page Edit Mode

Following my previous post with accessing SharePoint List items using REST API, I’m starting to use Client Side Object Model in the Script Editor Webpart. Then, I found another issue where my CSOM script is only works when the Page in Edit mode. Why would that be ? Why I found two strange things in a week ?

After analyzing and placing breakpoints to the script using developer tools F12, I’ve found that the Out of the Box SharePoint javascript sp.js is not yet loaded when my script executed. Then, I realize my CSOM script really need something to ensure sp.js loaded prior executing my CSOM script => SP.SOD.executeFunc.

Below is my updated code:

<script type="text/javascript">
var ctx;
var listTitle = "My list";
var list;
var items;

// Ensure 'sp.js' is loaded before your code runs.
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointListReady);

// Create an instance of the current context.
function sharePointListReady() {
 ctx = SP.ClientContext.get_current();
 list = ctx.get_web().get_lists().getByTitle(listTitle);
 var query = new SP.CamlQuery();
 query.ViewXml = "<View><Query><Where><Eq><FieldRef Name='ID'/><Value Type='Counter'>1</Value></Eq></Where></Query></View>";
 items = list.getItems(query);
 ctx.load(items);
 ctx.executeQueryAsync(onRequestSucceeded, onRequestFailed);
}

function onRequestSucceeded() {
 var itemValues = items.getItemAtIndex(0).get_fieldValues();
 alert(itemValues.Title);
}

function onRequestFailed(sender, args) {
 alert('Error: ' + args.get_message());
}
</script>

It works ! great… But the code above returns all items =( it seems like the Caml Query not working. I’ve stuck for quite sometime googling and I found msdn article that use query.set_viewXml(query) to set the Caml Query instead of query.ViewXml. This time is really working.

Below is my final code:

<script type="text/javascript">
var ctx;
var listTitle = "My list";
var list;
var items;

// Ensure 'sp.js' is loaded before your code runs.
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointListReady);

// Create an instance of the current context.
function sharePointListReady() {
 ctx = SP.ClientContext.get_current();
 list = ctx.get_web().get_lists().getByTitle(listTitle);
 var query = new SP.CamlQuery();
 query.set_viewXml("<View><Query><Where><Eq><FieldRef Name='ID'/><Value Type='Counter'>1</Value></Eq></Where></Query></View>");
 items = list.getItems(query);
 ctx.load(items);
 ctx.executeQueryAsync(onRequestSucceeded, onRequestFailed);
}

function onRequestSucceeded() {
 var itemValues = items.getItemAtIndex(0).get_fieldValues();
 alert(itemValues.Title);
}

function onRequestFailed(sender, args) {
 alert('Error: ' + args.get_message());
}
</script>

References

Advertisements

Tagged: , , , , ,

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: