jQuery logo

Strange behavior of console.log() I have noticed when I created a JS code for SharePoint page. My code used jQuery and SPServices library. The code used to get items from a list and render options for "select" control.

Below I post a part of my function which fills a JS array and renders options for "select" control.

_spBodyOnLoadFunctionNames.push("MatFunctions");

function MatFunctions() {

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Themes",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        // var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
        // $("#tasksUL").append(liHtml);
		var str = $(this).attr("ows_Title");
			$('#yourElementId').append($('<option />', {'text' : str ,  'value': str}))
		//console.log(str); 
      });
    }
  });
}

 

Look at the commented line "//console.log(str);". If this line is uncommented and web-developer panel is opened at least one time, than it's Ok. You can see in Console tab values of variable and options are generated. But if you just execute a new instance of IE and try to open the page, you won't see rendered options of select control. If you press F12 and reload page, than "select" control is Ok, but if you close and open IE again, the behavior is the same.

Only when you comment all the lines with "//console.log(str)" than it's Ok.