I have a jquery function that returns JSON
data:
This function works in Google Chrome, but not in Internet Explorer (v11).
$(document).ready(function () {
$.ajax({
url: "/../Projects/1/_vti_bin/ListData.svc/Prosjectlist?$select=ID,Tittel,Project_typeValue,Project_heading&$filter=(Project_typeValue%20eq%20%27Type1%27)",
method: "GET",
dataType: "JSON",
headers: { "accept": "application/json; odata=verbose" },
success: function (data) {
$('#projectRow').empty();
$.each(data.d.results, function (index, item) {
var itemExist = false;
$.each($('.projectRow').find('h1'), function (index1, item1) {
if (item1.innerHTML == item.Project_heading) {
itemExist = true;
$(item1).parent().append("<h3><a id='" + item.ID + "' class='projectLink' href='#'>" + item.Title + "</a></h3>");
}
});
if (itemExist == false)
$('.projectRow').append("<div class='projectHeadingDiv left'><li><h1>" + item.Project_heading + "</h1><h3><a id='" + item.ID + "' class='projectLink' href='#'>" + item.Title + "</a></h3></div></li></div>");
});
},
error: function (error) {
alert(JSON.stringify(error));
}
});
I am using jQuery 1.5.2 (Sharepoint 2010 gets fuzzy if I use anything newer). I have been looking at the debugger in IE11 and the data is there, it just won't append to my div. It seems that append might be the culprit, because if I replace .append()
with .html()
I can see the last item in the $each-loop
. E.g:
$(item1).parent().html("<h3><a id='" + item.ID + "' class='projectLink' href='#'>" + item.Title + "</a></h3>");
Does anyone know why .append works in Chrome and not IE? The console doesn't give any error messages, and therefore no clues. However if I were to change "Document Mode" in IE dev tools from 8 (default) to 9 or higher, it appears to work as it should.
Any help is greatly appreciated.