CODEWITHSUNDEEP
jqueryajax
user2415116
user2415116

Reputation: 777

Load more div content with Ajax

So say I have a page with a ton of embedded videos, each with titles and descriptions that are contained in their own div. I want only 4 of the divs to load on page load then have a load more button that will load 4 more with each click. There's going to be a lot of videos that will really slow down the page unless I install this feature. I know how to fake it by using jQuery but that doesn't help with page loading.

I'm not an Ajax expert by any means, so really I'm just looking to be pushed in the right direction here. I don't need to load from a database or anything. I'm just building the page from scratch. Do I store the additional divs in another page and then load/append +4 divs from there with each button click?

Thanks!

Upvotes: 0

Views: 2281

Answers (2)

avrahamcool
avrahamcool

Reputation: 14094

you can store the links of the video sources in a JS array (that load's with the page), but then, construct the DOM only 4 videos at a time, (every time you click on a button, or every time you scroll to the end of the page).

for example, if you put a 'load' button in your page, when clicked - your function will create 4 more dives with the appropriate content, and dynamically add them to the DOM. you just have to create some static counter to remember the index of the videos that you didn't display yet.

This will not affect your page loading time like with videos (because the sources are only text)

EDIT: the same thing can be done if your video sources are stored in a DB of some sort, you just have to remember your current position, and to fetch only small data every time.

take a look at that simple Fiddle

var videoSources = new Array("Src1","Src2","Src3","Src4","Src5","Src6","Src7","Src8","Src9","Src10","Src11","Src12","Src13","Src14","Src15","Src16");

var index = 0;

function Load()
{
    if(index == videoSources.length)
        return;
    var newElement = '<div class="Row">';
    for(var i=0; i< 4; i++)
        newElement += '<div class="Video">'+videoSources[index++]+'</div>';
    newElement += '</div>';
    $(newElement).appendTo($('#Container'));
};

Upvotes: 3

0x_Anakin
0x_Anakin

Reputation: 3269

Let's take this step by step.Apparently you have a folder with some videos, also a db probably mysql where you have stored the paths to those videos.

First in your page load the first 4 videos using serverside language like php to prevent 1 more request with ajax once your page has loaded.

Then since you are using jquery you could use the following code

/* JS */

var totalVideos = 4;

function getImages(){

    var request = $.ajax({
        url: "getVideos.php",
        type: "POST",
        data: { last : totalVideos },
        dataType: "json"
    });

    request.done(function( videos ) {
        renderVideos(videos);
        totalVideos += 4;
    });

    request.fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });

}

function renderVideos(vids){

    var html = '';

    for (var i = vids.length - 1; i >= 0; i--) {

        var video = // Create the video html code here based on your needs.


        html += video;
    }

    $('#yourVideoContainer').append(html);
}

$(document).ready(function(){

    $('#moreVideos').click(function(){
        getImages();
    })

})

/* PHP */

if (isset($_POST['last']) && is_numeric($_POST['last'])) {
    getVideos(intval($_POST['last']);
}

function getVideos(last) {

        global $db; // This is your database conection object assuming it is global.

        $query   = 'SELECT * FROM videos LIMIT 4 OFFSET :last ORDER BY videos.id DESC'; 
        if ($statement = $db->prepare($query)) {

            $statement->bindParam(':last', last);
            $statement->execute();
            $result = $statement->fetchAll(PDO::FETCH_ASSOC);

            if(count($result) > 0){
                header('Content-Type: application/json');
                echo json_encode($result);
                return;
            }
        }

        header("HTTP/1.0 666 Someone stole your vids");
}

In case you dont want to use databases and serverside language you could use a simple JS or JSON file in your project where all the videos info will be stored.Then simply load the file via javascript and access the videos array or object.

For example in a json file case you could do this:

$.getJSON("videos.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Upvotes: 0

Related Questions