none
SharePoint 2013 - Inject HTML into a Div Tag RRS feed

  • Question

  • Hello Community,

    I am working with SharePoint 2013 and REST API trying to dynamically insert HTML into a Div tag.  I have created a page with two CEWP and then uploaded the following script/html into separate files which I associated with the web parts.

    JQuery

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function (data) {
                    var listItemInfo = "";
    				
    				$.each(data.d.results, function (key, value){
    					listItemInfo += "<strong>Title: </strong>" + data.d.Title +
                            " <strong>Organization: </strong>" + data.d.Organization + "<br/>";
                },
                error: function (data) {
                    alert('An Error Has Occured');
                }		
            });
    		
    		$("#listItems").html(listItemInfo);
        }
    
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>

    HTML

    <div id="listItems"></div>

    The page runs with no errors, but at none of the data is there either.  Can anyone see the issue in the code and LMK how to correct this?

    Thanks!

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Thursday, March 16, 2017 11:46 PM

Answers

  • Hi Tom,

    I noted below couple of things in your code.

    It's async call issue, what you need to do is to insert HTML into a Div tag when jQuery.ajax done loading something like below.

    Also, there was syntax issue  i.e. closing pare ')' was missing for each loop.

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    var listItemInfo = "";
    
                    $.each(data.d.results, function(key, value) {
                        listItemInfo += "<strong>Title: </strong>" + data.d.Title + " <strong>Organization: </strong>" + data.d.Organization + "<br/>";
                    });
    
                    $("#listItems").html(listItemInfo);
                },
                error: function(data) {
                    alert('An Error Has Occured');
                }
            });
        }
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>
    Thanks.


    Friday, March 17, 2017 6:16 AM
  • Hi Tom,

    Instead of using data.d.Title, use value.Title since you are already in the loop and has current object in value.

    Regards


    SharePoint Architect


    Friday, March 17, 2017 4:38 PM

All replies

  • Hi Tom,

    I noted below couple of things in your code.

    It's async call issue, what you need to do is to insert HTML into a Div tag when jQuery.ajax done loading something like below.

    Also, there was syntax issue  i.e. closing pare ')' was missing for each loop.

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    var listItemInfo = "";
    
                    $.each(data.d.results, function(key, value) {
                        listItemInfo += "<strong>Title: </strong>" + data.d.Title + " <strong>Organization: </strong>" + data.d.Organization + "<br/>";
                    });
    
                    $("#listItems").html(listItemInfo);
                },
                error: function(data) {
                    alert('An Error Has Occured');
                }
            });
        }
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>
    Thanks.


    Friday, March 17, 2017 6:16 AM
  • Hey Jaydeep,

    Thank you for that fast and well defined reply.  I implemented your code, and it's clear that all the rows are now being returned and displayed, but unfortunately every value is "undefined" - what are we still missing?

    Thanks!

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Friday, March 17, 2017 3:52 PM
  • Hello,

    Thanks for that suggestion but for this project I want to use Rest API.

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Friday, March 17, 2017 4:32 PM
  • Hi Tom,

    Instead of using data.d.Title, use value.Title since you are already in the loop and has current object in value.

    Regards


    SharePoint Architect


    Friday, March 17, 2017 4:38 PM