up vote 1 down vote favorite

This is somewhat pseudo code so EDIT away. I want to make it when the user clicks on a thumb inside #placeholder DIV thumb2 is then displayed inside #imageLoad DIV. NOTE: Thumb and thumb2 are JSON items. A lot of people are saying that this can't be done with getJSON because it's an asynchronous request. If that is the case, then how can I change my script to support the request? If I am going the wrong way, please provide alternate solutions.

$.getJSON('jsonFile.json', function (data) {
    var image1 = "<ul>";
    for (var i in data.items) {
        image1 += "<li><img src=images/items/" + data.items[i].thumb + ".jpg></li>";
    }
    image1 += "</ul>";
    document.getElementById("placeholder").innerHTML = output;

    var image2 = "<img src=images/items/" + data.items[i].thumb2 + ".jpg>";
    $('li').click(function () {
        document.getElementById("imageLoad").innerHTML = output;
    });
});

Here is the external JSON file below (jsonFile.json):

{"items":[
    {
        "id":"1",
        "thumb":"01_sm",
        "thumb2":"01_md"
    },
    {
        "id":"2",
        "thumb":"02_sm",
        "thumb2":"02_md"
    }
]}
share|improve this question
90% accept rate
Did you try the code you posted? At first glance it looks fine, except for the for..in loop that should be a regular for on data.items, and output should be image1 first, then image2. – bfavaretto 16 hours ago
possible duplicate of use JSON variable in jQuery dynamically – Alexander 16 hours ago
possible violation of KISS paradigm :P – Andrea Ligios 15 hours ago
Yes, I have this script posted. It prints the Unordered List fine, but the mouseOnclick function doesn't work with those variable. The mouseOnClick only works if I swap the JSON variables for actual elements. – user1644123 12 hours ago
feedback

2 Answers

up vote 0 down vote accepted

You can try something like the following:

$.getJSON('jsonFile.json', function(data)
{
  $("#placeholder").html("");
  var ul = $('<ul></ul>');
  $('#placeholder').append(ul);
  var load = $("#imageLoad");

  for(var i in data.items)
  {
    var li = $('<li></li>');
    ul.append(li);
    var img = $('<img>');
    img.attr("src", "images/items/" + data.items[i].thumb + ".jpg");
    img.click((function(x)
    {
      return function()
      {
        load.html("<img src=images/items/" + data.items[x].thumb2 + ".jpg>");
      }
    })(i));
    li.append(img);
  }
});

Main difference is that click-handler is assigned inside the loop, so every handler receives a closure with appropriate reference to thumb2.

share|improve this answer
I think you mean img.click(function(x) { return function(e) { load.html(...) } }(i)) – teddybeard 15 hours ago
@teddybeard You're wrong. You need to pass current i as parameter of executed function, in order to catch it inside the closure. My code is tested. – Stan 15 hours ago
Hmm it seems like this actually might work, however right now I am experiencing a bug.. The last list item printed (there are 3 in the JSON file) does not load its thumb2?? The first 2 li's do. Anythoughts? It seems to loose the variable for the 3rd item click. – user1644123 10 hours ago
@user1644123 That can be a typo in data. Add console.log just to make sure the handler is invoked and has appropriate URL. – Stan 10 hours ago
where do I add console.log in the script? Before or after FOR?? Thanks. – user1644123 8 hours ago
show 1 more comment
feedback
up vote 0 down vote

I think this could do the trick:

var $placeholder = $('#placeholder'),
    $imageLoad = $('#imageLoad');

$.getJSON('jsonFile.json', function(data) {
    var html = '<ul>';

    $.each(data.items, function(i,item){
        html += '<li><img src=images/items/' + item.thumb + '.jpg></li>';
    });        
    html += '</ul>';

    $placeholder.html(html);
});

$placeholder.on('click','li',function(){    
    $imageLoad.html($(this).html());
});

I can't understand the use of output since you are not declaring it in anyway. The eventhandler for the click event will trigger on all current and future li elements of the $placeholder which contains the DOM object with an id of placeholder.

share|improve this answer
I tested this and it is now not displaying anything inside #placeholder DIV – user1644123 8 hours ago
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.