Help adding a "Load More" button to video page

That's funny, your posts have been what's helped me get to this point. Thank you by the way. I've been looking at this line $('#videos2').append(html.join(''));, thinking that's the answer to my problem, but I can't figure out why my version doesn't work.

The specific lines of code I'm comparing to yours.

function getUploads() {

    showLoader();
    if (null != ytSearchQuery || ytSearchQuery != "" || ytSearchQuery != "undefined") {
        ytSQ = "&q=" + ytSearchQuery
		} else {ytSQ = ""}
			
    var apiUploadURL = "http://gdata.youtube.com/feeds/api/users/" + youvidUser + "/uploads/?v=2"+ytSQ+"&alt=jsonc&max-results=" + maxVideoResults + "&start-index="+currIndex;

    $.ajax({
        url: apiUploadURL,
        type: "GET",
        async: true,
        cache: true,
        dataType: 'jsonp',
        success: function (response) {
            showUploads(response)
        },
        error: function (html) {
            alert(html)
        },
        beforeSend: setHeader
    })
}

Select allOpen in new window

function showUploads(response) {

    $('#youvid-video-list-div').empty();
	$('#youvid-pager').empty();		
    var uploadsArray = response.data.items;

    var totalVideoResults = response.data.totalItems; 
	
	$("#youvid-showing").text('Showing ' + response.data.startIndex + '-'+ (response.data.startIndex + uploadsArray.length - 1) + ' out of ' + totalVideoResults);


        	if (totalVideoResults > maxVideoResults) {			
            createNextButton('uploadSection');
			}
	
    for (var i = 0; i < uploadsArray.length; i++) {

        videoId = uploadsArray[i].id;
        videoTitle = uploadsArray[i].title;
        videoViewCount = uploadsArray[i].viewCount;
        videoDuration = uploadsArray[i].duration;
        videoUploaded = uploadsArray[i].uploaded;
        videoThumbnail = uploadsArray[i].thumbnail.hqDefault;
        videoThumbnail = videoThumbnail.replace("hqdefault", "mqdefault");
        if (i % youvidColumns != 0) $('#youvid-video-list-div').append('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>');
        else $('#youvid-video-list-div').append('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%; clear:both;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>')
    }	


    $('.youvid-video-tnail-box').click(function () {
        if (showVideoNewPage) {
            showVideoPage(this.id)
        } else {
            $('#youvid-video').attr('src', 'http://www.youtube.com/embed/' + this.id);
            $('#youvid-video').show();
            $('html,body').animate({
                scrollTop: $("#youvid-header").offset().top
            }, 'slow')
        }
    });
    var youvidTnailWidth = $('.youvid-video-tnail').css('width');
    youvidTnailWidth = youvidTnailWidth.substring(0, youvidTnailWidth.indexOf("px"));
    var youvidTnailHeight = youvidTnailWidth / youtubeMqdefaultAspectRatio;
    $('div.youvid-video-tnail').css({
        'height': youvidTnailHeight + 'px'
    })
}

Select allOpen in new window

    function createNextButton(getNextButton, videoListId) {
        $('<input type="button" value="Load More" id="next">').appendTo('#youvid-pager');
		
        $('#next').click(function(e) {
            e.preventDefault();
            currIndex += maxVideoResults;
			if (getNextButton == "uploadSection") {getUploads();}
			else if (getNextButton == "playlistSection") {getPlaylistVideos(videoListId);}
        });
    }

Select allOpen in new window

You can see a working example of what I have here: http://jsfiddle.net/jej07/WbDT2/embedded/result/.

I've been looking at this line $('#videos2').append(html.join(''));, thinking that's the answer to my problem, but I can't figure out why my version doesn't work.

Yes it's but I don't see this line in your code...

and $("#foo")empty() clear remove all content of element with ID = foo

Not per se, but I was thinking what I had would work in a similar fashion.

Within the showUploads function, the containing div is being cleared in this line: $('#youvid-video-list-div').empty();. Which is similar to your line $("#foo")empty().

In the same function, html is being appended to the containing div ( simular to $('#videos2').append(html.join('')); ) with the following lines:

       if (i % youvidColumns != 0) $('#youvid-video-list-div').append('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>');
        else $('#youvid-video-list-div').append('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%; clear:both;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>')

Select allOpen in new window

I did try modifying the showUploads function as follows, but it had the same affect. *Lines 2 and 29 are new, lines 25 and 26 were modified using testvid.push.

function showUploads(response) {
var testvid =[]; // NEW LINE
    $('#youvid-video-list-div').empty();
	$('#youvid-pager').empty();		
    var uploadsArray = response.data.items;

    var totalVideoResults = response.data.totalItems; 
	
	$("#youvid-showing").text('Showing ' + response.data.startIndex + '-'+ (response.data.startIndex + uploadsArray.length - 1) + ' out of ' + totalVideoResults);


        	if (totalVideoResults > maxVideoResults) {			
            createNextButton('uploadSection');
			}
	
    for (var i = 0; i < uploadsArray.length; i++) {

        videoId = uploadsArray[i].id;
        videoTitle = uploadsArray[i].title;
        videoViewCount = uploadsArray[i].viewCount;
        videoDuration = uploadsArray[i].duration;
        videoUploaded = uploadsArray[i].uploaded;
        videoThumbnail = uploadsArray[i].thumbnail.hqDefault;
        videoThumbnail = videoThumbnail.replace("hqdefault", "mqdefault");
        if (i % youvidColumns != 0) testvid.push('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>');
        else testvid.push('<div class="youvid-video-tnail-box" style="width:' + ((100 / youvidColumns) - 4) + '%; clear:both;" id="' + videoId + '"><div class="youvid-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'' + videoThumbnail + '\', sizingMethod=\'scale\'); background-image:url(\'' + videoThumbnail + '\')"><div class="youvid-duration">' + secondsToTime(videoDuration) + '</div></div><span class="youvid-video-list-title">' + videoTitle + '</span><br/><span class="youvid-video-list-views">' + getReadableNumber(videoViewCount) + ' views | ' + getDateDiff(videoUploaded) + ' ago</span></div>')

    }	
         $('#youvid-video-list-div').append(testvid.join('')); // NEW LINE

    $('.youvid-video-tnail-box').click(function () {
        if (showVideoNewPage) {
            showVideoPage(this.id)
        } else {
            $('#youvid-video').attr('src', 'http://www.youtube.com/embed/' + this.id);
            $('#youvid-video').show();
            $('html,body').animate({
                scrollTop: $("#youvid-header").offset().top
            }, 'slow')
        }
    });
    var youvidTnailWidth = $('.youvid-video-tnail').css('width');
    youvidTnailWidth = youvidTnailWidth.substring(0, youvidTnailWidth.indexOf("px"));
    var youvidTnailHeight = youvidTnailWidth / youtubeMqdefaultAspectRatio;
    $('div.youvid-video-tnail').css({
        'height': youvidTnailHeight + 'px'
    })
}

Select allOpen in new window

I tried that too and it didn't work, until I realized empty was also being used in the showLoader function. Eureka - thanks! I commented out both lines in this new fiddle: http://jsfiddle.net/jej07/WbDT2/1/.

The load more now works, but has created another problem... the "loading.gif" is no longer cleared because of the change to the showLoader function. Any thoughts on how I can fix that?