Tom Tom - 1 month ago 5
jQuery Question

Trying to figure out how to add a link to access content in DIV created with JS

I am working with a JSON file in which I am pulling in data for a products page. I have a sidebar that has links to each product category (example tomatoes, olive oil, etc). I am using a click function for each link in the sidebar so that when they are clicked it shows the appropriate products in a DIV. My code works fine but I need assistance figuring out how to link to the generated DIV content from another page. In other words, it doesnt create a unique URL since its just replacing the DIV content.



<script>
$(document).ready(function() {

'use strict';

var url = 'path to json';

$.getJSON(url, function(json) {



// initially display all products
var categoryImage = '';
var location;

$.each(json, function (i, item) {

categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' +
'<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
});

$('#imagesCategoryProducts').html(categoryImage);



// tomatoes display data on click
$("#tomatoes").click(function(event){
var categoryImage = '';
var location;

$.each(json, function (i, item) {


if (item.itemCommodity == "1120") {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' +
'<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
}
});
$('#imagesCategoryProducts').html(categoryImage);
});



// olive oil display data on click
$("#oliveoil").click(function(event){
var categoryImage = '';
var location;

$.each(json, function (i, item) {
switch(item._id)


if (item.itemCommodity == "2120") {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' +
'<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
}
});
$('#imagesCategoryProducts').html(categoryImage);
});
});
})();
</script>

<script>
function openNav() {
document.getElementById("productsSideBar").style.width = "250px";
}

function closeNav() {
document.getElementById("productsSideBar").style.width = "0";
}
</script>

/* Products Sidebar */

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}

.sidenav .closebtn {
z-index: 9999;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

/* Products Sidebar Expand Button */

.expandSidebar {
font-size:33px;
cursor:pointer;
font-family: Quaddratt;
}

.backToSidebar {
font-size:33px;
cursor:pointer;
font-family: Quaddratt;
color: #000;
}

.backToSiderbar a {
color: #000;
}

.backToSiderbar a:hover {
color: #333333;
}


/* Products Category Div Styles */

#imagesCategoryProducts h3 {
text-align: center;
font-size: 18px;
text-transform: uppercase;
height: 40px;
}

#imagesCategoryProducts a {
color: #000;
}

#imagesCategoryProducts a:hover {
color: #333333;
}

/* Products Category Image Styles */

.productImagesCategory {
width: 700px;
margin-bottom: -20px;
padding: 40px;
height: 350px !important;
object-fit: contain;
}

<section>
<div id="productsSideBar" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#" id="tomatoes">Tomatoes</a>
<a href="#" id="sauce">Sauce</a>
<a href="#" id="oliveoil">Olive Oil</a>
<a href="#" id="redwinevinegar">Red Wine Vinegar</a>
<a href="#" id="balsamicvinegar">Balsamic Vinegar</a>
<a href="#" id="peppers">Peppers</a>
<a href="#" id="artichokes">Artichokes</a>
<a href="#" id="olives">Olives</a>
<a href="#" id="beans">Beans</a>
<a href="#" id="caperspignolinuts">Capers & Pignoli Nuts</a>
<a href="#" id="specialties">Specialties</a>
<a href="#" id="spices">Spices</a>
<a href="#" id="fish">Fish</a>
<a href="#" id="brothstockssoups">Broth, Stocks & Soups</a>
<a href="#" id="breadcrumbs">Breadcrumbs</a>
<a href="#" id="gratedcheese">Grated Cheese</a>
</div>
</section>

<!-- Products Products Row -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br>
<span class="expandSidebar" onclick="openNav()">&#9776; Filter by Category</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="imagesCategoryProducts"></div>
</div>
</div>
</div>
</section>
<!-- Products Row End -->




Answer

I have modified your code to store that json into data variable as soon as you perform getJSON.

The click handler for #tomatoes now uses the data object which is now available vs in the posted code.

https://plnkr.co/edit/Sl1vFH6W40PVf7ooleU7?p=preview

You can do the apply the same logic for other caregories.