Avatar of jej07
jej07 asked on

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
JavaScriptAJAXjQuery

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
jej07

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/.
leakim971

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
ASKER
jej07

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

Your help has saved me hundreds of hours of internet surfing.
fblack61
SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
jej07

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?
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.