JavaScript Only Loading 10 Xml Nodes
I have an XML script that is listing all of my products and I have a Javascript in my html page to pull the content from the XML and paginate it. Although it only allows the specif
Solution 1:
JS Fiddle Demo
You have a loop that adds every product untilnextMaxItem
. Which is equal to perPage * page
. So when you call it, you get 10
. But the script gives you an error, because you don't have 10, but 7. It cannot find the other ones. To avoid that error, check if it exists in the for
loop:
if(records[i] === undefined) break;
Edit
Some other small changes had to be made for it to work with any product number. All the relevant lines modified have a comment with an arrow:
var page = 1, perPage = 10, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;
function paganation(page)
{
var nextMaxItem = perPage * page,
fromItem = (page - 1) * perPage,
maxPages = Math.ceil( records.length / perPage ), // <-----------
xmlContent = '<div class="row">';
for (var i = fromItem; i < nextMaxItem; i++) {
if(records[i] === undefined) break; // <-----------
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail">'
+ '<img src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<a href="' + records[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue + '">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '</a>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</div></div></article>";
}
xmlContent += "</div>";
content.innerHTML = xmlContent;
var paginationContent = "";
if (page > 1) {
paginationContent += ' <a href="javascript:paganation('+(page - 1)+');">Back</a> ';
} else {
paginationContent += " Back ";
}
for (var j = 1; j <= maxPages; j++) { // <----------- <= instead of <
paginationContent += ' <a href="javascript:paganation('+j+');">'+j+'</a> ';
}
var next = page + 1;
if (next <= maxPages) {
paginationContent += ' <a href="javascript:paganation('+next+');">Next</a> ';
} else {
paginationContent += " Next ";
}
pagination.innerHTML = paginationContent;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/product_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName("PRODUCT");
paganation(1);
Post a Comment for "JavaScript Only Loading 10 Xml Nodes"