Question

// Calling the video function with JSON

$.getJSON("videos.php", function(data){
// first check if there is a member available to display,
//if not then show error message
    if(data == '') { 
        $('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
    } 
    // if there is a member, then loop through each data available
    else {
          $.each(data, function(i,name){
            content = '<div class="left"><img src="' + name.pic + '"/>';
            content += '<p>' + name.name + '</p>';
            content += '<a href="' + name.link + '" target="_blank">Video link</a>';
            content += '</div><br/><hr>';
            $("#tabs-4").html(content);
        });
    }
});​

The problem is that it only gives me one result instead of list of results from the array but if I appendTo(content) .. it adds the full list of results under the current which is not what I want because I need to refresh that content with updated data.

Any ideas to what I’m doing wrong?

Answer 1

Empty the element before filling it:

$('#tabs-4').empty();
$.each(data, function(i,name){
  var content =
    '<div class="left"><img src="' + name.pic + '"/>' +
    '<p>' + name.name + '</p>' +
    '<a href="' + name.link + '" target="_blank">Video link</a>' +
    '</div><br/><hr>';
  $("#tabs-4").append(content);
});

Or put all the elements in the string before putting it in the element:

var content = '';
$.each(data, function(i,name){
  content +=
    '<div class="left"><img src="' + name.pic + '"/>' +
    '<p>' + name.name + '</p>' +
    '<a href="' + name.link + '" target="_blank">Video link</a>' +
    '</div><br/><hr>';
});
$("#tabs-4").html(content);