Print / display list items on page

Question

I am using SP2010. Using client object model in the CEWP (Content Editor Web Part), I can give alert for each item title. But I want to print all list items on the page. I tried with document.write() but it doesn't work. Below is latest code I tried. I need to show all item titles.

CODE:

<script type="text/javascript">
    var clientContext = null;
    var web = null;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

    function Initialize() {
        alert('inside function');
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        var list = web.get_lists().getByTitle("new project");
        var camlQuery = new SP.CamlQuery();
        var q = '<View><RowLimit>5</RowLimit></View>';
        camlQuery.set_viewXml(q);
        //this.listItems = list.getItems(camlQuery);
        SPListItemCollection listItems = list.GetItems(camlQuery);
        clientContext.load(listItems);
        clientContext.executeQueryAsync(
                       Function.createDelegate(this, this.onListItemsLoadSuccess),
                       Function.createDelegate(this, this.onQueryFailed));
    }

    function onListItemsLoadSuccess(sender, args) {
        string labelHTML = String.Empty;

        var listEnumerator = this.listItems.getEnumerator();
        //iterate though all of the items
        while (listEnumerator.moveNext()) {
            var item = listEnumerator.get_current();                
            var title = item.get_displayName();
            var id = item.get_id();

            // alert("item's title : " + title); //it works
            labelHTML += title.toString() + "<br />"; //doesn't work for me.
        }
    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>​

Answer 1

your writing to a string that resides on client memory! your not writing to a html control on the page that is on the client so it will never show!

how about witin the cewp create a label with JS and then within the method write to it using the innerhtml? first create the control and then add the values to it using the script method you made.

<label id="labelHTML"></label>

<script type="text/javascript">
    var clientContext = null;
    var web = null;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

    function Initialize() {
        alert('inside function');
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        var list = web.get_lists().getByTitle("new project");
        var camlQuery = new SP.CamlQuery();
        var q = '<View><RowLimit>5</RowLimit></View>';
        camlQuery.set_viewXml(q);
        //this.listItems = list.getItems(camlQuery);
        SPListItemCollection listItems = list.GetItems(camlQuery);
        clientContext.load(listItems);
        clientContext.executeQueryAsync(
                       Function.createDelegate(this, this.onListItemsLoadSuccess),
                       Function.createDelegate(this, this.onQueryFailed));
    }

    function onListItemsLoadSuccess(sender, args) {

        var listEnumerator = this.listItems.getEnumerator();
        //iterate though all of the items
        while (listEnumerator.moveNext()) {
            var item = listEnumerator.get_current();                
            var title = item.get_displayName();
            var id = item.get_id();

            // alert("item's title : " + title); //it works
            document.getElementById('labelHTML').innerHTML += title.toString() + "<br />"; 
        }
    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>​

Answer 2

To update the innerHTML of an element, you can try to use the following one in javascript

document.getElementById('ElementId').innerHTML="string";

or the .html() method with jQuery, e.g.

$("p[id='ElementId']").html("string");
//here, the html of the <p> by id 'ElementId' will be replaced with "string"

hope this helps.

Answer 3

Try this for the line which is not working labelHTML += (title + "<br />");