How can I make a button to load more using jquery?

Question

Good morning guys, I’m making a site that has the posts, but I don’t want to use the paging system, I want to make a button that loads more post, then I wanted to know how I do..

<header id="top">
    <a href="#"><p id="nome">projeto</p></a>
</header>

<div id="principal">
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
</div>

<div id="butao">
    <p id="load">MAIS</p>
</div>

That’s the code I’ve made so far, who can anyone help me with? Causing when the "MORE" button is clicked, it loads a new line with 3 more posts..

Thanks in advance..

Answer 1

@Tássiogonçalves, you can do with the following steps:

1. Assigns the Event Handler click to the "Press More".
2. Counts the number of existing items on the page.
3. Request data from a PHP page that you search in the BD
4. Receives this data and inserts it into the page.

index.html

<ul class="itens">
   <li class="item">A</li>
   <li class="item">B</li>
   <li class="item">C</li>
</ul>
<button class="mais">Carregar mais</button>

STEP 1 AND 2

jquery-script.js

// Atribui um event handler ao botao  - evento click
$(".mais").on('click', function () {
        var nItens = $itens.find(".item").length; // Conta o numero de itens
        var dadosEnviar = { offset : nItens };    // Dados que serao enviados ao BD. Será o número de ítens na página.
       pedidoAjax(dadosEnviar); 
});

AJAX request waiting for server response in JSON format. In this case, a string array in JSON format.

var pedidoAjax = function(dadosEnviar) {
    $.ajax({
        data: dadosEnviar,        // dados a serem enviados
        dataType: "json",         // Formato do dado **recebido como resposta do servidor**.  html, json, text ...
        method: "post",           // post ou get
        url: "myPHPscript.php",   // url invocada
        success: function (dados, textStatus, jqXHR) {

            // Executado em caso de sucesso.
            console.log(dados + " " + textStatus + " " + jqXHR + " ");

            inserirItens(dados);
        },
        error: function (jqXHR, textStatus, errorThrown) {

            // Executado em caso de erro.
            alert(jqXHR + " " + textStatus + " " + errorThrown);
            error();
        }
    });
}

You can see more in that post.

STEP 3

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor `dados`, invoca a funcao `addItem`
}

The PHP code could be something like this

myPHPscript.PHP

//Altera o cabeçalho para que o PHP saiba que o retorno será uma string JSON
header('Content-Type: application/json; charset=utf-8');

// Recebe os dados (Número de ítens existentes na página do cliente)
$contentType = $_SERVER["CONTENT_TYPE"];
$response_array['contentType'] = $contentType;

$aDados = json_decode(file_get_contents("php://input"), true); // Recebe dados como array associativo. 

// Busca no BD
// Se o BD for MySQL ou PostgreSQL, use LIMIT e OFFSET para fazer a busca, ex:
// "SELECT nome FROM tabel LIMIT 3 OFFSET ".$aDados["nItens"].";";


// Cria array com os dados do BD
$dados = array();
while ($r...)               // $r guarda o resultado do BD
{
   $dados[] = $r["nome"];
}
// agora $dados é um array que contém todos os nomes buscados no BD.

// Converte o array para JSON e "retorna"
echo json_encode($response_array);

STEP 4

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor `dados`, invoca a funcao `addItem`
}

Answer 2

Gabriel what you want to implement is something like infinitscroll, you have many examples, I made one for you.

http://codepen.io/H3ld3rM3/pen/ozPBOW