Make large-scale textContent exchanges with Javascript

If you are generating a page with PHP, where you click on an element (or some other action) you should look for other results on the server, the first thing to do is to specify what should be sought. I usually do this through data- attributes, but you can do this in other ways if you want:

<ul id="itens"><li>item 1</li><li>item 2</li><li>item 3</li></ul>
<a href="#" id="mais" data-mais="42">Mais itens</a>

Then you intercept the event, find the relevant parameters for your query, and make an Ajax request to fetch this content (in this case in JSON, but could be XML or other):

$("#mais").click(function(e) {
    e.preventDefault();
    var pagina = $(this).data("mais");
    $.getJSON('/buscar/mais/itens.php', { pagina:pagina }, function(dados) {
        // Aqui, "dados" já foi convertido de JSON (texto) para objetos javascript comuns
    });
});

Your server should then receive /buscar/mais/itens.php?pagina=42 and return the data in JSON format. I have no practical experience with PHP, but I know you can do this by using some library or simply inserting PHP variables into a JSON text file (remember to use the correct mimetype ): / p>

itens.php

{
    "pagina":<?= $pagina ?>,
    "proximaPagina":<?= $pagina + 1 ?>,
    "itens":[
        <?php
            ... (iterar sobre os itens e inserir, no formato JSON)
        ?>
    ]
}

Once you have received the data, all you have to do is update the page elements with the data received via Ajax. In my example above, it would look something like:

    $.getJSON('/buscar/mais/itens.php', { pagina:pagina }, function(dados) {
        for ( var i = 0 ; i < dados.itens.length ; i++ ) {
            $("#itens li").eq(i).html(dados.itens[i].valor);
        }
        $("#mais").data("mais", dados.proximaPagina);
    });

In your example, you would have to select the elements that interest you and change the relevant part (in h1 and p you exchange innerHTML , img you exchange src and maybe also title and alt ).

References to perform the above steps in pure JavaScript:

• If you select an element using document.querySelector or - in older browsers - document.getElementById or other related methods;

  • The querySelector gets a syntax very similar to that used by jQuery, it's worth using if it's a possibility.

• If you select multiple elements using document.querySelectorAll or document.getElementsByTagName , etc;

• A handler is assigned to the link or button through the onclick property. Other components accept different handlers (you spoke in a submenu, right? Would it be a select or something else);

• This question shows how to make an Ajax request with pure JavaScript;

  / li>

• The% s of jQuery already converts JSON to JavaScript objects for you, but if you do Ajax by hand you also have to do this conversion manually. This is done the way:

  var dados = JSON.parse(respostaDoAjax_emTexto);
  

• The getJSON method of jQuery corresponds more or less to if you query a .data attribute of the element in the DOM. That is:

  var pagina = $(elemento).data("mais");
  

  It's more or less the same as:

  var pagina = parseInt(elemento.getAttribute("data-mais"), 10);
  

• Given an element (obtained by the methods described above), you get your children through the data- attribute. Then you can iterate over them.