Refresh di una label

di il
4 risposte

Refresh di una label

Ciao, ho bisogno di modificare una label e far sì che gli utenti del sito vedano la modifica senza aggiornare tutta la pagina: come posso fare?
Ho pensato ad un timer (10 secondi vanno bene) che aggiorni un iframe dentro al quale metterei la label, ma non ho idea di come fare.

Inoltre vorrei poter modificare la label senza fare l'accesso al sito in modifica, ma semplicemente andando nel sito, fare la modifica e salvarla.
Grazie a chi potrà aiutarmi.
Ciao

4 Risposte

  • Re: Refresh di una label

    15/06/2023 - ugoldrake ha scritto:


    Ciao, ho bisogno di modificare una label e far sì che gli utenti del sito vedano la modifica senza aggiornare tutta la pagina: come posso fare?

    Se hai un minimo di esperienza con JavaScript, è una operazione abbastanza banale sostituire il testo di un elemento che è presente sulla pagina.

    15/06/2023 - ugoldrake ha scritto:


    Ho pensato ad un timer (10 secondi vanno bene) che aggiorni un iframe dentro al quale metterei la label, ma non ho idea di come fare.

    Non serve un IFRAME, a meno che tu non voglia creare un riquadro in cui aggiorni una pagina che costituisce la “label” di cui parli, affinché questa parte rimanga totalmente separata dalla “pagina ospite” che la mostra tramite appunto l'IFRAME.

    15/06/2023 - ugoldrake ha scritto:


    Inoltre vorrei poter modificare la label senza fare l'accesso al sito in modifica, ma semplicemente andando nel sito, fare la modifica e salvarla.

    Se parliamo di modificare il testo della pagina che visualizzeresti nell'IFRAME, supponendo di usare questa soluzione, ti basta caricare una versione aggiornata della pagina stessa che contiene la label e periodicamente aggiornare nella pagina principale la sua visualizzazione, ricaricando ogni N secondi il contenuto.

    A mio avviso, sarebbe invece meglio procedere in questo modo:

    • carichi sul sito un file di testo con il messaggio da mostrare nella label;
    • nella pagina ospite, scarichi il contenuto del file via AJAX (vedi esempio in seguito);
    • aggiungi una temporizzazione per scaricare ogni N secondi, quindi se aggiorni il file, il testo verrà aggiornato;
    • quando hai bisogno di modificare il messaggio, carichi un nuovo file di testo con il contenuto aggiornato.

    Questo è un esempio di codice (ottenuto direttamente da ChatGPT) per illustrare il concetto. :)

    <!DOCTYPE html>
    <html>
    <head>
      <title>Scarica File di Testo</title>
    </head>
    <body>
      <div id="content"></div>
    
      <script>
        function downloadTextFile() {
          var xhttp = new XMLHttpRequest();
    
          xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
              document.getElementById("content").innerHTML = this.responseText;
            }
          };
    
          xhttp.open("GET", "path/al/file.txt", true);
          xhttp.send();
        }
    
        // Imposta l'intervallo di download
        setInterval(downloadTextFile, 5000); // Scarica ogni 5 secondi
      </script>
    </body>
    </html>

    Ciao! :)

  • Re: Refresh di una label

    Grazie Alka,

    il tuo codice è perfetto.

    Ovviamente ho chiesto anche a chat gpt, e chi non lo fa ormai? Però mi dava sempre codici che non fungevano.

    Parte 2:

    Questo va benissimo per la visualizzazione della mia utenza, ora devo creare una situazione semplice che mi consenta di modificare la label senza entrare nell'ide del provider che ospita il mio sito, se mi sono spiegato. Anche perché dovrei cambiare questo valore spesso e in tempi brevi, quindi non avrei il tempo di entrare, loggarmi, modificare, salvare… Ci vorrebbe un pulsante che mi faccia modificare il testo, magari su un'altra pagina, così l'utenza non lo vede e non fa danni.

    Cioè vado lì, dove lo vedremo, cambio il testo, salvo esco e tu dopo 5 secondi vedi la modifica in seguito al codice che hai scritto sopra.

    Ciao

  • Re: Refresh di una label

    15/06/2023 - ugoldrake ha scritto:


    Ovviamente ho chiesto anche a chat gpt, e chi non lo fa ormai? Però mi dava sempre codici che non fungevano.

    Per quanto ChatGPT sia senz'altro utile, bisogna fare le domande giuste e soprattutto sapere come utilizzare efficacemente gli esempi proposti, che hanno quasi sempre bisogno di aggiustamenti.

    15/06/2023 - ugoldrake ha scritto:


    Questo va benissimo per la visualizzazione della mia utenza, ora devo creare una situazione semplice che mi consenta di modificare la label senza entrare nell'ide del provider che ospita il mio sito, se mi sono spiegato. Anche perché dovrei cambiare questo valore spesso e in tempi brevi, quindi non avrei il tempo di entrare, loggarmi, modificare, salvare…

    Questo cambia le cose: serve un database o comunque un file di dati dove memorizzare l'informazione, o eventualmente prevedere la scrittura del file di testo proposto nell'esempio precedente.

    15/06/2023 - ugoldrake ha scritto:


    Ci vorrebbe un pulsante che mi faccia modificare il testo, magari su un'altra pagina, così l'utenza non lo vede e non fa danni.

    Cioè vado lì, dove lo vedremo, cambio il testo, salvo esco e tu dopo 5 secondi vedi la modifica in seguito al codice che hai scritto sopra.

    Attenzione che questo genere di soluzioni non è mai buona: per quanto si possa pensare che una pagina sia “nascosta”, se non è previsto un accesso con un login/password chiunque può scoprire l'indirizzo della pagina e accedervi.

  • Re: Refresh di una label

    Grazie ho risolto.

    Posto il codice completo qualora fosse utile ad altri.

    Questo è il primo file html che mostra il risultato della modifica

    <!DOCTYPE html>
    <html>
    <head>
        <title>Modifica file.txt</title>
    </head>
    <body>
    	<script>
        window.addEventListener('DOMContentLoaded', function() {
        var textArea = document.getElementById('textArea');
        var saveButton = document.getElementById('saveButton');
        var message = document.getElementById('message');
    
        // Carica il contenuto del file.txt
        fetch('file.txt')
            .then(response => response.text())
            .then(text => {
                textArea.value = text;
            })
            .catch(error => {
                console.error('Si è verificato un errore durante il caricamento del file:', error);
            });
    
        // Salva le modifiche nel file.txt
        saveButton.addEventListener('click', function() {
            var newText = textArea.value;
            fetch('AggiornaFileTxt.php', {
                method: 'POST',
                body: newText
            })
            .then(response => {
                if (response.ok) {
                    message.textContent = 'Modifiche salvate con successo.';
                } else {
                    message.textContent = 'Si è verificato un errore durante il salvataggio delle modifiche.';
                }
            })
            .catch(error => {
                console.error('Si è verificato un errore durante il salvataggio delle modifiche:', error);
            });
        });
    });
    </script>
        <h1>Modifica file.txt</h1>
        <textarea id="textArea" rows="10" cols="50"></textarea>
        <button id="saveButton">Salva</button>
        <p id="message"></p>
    
        <script src="script.js"></script>
    </body>
    </html>

    E poi un php AggiornaFileTxt.php

    <?php
        $newText = file_get_contents('php://input');
        file_put_contents('file.txt', $newText);
    ?>
    

    Un file di testo, file.txt

    Infine l'html per la mia utenza

    <body>
      <div id="content"></div>
    
      <script>
        function downloadTextFile() {
          var xhttp = new XMLHttpRequest();
    
          xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
              document.getElementById("content").innerHTML = this.responseText;
            }
          };
    
          xhttp.open("GET", "file.txt", true);
          xhttp.send();
        }
    
        // Imposta l'intervallo di download
        setInterval(downloadTextFile, 5000); // Scarica ogni 5 secondi
      </script>
    </body>

    In questo modo vado sul primo file html e modifico il testo contenuto nel file.txt e lo salvo.

    Gli utenti della mia pagina vedranno la scritta aggiornarsi ogni 5 secondi.

    Grazie a tutti

    Ciao

Devi accedere o registrarti per scrivere nel forum
4 risposte