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>

Tacud · Accepted Answer · 2017-03-18 12:23:50Z

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, 2017 at 12:23

Tacud

6395 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kanan · Accepted Answer · 2017-03-18 12:24:35Z

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>

mp77 · Accepted Answer · 2017-03-18 13:43:20Z

-1

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>

answered Mar 18, 2017 at 13:43

mp77

4283 silver badges7 bronze badges

4 Comments

Penrose865 Over a year ago

Thanks so much - this works really well. Just one question - how would I dynamically update the URL at the same time?

mp77 Over a year ago

which URL are you talking about? Img source? Explain your use case in bit detail.

Penrose865 Over a year ago

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

mp77 Over a year ago

In that case, you can refer to this answer, it explains the dynamic creation of new pages and then you can combine that snippet with above and you will get what you want.

Collectives™ on Stack Overflow

Dynamically render items on click [JS/JQuery]

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related