Load next row when i click the button

Question

So, what the button below does is it displays the key from the table posts($p) and once i click it it displays the key of the current post.

<button type="button" onclick="location.href ='{$baseurl}/view/{$p.key}/';">Next Post</button>

However, what i want to do is when i click the button "Next Post" to load the next row with the key in the database.

This project is on smarty and the above line of code is located in somefile.tpl

Answer 1

You need to attach listener to click event to button, load data from server using ajax and then append new data to html.

// Attach click listener
$("button").click(function(e){
    // Prevent default behaviour
    e.preventDefault();

    // Load new data from server
    $.ajax({
        type:'GET',
        url: '{$baseurl}/view/{$p.key}'
    }).done(function(response){
        // Do stuff with loaded data, for example append to body
        $("body").append( $("<div>").text(response.toString()) );
    }};

    return false;
});