Dynamically render items on click [JS/JQuery]

Question

I'm using a for loop to render a product-list style grid of images and names.

This is working, but what I'd like to happen next is for a user to click on one of the images and for it to link them to a new page which is dynamically populated with the details of the specific object they just clicked on.

What's the best way of doing this?

var items = [
    { name: "pencil", region: "UK", pic: "img/pencil.jpg", about: "this is a pencil"},
    { name: "magazine", region: "USA", pic: "img/magazine.jpg", about: "this is a pencil"},
    { name: "camera", region: "EU", pic: "img/camera.jpg", about: "this is a pencil"}
];


for(var i = 0; i < items.length; ++i ) {
  $("#mainPage").append("\
    <div class='col-md-4'id='workColumn'>\
      <img class='img-responsive' src='" + items[i].pic + "'>\
      <span class='info'><div class='proj-title'>" + items[i].name + "</div>" + items[i].region + "</span>\
    </div>\
  ");
}

//for appending this info onto the new page
$("#linkPage").append("\
  <div class='row'>\
    <div class='col-md-4'>\
      <h3>//dynamically populate with name of item user has clciked</h3>\
      <h5>//dynamically populate with region of item user has clciked</h5>\
      <p>//dynamically populate with about of item user has clciked</p>\
    </div>\
  </div>\
");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" id="mainPage"></div>

//when user clicks on an image, they're taken here:
<div class="container" id="linkPage"></div>

score 1 · Answer 1 · answered Mar 18 '17 at 12:23

1

You just need to wrap the <img /> element with an <a /> element

<a href='/insert-some-link'>
<img class='img-responsive' src='" + items[i].pic + "'>
</a>

answered Mar 18 '17 at 12:23

Tacud

609
5
16

score 1 · Answer 2 · answered Mar 18 '17 at 12:24

I am not getting how do you handle it for new page but if everything is in same page then this code will work. Run below code snippet.

var items = [
    { name: "pencil", region: "UK", pic: "img/pencil.jpg", about: "this is a pencil"},
    { name: "magazine", region: "USA", pic: "img/magazine.jpg", about: "this is a pencil"},
    { name: "camera", region: "EU", pic: "img/camera.jpg", about: "this is a pencil"}
];


for(var i = 0; i < items.length; ++i ) {
  $("#mainPage").append("\
    <div class='col-md-4'id='workColumn'>\
      <img class='img-responsive' onclick='imageClicked(this)' data-name='"+items[i].name+"' data-region='"+items[i].region+"'  data-about='"+items[i].about+"' src='" + items[i].pic + "'>\
      <span class='info'><div class='proj-title'>" + items[i].name + "</div>" + items[i].region + "</span>\
    </div>\
  ");
}




function imageClicked(c){
  $('#linkPage').empty();
  $("#linkPage").append("\
    <div class='row'>\
      <div class='col-md-4'>\
        <h3>"+$(c).data('name')+"</h3>\
        <h5>"+$(c).data('region')+"</h5>\
        <p>"+$(c).data('about')+"</p>\
      </div>\
    </div>\
  ");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" id="mainPage"></div>

<div class="container" id="linkPage">hi</div>

score -1 · Accepted Answer · answered Mar 18 '17 at 13:43

All you need to do is supply onclick event handler to your parent <div> and pass this as argument to it. Then when the onclick function (populateData) is called, you have the element that trigger onclick event. Then, its a simple matter of parsing data that you need. I hope it helped.

P.S. I took the liberty to remove id from div element as you can't have multiple elements with the same id. Also, I wrapped region in seperate div for simplicity.

var items = [
    { name: "pencil", region: "UK", pic: "img/pencil.jpg", about: "this is a pencil"},
    { name: "magazine", region: "USA", pic: "img/magazine.jpg", about: "this is a pencil"},
    { name: "camera", region: "EU", pic: "img/camera.jpg", about: "this is a pencil"}
];


for(var i = 0; i < items.length; ++i ) {
  $("#mainPage").append("\
    <div class='col-md-4' onclick='populateData(this)'>\
      <img class='img-responsive' src='" + items[i].pic + "'>\
      <span class='info'><div class='proj-title'>" + items[i].name + "</div>\
      <div class='proj-region'> " + items[i].region + "</div></span>\
    </div>\
  ");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//this function will be called when user clicks a item
function populateData(item){
  $(".container").html("\
    <div class='row'>\
      <div class='col-md-4'>\
        <h3>"+ $(item).find('.info .proj-title').text() +"</h3>\
        <h5>"+ $(item).find('.info .proj-region').text() +"</h5>\
        <img src=' " + $(item).find('img').attr('src') +" '\>\
        <p>"+ $(item).find('img').attr('src') +"</p>\
      </div>\
    </div>\
  ");
}
</script>
<div class="row" id="mainPage"></div>

//when user clicks on an image, they're taken here:
<div class="container" id="linkPage"></div>

Thanks so much - this works really well. Just one question - how would I dynamically update the URL at the same time? — Penrose865, Mar 18 '17 at 15:19
which URL are you talking about? Img source? Explain your use case in bit detail. — mp77, Mar 18 '17 at 17:38
Apologies - should have been more clear: The for loop is creating an image grid with a url ending in mainpage.html Once you click on one of the images, the populateData function is called to populate "linkPage", but I'd like this to be a new page with the url of the item, rather than to render within the mainpage.html — Penrose865, Mar 19 '17 at 09:34
In that case, you can refer to [this answer](http://stackoverflow.com/a/17408159/6774212), it explains the dynamic creation of new pages and then you can combine that snippet with above and you will get what you want. — mp77, Mar 19 '17 at 10:33

Dynamically render items on click [JS/JQuery]

3 Answers3