Like to get single post WP API on click and replace it inside main div newsPostsContainer - kind of like routing.
I am successfully displaying a list of posts from an external source.
If anyone can help with my code or recommend another library/client with example to do exactly this that would be great.
Heres my code.
window.onload = function(){
var newsPermalink = document.getElementById("news-Permalink");
var newsPostsContainer = document.getElementById("news-Posts-Container");
var externalDomain = "http://example.com";
var newDomain = "http://localhost.dev";
//----------------- WP API - News Content ------------------//
var newsRequest = new XMLHttpRequest();
newsRequest.open('GET', externalDomain + '/wp-json/wp/v2/posts?
filter[category_name]=news-and-events&?per_page=5&_embed=true');
function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
var title = postsData[i].title.rendered;
var newsHref = postsData[i].link;
var newsHrefOutput = newsHrefOutput.replace(externalDomain, newDomain);
if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
ourHTMLString += '<a id="news-Permalink" href="'+newsHrefOutput+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
}
ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
}
newsRequest.onload = function() {
if (newsRequest.status >= 200 && newsRequest.status < 400) {
var data = JSON.parse(newsRequest.responseText);
createNEWS(data);
} else {
console.log("News Request - We connected to the server, but it returned an error.");
}
};
newsRequest.onerror = function() {
console.log("Connection error");
};
newsRequest.send();
//All works up to here
//??
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
console.log("clicked");
newsPostsContainer.innerHTML = "";
var singlePostString = '';
if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
}
singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
singlePostString += postsData.content.rendered + '<br>';
newsPostsContainer.innerHTML = singlePostString;
});
}
};//end window onload
On this part of the code:
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
console.log("clicked");
newsPostsContainer.innerHTML = "";
var singlePostString = '';
if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
}
singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
singlePostString += postsData.content.rendered + '<br>';
newsPostsContainer.innerHTML = singlePostString;
});
}
What would postsData be referencing to? I'd say it's failing here because postsData would be null and it would cause an undefined error.
If you want it to work, then you'll have to create a new variable to assign the data to when you run the createNEWS() function and then call that variable on the onClick of the permalink.
I.e
var globalPostData = "";
....
function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
var title = postsData[i].title.rendered;
var newsHref = postsData[i].link;
var newsHrefOutput = newsHref.replace(externalDomain, newDomain);
if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
}
ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
//Assign your data here
globalPostData = ourHTMLString;
}
...
//Reference your new variable on click
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
console.log("clicked");
newsPostsContainer.innerHTML = "";
var singlePostString = '';
if(globalPostData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
}
singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
singlePostString += globalPostData.content.rendered + '<br>';
newsPostsContainer.innerHTML = singlePostString;
});
}
Related
The Idea is to load only 50 items at a time to help with loading the page.
I have the code that will load the first 50 items form a json file.
I then want to load the next 50 when the user scrolls halfway down the page and keep going tell there is no more items to load.
This is what I have so far.
//This loads the first 50 items from external Json file. No issue here
$(window).load(function(){
var picarioAPI = "https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=0&take=50";
var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
$.getJSON(picarioAPI, function (json) {
var text = "";
for (i in json.values)
for (var j in json.values[i].labels) {
if (json.values[i].labels[j].name == "Show") {
// This is for a popup function.
var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
document.getElementById("design1").innerHTML = text;
}
};
});
});
I then load a scroll function to load the next 50 items and so on. I use the number to add 50 items to the end of the Json file API
//This is the part I'm not getting correct.
var number = 0;
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
number++;
// I use the number to dynamically load the next 50 items as the user scrolls.
var total = number + 50;
var picarioAPI = 'https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip='+total+'&take=50';
var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
$.getJSON(picarioAPI, function (json) {
var text = "";
for (i in json.values)
for (var j in json.values[i].labels) {
if (json.values[i].labels[j].name == "Show") {
//this is for a popup function
var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
document.getElementById("design1").innerHTML += document.getElementById("design1").innerHTML + text;
}
};
});
};
});
The issue is when I scroll halfway down the page it will start to load all 2000 items instead of just the next 50.
Any help would be great.
unless you stop scrolling EXACTLY when you've reached half way, you'll be getting multiple triggers of scroll - you need to introduce some flag to indicate that a request is in flight, and ignore the scroll event until the new data is loaded
var inflight = false;
var number = 0;
$(window).scroll(function() {
if (!inflight && $(window).scrollTop() > $('body').height() / 2) {
inflight = true;
number++;
// I use the number to dynamically load the next 50 items as the user scrolls.
var total = number + 50;
var picarioAPI = 'https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=' + total + '&take=50';
var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
$.getJSON(picarioAPI, function(json) {
var text = "";
for (i in json.values) {
for (var j in json.values[i].labels) {
if (json.values[i].labels[j].name == "Show") {
//this is for a popup function
var b = 'data-options={"src": "#hidden-content-3' + json.values[i].id + '", "touch": false}';
text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3' + json.values[i].id + '"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="' + json.values[i].height + '"data-width="' + json.values[i].width + '"data-url="' + json.values[i].displayUrl + '"data-full="' + json.values[i].renderUrl + '"data-name="' + json.values[i].name + '"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
document.getElementById("design1").innerHTML += document.getElementById("design1").innerHTML + text;
}
}
}
inflight = false;
});
}
});
I have code below that renders a few products on a page. Each of these products shares the same data attribute "data-item-upc". There is also a button that is rendered for each product on the page (6 total buttons to be exact). They all share this same data-item-upc data attribute.
I am able to successfully grab the value of the data atrribute and match it to the item with the same UPC value in the second database. But for some reason only the first button works and shows the modal. Not sure whats going on. Hoping someone can help me out would really appreciate it.
//declare variable to store JSON data
var product_data = {};
var nutritional_data = {};
$(document).ready(function() {
'use strict';
//grab product data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(data){
//assign JSON to product data variable
product_data = JSON.parse(JSON.stringify(data).replace(/"\s+|\s+"/g,'"'));
//grab nutrional data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(json){
//assign JSON to product data variable
nutritional_data = JSON.parse(JSON.stringify(json).replace(/"\s+|\s+"/g,'"'));
//declare divs to store data
var productDivOne = '';
var productDivTwo = '';
$.each(product_data, function(i, item) {
//convert JSON strings to uppercase for comparison
var brandLetter = item.itemBrandLetter.toUpperCase();
var foodService = item.itemDeli.toUpperCase();
var brandItem = item.itemName;
if (brandLetter == "LB" && foodService == "N") {
if (brandItem.indexOf("Panettone") >= 0) {
productDivOne +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
if (brandItem.indexOf("Egg") >= 0) {
productDivTwo +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
}
});
//show nutritional information on button click
$("body").on('click', ".showNutritionFacts", function(event){
//get passed data from other function
var clickedItemUPC = $(this).data('item-upc');
alert(clickedItemUPC);
//declare variables to store data
var servingSize = '';
var servingPerContainer = '';
var calories = '';
var caloriesFat = '';
var totalFatGrams = '';
var totalFatPercentage = '';
var saturatedFatGrams = '';
var saturatedFatPercentage = '';
var transFatGrams = '';
var polyunsaturatedFatGrams = '';
var monounsaturatedFatGrams = '';
var cholesterolGrams = '';
var cholesterolPercentage = '';
var sodiumGrams = '';
var sodiumPercentage = '';
var totalCarbohydrateGrams = '';
var totalCarbohydratePercentage = '';
var dietaryFiberGrams = '';
var dietaryFiberPercentage = '';
var sugarGrams = '';
var sugarGramsAdded = '';
var sugarGramsAddedPercentage = '';
var proteinGrams = '';
var vitaminAPercentage = '';
var vitaminCGrams = '';
var vitaminCPercentage = '';
var vitaminDGrams = '';
var vitaminDPercentage = '';
var calciumGrams = '';
var calciumPercentage = '';
var ironGrams = '';
var ironPercentage = '';
var potassiumGrams = '';
var potassiumPercentage = '';
var thiamineGrams = '';
var thiaminePercentage = '';
var riboflavinGrams = '';
var riboflavinPercentage = '';
var niacinGrams = '';
var niacinPercentage = '';
var ingredients = '';
//comparison UPC variable
var compareNutUPC;
$.each(nutritional_data, function (i, item) {
//assign comparison UPC to itemNum
compareNutUPC = item.itemNum;
//compare product UPC in nutritional and product data
if (clickedItemUPC == compareNutUPC) {
servingSize += item.servingSize;
servingPerContainer += item.itemServings;
calories += item.itemCalories;
caloriesFat += item.itemCaloriesFromFat;
transFatGrams += item.itemTransFat + 'g';
polyunsaturatedFatGrams += item.itemPolyUnsatFat + 'g';
monounsaturatedFatGrams += item.itemMonoUnsatFat + 'g';
saturatedFatGrams += item.itemSaturFat + 'g';
saturatedFatPercentage += item.itemSaturFatPerc + '%';
totalFatGrams += item.itemTotalFat + 'g';
totalFatPercentage += item.itemTotalFatPerc + '%';
cholesterolGrams += item.itemCholesterol + 'mg';
cholesterolPercentage += item.itemCholesterolPerc + '%';
sodiumGrams += item.itemSodium + 'mg';
sodiumPercentage += item.itemSodiumPerc + '%';
totalCarbohydrateGrams += item.itemTotalCarb + 'g';
totalCarbohydratePercentage += item.itemTotalCarbPerc + '%';
sugarGrams += item.itemSugars + 'g';
sugarGramsAdded += item.itemSugarsAdded + 'g';
sugarGramsAddedPercentage += item.itemSugarsAddedPerc + '%';
dietaryFiberGrams += item.itemDietFiber + 'g';
dietaryFiberPercentage += item.itemDietFiberPerc + '%';
proteinGrams += item.itemProtein + 'g';
vitaminAPercentage += item.itemVitaminA + '%';
vitaminCPercentage += item.itemVitaminC + '%';
vitaminDGrams += item.itemVitaminDMeasure;
vitaminDPercentage += item.itemVitaminD + '%';
calciumGrams += item.itemCalciumMeasure;
calciumPercentage += item.itemCalcium + '%';
ironGrams += item.itemIronMeasure;
ironPercentage += item.itemIron + '%';
thiaminePercentage += item.itemThiamin + '%';
riboflavinPercentage += item.itemRiboflavin + '%';
niacinPercentage += item.itemNiacin + '%';
potassiumGrams += item.itemPotassium;
potassiumPercentage += item.itemPotassiumPerc + '%';
ingredients += item.itemIngredients;
}
});
$(".servingSize").html(servingSize.replace(/\s+(?=g)/g, '').toLowerCase());
$(".servingPerContainer").html(servingPerContainer);
$(".calories").html(calories);
$(".caloriesFat").html(caloriesFat);
$(".transFatGrams").html(transFatGrams);
$(".polyunsaturatedFatGrams").html(polyunsaturatedFatGrams);
$(".monounsaturatedFatGrams").html(monounsaturatedFatGrams);
$(".saturatedFatGrams").html(saturatedFatGrams);
$(".saturatedFatPercentage").html(saturatedFatPercentage);
$(".totalFatGrams").html(totalFatGrams);
$(".totalFatPercentage").html(totalFatPercentage);
$(".cholesterolGrams").html(cholesterolGrams);
$(".cholesterolPercentage").html(cholesterolPercentage);
$(".sodiumGrams").html(sodiumGrams);
$(".sodiumPercentage").html(sodiumPercentage);
$(".totalCarbohydrateGrams").html(totalCarbohydrateGrams);
$(".totalCarbohydratePercentage").html(totalCarbohydratePercentage);
$(".sugarGrams").html(sugarGrams);
$(".sugarGramsAdded").html(sugarGramsAdded);
$(".sugarGramsAddedPercentage").html(sugarGramsAddedPercentage);
$(".dietaryFiberGrams").html(dietaryFiberGrams);
$(".dietaryFiberPercentage").html(dietaryFiberPercentage);
$(".proteinGrams").html(proteinGrams);
$(".vitaminAPercentage").html(vitaminAPercentage);
$(".vitaminCPercentage").html(vitaminCPercentage);
$(".vitaminDGrams").html(vitaminDGrams);
$(".vitaminDPercentage").html(vitaminDPercentage);
$(".calciumGrams").html(calciumGrams);
$(".calciumPercentage").html(calciumPercentage);
$(".ironGrams").html(ironGrams);
$(".ironPercentage").html(ironPercentage);
$(".thiaminePercentage").html(thiaminePercentage);
$(".riboflavinPercentage").html(riboflavinPercentage);
$(".niacinPercentage").html(niacinPercentage);
$(".potassiumGrams").html(potassiumGrams);
$(".potassiumPercentage").html(potassiumPercentage);
$(".ingredients").html(ingredients.toUpperCase());
//determine which modal to show
if ($('.vitaminDGrams:contains("mcg")').length > 0 && $('.calciumGrams:contains("mg")').length > 0 && $('.ironGrams:contains("mg")').length > 0) {
$('.nutritionPopupAlternate').modal('show');
} else if (servingSize == 0) {
$('.nutritionPopupNoInfo').modal('show');
} else {
$('.nutritionPopupStandard').modal('show');
}
});
//append to appropriate div
$('#productDivOne').html(productDivOne);
$('#productDivTwo').html(productDivTwo);
}
});
//end of prod data
}
});
//end of nut data
});
Thanks to Sandy i was able to minify my code and find the issue. Turns out it was looking for something that was added later from a different source code that I took, after editing the DIV it works perfectly now.
I am trying to render a catalog from an XML document and everything works, although when trying to show a default image if there is no image present in the XML node, it disables the parent node therefore forcing it not to show any of it and it reads me an error in my console saying:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of
undefined
Which is pointing to this part of the code:
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0)
{
So my question is where in my code below is my error causing it to not load the XML node?
PS: If anybody needs more of my code please let me know, and I would be happy to post it.
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
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-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
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-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
Here is the whole JavaScript code:
var page = 1, perPage = 12, 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);
var xmlContent = '<div class="row">';
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
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-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
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-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
xmlContent += "</div>";
content.innerHTML = xmlContent;
var paginationContent = '<nav><ul class="pagination">';
if (page > 1) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>'
}
var prevPosition = page - 3;
var nextPosition = page + 3;
for (var i = 1; i <= maxPages; i++) {
if (i != page) {
if (i >= prevPosition && i <= nextPosition) {
var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i;
var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i;
paginationContent += "<li>";
paginationContent += '' + linkText + '';
paginationContent += "</li>";
}
} else {
paginationContent += "<li class='active'>";
paginationContent += '' + i + '';
paginationContent += "</li>";
}
}
var next = page + 1;
if (next <= maxPages) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
}
paginationContent += '</ul></nav>';
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", xmlUrl, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName(xmlNode);
records = Array.prototype.slice.call(records).sort(function () {
return Math.random() > 0.5 ? 1 : -1
});
paganation(1);
If we imagine that records was of length 18, then for the second page, you would have:
fromItem - 12
nextMaxItem - 24
You are iterating i from fromItem to nextMaxItem, but as soon as you go past i = 18, you've gone past the end of records. You need to make sure that doesn't happen. You need to ensure that you don't iterate past the end of your array:
var max = Math.min(nextMaxItem, records.length);
for (var i = fromItem; i < max; i++) {
....
}
This is the full javascript for read more link of post summary-
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding-right:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
In var summary i tried to add a link like <a href='http://xyz.com'>read more</a> in this way
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '<a href='http://xyz.com'>' + '<span>' + readmore + '</span>' + '</a>' + '</div>';
But this is not working. I know little bit javascript. Please help me.
Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David
Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.