The example doesn't cover every single aspect, but the very major things.

JQUERY:
-------



// listener to the [select from existing photos] button
$('#photosModal').on('shown.bs.modal', function () {
    // get the first page of photos (paginated)
    getPhotos(function(photosObj){
        displayPhotos(photosObj);
    });
});

/**
 * get the photos paginated, and display them in the modal of selecting from existing photos
 *
 * @param page
 */
function getPhotos(callback) {

    $.ajax({
        type: "GET",
        dataType: 'json',
        url: Routes.cms_photos,
        data:{
            'page': window.current_page + 1 // you might need to init that var on top of page (= 0)
        }
    })
        .done(function( response ) {
            var photosObj = $.parseJSON(response.photos);
            console.log(photosObj);

            window.current_page = photosObj.current_page;

            // hide the [load more] button when all pages are loaded
            if(window.current_page == photosObj.last_page){
                $('#load-more-photos').hide();
            }

            callback(photosObj);
        })
        .fail(function( response ) {
            console.log( "Error: " + response );
        });
}

/**
 * @param photosObj
 */
function displayPhotos(photosObj)
{
    var options = '';

    $.each(photosObj.data, function(key, value){
        options = options + "<option data-img-src='"+value.thumbnail+"' value='"+value.id+"'></option>";
    });

    $('#photos-selector').append(options);

    $("select").imagepicker();
}

// listener to the [load more] button
$('#load-more-photos').on('click', function(e){
    e.preventDefault();

    getPhotos(function(photosObj){
        displayPhotos(photosObj);
    });

});




Laravel:
--------


$photos = $this->photo_repo->paginate(12);

return Response::json([
    'status' => 'success',
    'photos' => $photos->toJson(),
]);

Stats

4 likes
• 15254 views

Categories

• Requests and Input

Tags

• 5.0