Help adding a "Load More" button to video page

I'm trying to modify a script so that when you click on the "load more" button, it adds the additional youTube videos to the page, rather than replacing the current ones. My current button seems to be able to retrieve the next set, but I can't append them to what's currently there.

I'm at a loss at this point, and any help would be greatly appreciated. I don't have a publicly viewable working copy, but have attached the files.

Thank you in advance!
video.html
video.min.js
LVL 1
jej07Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jej07Author Commented:
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
    })
}

Open 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'
    })
}

Open 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);}
        });
    }

Open in new window

You can see a working example of what I have here: http://jsfiddle.net/jej07/WbDT2/embedded/result/.
0
leakim971PluritechnicianCommented:
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
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jej07Author Commented:
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>')

Open 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'
    })
}

Open in new window

0
leakim971PluritechnicianCommented:
if you want to append/add video don't remove the previous one, don't use empty()
0
jej07Author Commented:
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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.