Trying to reload a function on click of an image - json

Question

I have a JSON file and I am trying to reload a function inside my code but I cant seem to get it to work. After you click an item from the page, it shows the items contents etc. At the bottom I have a similar product for each item. What i want to do is reload the page on click of the similar product image and show the correct item on the page but I cant seem to make it work. Any help or suggestions is very much appreciated thanks!
I included a working example below please visit the codepen link:
http://codepen.io/tcarp/pen/aBPLqX
'use strict';
$.ajax({
dataType: "jsonp",
url: '',
success: function(json){
//check for window hash and display product category
var categoryHash = window.location.hash;
switch(categoryHash)
{
case '#tomatoes':
displayTomatoes();
break;
default:
displayAll();
break;
}
//display product category based on click
$("#tomatoes").click(function(event){
displayTomatoes();
event.preventDefault();
window.location.hash = '#tomatoes';
});
$("#displayall").click(function(event){
displayAll();
});
//display all products function
function displayAll() {
var categoryImage = '';
$.each(json, function (i, item) {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '' + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '' + '</div>';
});
$('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
//show individual product function on click
$(".showProduct").click(function(event){
//hide all current products
$('#productCategories').hide();
//get passed data from other function
var clickedItemName = '<h1>' + $(this).data('itemname') + '</h1>';
var clickedItemUPC = $(this).data('itemupc');
var clickedItemOZ = $(this).data('itemoz')
var clickedItemDescription = '<p>' + $(this).data('itemdescription') + '</p>';
var clickedItemImage = '<img class="img-responsive img-rounded center-block" src="' + $(this).data('itemimage') + '">';
var clickedItemGluten = $(this).data('itemgluten');
var clickedItemBPA = $(this).data('itembpa');
var clickedItemGMO = $(this).data('itemgmo');
var clickedItemLowSodium = $(this).data('itemlowsodium');
var clickedItemOrganic = $(this).data('itemorganic');
var clickedItemPageURL = $(this).data('itempageurl');
//check if clicked data equals correct item
$.each(json, function (i, item) {
if (item.itemName === clickedItemName) {
clickedItemName
}
if (item.itemFullUPC === clickedItemUPC) {
clickedItemUPC
}
if (item.itemPackSize === clickedItemOZ) {
clickedItemOZ
}
if (item.itemDescription === clickedItemDescription) {
clickedItemDescription
}
if (item.imageURL === clickedItemImage) {
clickedItemImage
}
if (item.itemGlutenFree === clickedItemGluten) {
clickedItemGluten
}
if (item.itemBPAFree === clickedItemBPA) {
clickedItemBPA
}
if (item.itemGMOFree === clickedItemGMO) {
clickedItemGMO
}
if (item.itemOrganic === clickedItemOrganic) {
clickedItemOrganic
}
if (item.itemLowSodium === clickedItemLowSodium) {
clickedItemLowSodium
}
//assign window hash to each product
if (item.itemFullUPC === clickedItemPageURL) {
event.preventDefault();
clickedItemPageURL = clickedItemPageURL.replace(/\s/g, '');
window.location.hash = clickedItemPageURL;
}
});
//remove extra characters from UPC
var originalUPC = clickedItemUPC;
var strippedUPC = '<h2>' + originalUPC.slice(1, -1); + '</h2>';
//remove characters after slash from Pack Size
var originalPackSize = clickedItemOZ;
var strippedPackSize = '<h2>' + clickedItemOZ.substring(clickedItemOZ.lastIndexOf("/") + 1); + '</h2>';
//show individual product information
$('#productSocialShare').show();
$('#individualProduct').show();
$('#relatedProducts').show();
//append product information to appropriate DIV
$('#productTitle').html(clickedItemName);
$('#productUPC').html(strippedUPC);
$('#productOZ').html(strippedPackSize);
$('#productDescription').html(clickedItemDescription);
$('#productImage').html(clickedItemImage);
//check if gluten free is true and show image
if (clickedItemGluten == "Y") {
clickedItemGluten = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/gluten_free_test.jpg">';
$('#productGlutenFree').html(clickedItemGluten);
$('#productGlutenFree').show();
} else {
$('#productGlutenFree').hide();
}
//check if bpa free is true and show image
if (clickedItemBPA == "Y") {
clickedItemBPA = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/bpa_free_test.jpg">';
$('#productBPAFree').html(clickedItemBPA);
$('#productBPAFree').show();
} else {
$('#productBPAFree').hide();
}
//check if gmo free is true and show image
if (clickedItemGMO == "Y") {
clickedItemGMO = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/gmo_test.jpg">';
$('#productGMOFree').html(clickedItemGMO);
$('#productGMOFree').show();
} else {
$('#productGMOFree').hide();
}
//check if organic is true and show image
if (clickedItemOrganic == "Y") {
clickedItemOrganic = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/organic_test.jpg">';
$('#productOrganic').html(clickedItemOrganic);
$('#productOrganic').show();
} else {
$('#productOrganic').hide();
}
//check if low sodium is true and show image
if (clickedItemLowSodium == "Y") {
clickedItemLowSodium = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/low_sodium_test.jpg">';
$('#productLowSodium').html(clickedItemLowSodium);
$('#productLowSodium').show();
} else {
$('#productLowSodium').hide();
}
//show random recipe for each item
var url = 'http://www.cento.com/DEV/recipes.json';
$.getJSON(url, function(json) {
var randomRecipe = json[Math.floor(Math.random() * json.length)];
randomRecipe = '<div>' + '' + '<img class="img-responsive img-hover" src="' + randomRecipe.recipeImageCategoryURL + '">' + '' + '' + '<h3 class="similarProductSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>';
$('#featuredRecipe').append(randomRecipe);
});
//show similar product
var categoryItems = [];
$.each(json, function(i, item){
if(item.itemCommodity == '1120' && item.itemBrandLetter == "C") categoryItems.push(item);
if(item.itemCommodity == '2120' && item.itemBrandLetter == "C") categoryItems.push(item);
});
var similarProduct= '';
$.each(json, function(i,item){
similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarProduct += '<div>' + '' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '' + '</div>';
});
$('#productSimilar').append(similarProduct);
});
closeNav();
}
}
});

Answer 1

Got this to work. I was able to add the function to the body on click method and pass in all the data from the href. Works!