Learning jQuery 3 - Fifth Edition

Loading additional pages of data

By now, we are experts at the common task of reacting to a click on a page element. When the More Photos link is clicked on, we need to perform an Ajax request for the next set of photos and append them to <div id="gallery"> as follows:

$(() => {  $('#more-photos')    .click((e) => {      e.preventDefault();      const url = $(e.target).attr('href');      $.get(url)        .then((data) => {          $('#gallery')            .append(data);        })        .catch(({ statusText }) => {          $('#gallery')            .append(`<strong>${statusText}</strong>`)        });    });});

Listing 10.1

We also need to update the destination of the More Photos link to point to the next page of photos:

$(() => {  var pageNum = 1;  $('#more-photos')    .click((e) => {      e.preventDefault(); const $link = $(e.target); ...