2

I've made a content box with a div("target" Element) and a script link which is loading following code. Also I load after the start a HTML file with the form of my box, purpos of the box is to show the followed Documents. Everthiing works fine but sometimes I get this Error:

followedSites.js:126 Uncaught TypeError: Cannot set property 'innerHTML' of null

at Object.renderSiteSuccess [as success] (followedDocs.js:126)
at Function.SP.RequestExecutor.internalProcessXMLHttpRequestOnreadystatechange (eval at <anonymous> (jquery-1.10.2.min.js:4), <anonymous>:2:14107)
at XMLHttpRequest.eval (eval at <anonymous> (jquery-1.10.2.min.js:4), <anonymous>:2:50068)

So it might be that the loaded Empty is not existing at the moment, or I just cant access it. I couldnt debug the problem becuase this error just occurs very seldom, but I want to solve it until I publish it. What I saw when I tryed to debug, that the Element was always there and the XMLHttp Request for the HTML was also ok(200)

If you find additionally things in my code please dont hesitate to tell me.

 function loadHTMLDoc(target) {
    if(!target){
        alert("Element doesnt exist")
    }
    $(target).append($("<div class=\"documentClassic\" >").load("https://sp.egger.com/Style%20Library/js/FollowedContent/followedDocs.html"));
};


/*============= Load Variables ======================*/
var documentResults;

/**         Ajax request for the followed Content                           */
function doJSONDoc(RESTuri, success, fail) {    
    loadHTMLDoc("#followedDocsBox");
    init();

    /*
    $.when($.ajax(loadHTMLDoc('#followedDocsBox'))).then(init());
    $(this).delay(500);
    */
    var restUrl = _spPageContextInfo.webAbsoluteUrl + RESTuri;
    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
    executor.executeAsync({
        url: restUrl,
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose",
            "X-RequestDigest": $('#__REQUESTDIGEST').val() 
        },
        success: success,
        error: fail
    }); 
}
/**             Excuted when rendering Failed                               */
function renderFail(data, errorCode, errorMessage) {
    n = document.getElementById('htmloutDocument');
    n.innerHTML = errorMessage;
    console.log("loading Documents have failed");
}
/**             Executed when rendering succeeded                           */
function renderDocSuccess(data) {
    $(this).delay(5000);
    var jsonObject = JSON.parse(data.body);
    var n = document.getElementById("documentJsonout");
    n.innerHTML = data.body;
    documentResults = jsonObject.d.Followed.results;
    var str = "";
    var old = -1;

    // Sortierung des result Arrays
    documentResults.sort(function(a, b){
    var nameA=a.Name.toLowerCase(), nameB=b.Name.toLowerCase();
    if (nameA < nameB){ //sort string ascending
        return -1 
    }
    if (nameA > nameB){
        return 1
    }
    return 0 //default return value (no sorting)
    })

    str += '<ul id="documentList">';
    for (i = 0; i < documentResults.length; i++) {
        str += "<li>";

        switch (documentResults[i].ActorType) {
            case 0:
                // Use case: depending on ActorType
                // if you want to use indiviual markup for every item-type
                str += "<div class=\"DoclistATag\"><a title=\"" + documentResults[i].Name
                    + "\" class=\"link" + documentResults[i].ActorType
                    + ")\" href=\"" + documentResults[i].Uri
                    + "\">" + documentResults[i].Name + "</a></div>";
                break;
            default:
                str += "<div class=\"DoclistATag\"><a title=\"" + documentResults[i].Name
                    + "\" class=\"link" + documentResults[i].ActorType
                    + "\" href=\"" + documentResults[i].Uri
                + "\"><span class=\"SiteDocItemText\">" + documentResults[i].Name+ "</span></a></div>";
                break;
        }
        var id=documentResults[i].Id
        str += "<div class=\"DoclistSpan\"><span onclick=\"stopFollowDoc('"+documentResults[i].Uri+"')\"  class='UnfollowDoc'id=\""+id 
                +"\" title=\"Hören Sie auf " + documentResults[i].Name + " zu Folgen\"  >Stop Following</span></div> </li>";
        old = documentResults[i].ActorType;
    }
    str += "</ul>"; 

    n = document.getElementById('htmloutDocument');
    $('#htmloutDocument').hide();
    n.innerHTML = str;
    $('#htmloutDocument').delay(500).fadeIn(1000);

    $(document).ready(function(){
        size_li = $("#documentList li").length;
        if(size_li == 0){
            $('#NoDocuments').show();
            $('#documentList').hide();
            $('#documentShowLess').hide();
            $('#documentLoadMore').hide();
        }else if(size_li >= 0 && size_li <= 9){
            $('#documentList li:gt(8)').hide();
            $('#documentShowLess').hide();
            $('#documentLoadMore').hide();
        }else if(size_li > 9){
            $('#documentLoadMore').show();
            $('#documentList li:gt(8)').hide();
            $('#documentShowLess').hide();
            $('#documentLoadMore').click(function () {
                $('#documentList li:gt(8)').slideDown("slow");
                $('#documentShowLess').show();
                $('#documentLoadMore').hide();
            });
            $('#documentShowLess').click(function () {
                $('#documentList li:gt(8)').slideUp("slow");
                $('#documentLoadMore').show();
                $('#documentShowLess').hide();
            });
        }           


        $('#sortDocsAscending').click( function(){
        console.log("click");
        sortValue = 1;
        $(".documentClassic").fadeOut(300, function(){
                $(this).remove();
                doJSONDoc("/_api/social.following/my/followed%28types=2%29", renderDocSuccess, renderSiteFail);
            });
        });
        $('#sortDocsDescending').click( function(){
            console.log("click");
            sortValue = 2;
            $(".documentClassic").fadeOut(300, function(){
                $(this).remove();
                doJSONDoc("/_api/social.following/my/followed%28types=2%29", renderDocSuccess, renderSiteFail);
            });
        });
        $('#UnsortedDocsList').click( function(){
            console.log("click");
            sortValue = 0;
            $(".documentClassic").fadeOut(300, function(){
                $(this).remove();
                doJSONDoc("/_api/social.following/my/followed%28types=2%29", renderDocSuccess, renderSiteFail);
            });
        });

        var div = $('#htmloutSite')
        var listItems = div.find('ul>li');
        var value;

        /* When input Field is empty show default list*/
        $('#FollowedDocSearch').on( 'input', function(ev){
            var comp = $('#FollowedDocSearch').val();
            size_li = $("#documentList li").length;
            if(comp == ""){
                if(size_li == 0){
                    $('#NoDocuments').show();
                    $('#documentList').hide();
                    $('#documentShowLess').hide();
                    $('#documentLoadMore').hide();
                }else if(size_li >= 0 && size_li <= 9){
                    $('#documentList li:gt(8)').hide();
                    $('#documentShowLess').hide();
                    $('#documentLoadMore').hide();
                }else if(size_li > 9){
                    $('#documentLoadMore').show();
                    $('#documentList li:gt(8)').hide();
                    $('#documentShowLess').hide();
                    $('#documentLoadMore').click(function () {
                        $('#documentList li:gt(8)').slideDown("slow");
                        $('#documentShowLess').show();
                        $('#documentLoadMore').hide();
                    });
                    $('#documentShowLess').click(function () {
                        $('#documentList li:gt(8)').slideUp("slow");
                        $('#documentLoadMore').show();
                        $('#documentShowLess').hide();
                    });
                }
            }
        });

        $('#FollowedDocSearch').on("keyup", function(){
            value = $(this).val().toUpperCase();
            var exp = new RegExp('^' + value, 'i');

            /* First Try on Search Algorithm but was case sensitiv for upper and Lower Case         

            var matching = listItems.find('span.SiteListItemText:contains("'+value+'")');
            console.log(matching)
            var test = listItems.find('span.SiteListItemText')
            listItems.hide();
            matching.closest('li').show();
             */
            /* the filter function of jquery gets us the elements which meet certain criteria */
            var matchingListItems = listItems.filter(function(i, li){
                var listItemText = $(li).find('span.SiteDocItemText').text().toUpperCase();
                return ~listItemText.indexOf(value);            
            })

            listItems.hide();
            matchingListItems.show();

        });

    });     
}
/**         Load the SP Client context and the User Profile                 */
function init(){
    // Make sure SP.ClientContext is available
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        // Make sure SocialFollowingManager is available
        SP.SOD.executeFunc('userprofile', 'SP.Social.SocialFollowingManager', function () {
            /* console.log("Hallo ich bin dein ClientContext und dein SocialFollowingManager"); */
        });
    });
}

init();
// starting to render the List
doJSONDoc("/_api/social.following/my/followed%28types=2%29",renderDocSuccess, renderFail);
  • I forgot to say the Error occurs on this line > n.innerHTML = data.body; – Andreas Vitzthum Aug 25 '17 at 6:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.