Make large-scale textContent exchanges with Javascript

Question

I have a page on which I want each event to be changed the textContent of a <h1>, one <p> and a <img>.

I thought of php includes or Json. I don’t know.

(It’s a lot of content, so I thought about Json)

Answer 1

If you are generating a page with PHP, where the click on an element (or some other action) should fetch other results on the server, the first thing to do is specify what should be sought. I usually do this through attributes data-, but you can do it 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 out the relevant parameters for your query, and make an Ajax request to fetch that content (in this case in JSON, but it 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 the /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 using some library or simply inserting PHP variables into a text file in JSON format (remember to use mimetype correct):

php items.

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

Once received the data, all you need to do is update the page elements with the data received via Ajax. In my example above, it would be 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 exchange the relevant part (at h1 and in the p you exchange the innerHTML, in the img you exchange the src and perhaps also the title and the alt).

References to perform the above steps in pure Javascript:

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

  • The querySelector receives a syntax very similar to the one used by jQuery, it is worth using if it is a possibility.

• Multiple elements are selected using document.querySelectorAll or document.getElementsByTagName, etc.;

• One assigns a Handler link or button through property onclick. Other components accept handlers different (you spoke on a submenu, right? would be a select or something else?);

• In that question shows how to make an Ajax request with pure Javascript;

• The getJSON 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 method .data of jQuery corresponds more or less to consult an attribute data- of the element in the DOM. That is:

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

  It’s kind of the same thing:

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

• Given an element (obtained by the methods described above), you take your children through the attribute children. So you can iterate on them.