Cambiare immagine con Ajax

[alfredo.benni]

Ciao a tutti,
dopo aver fatto il mio bel programma in Javascript e PHP alla fine ho visto che non funziona. Alhazred del forum PHP mi dice che devo chiedere lumi qui. Ci sono vicino, ormai, spero!

In pratica ho due pagine.
Pagina1 dove si sceglie una immagine (scelta fra diverse immagini). Un file PHP scrive il nome/link dell' immagine in un file temporaneo.

Pagina2 dove si deve replicare la medesima immagina senza però ricaricare la pagina. L'idea era quella di caricare il file temporaneo, ma devo farlo con Ajax perché la funzione PHP si esegue solo la prima volta e poi non esiste più. Solo che non lo so fare

La discussione intera con il codice fino a qui commentato la potete vedere qui:
https://forum.html.it/forum/showthre...5#post25539345
Se serve comunque posso ripostarlo.

Alhazred mi dice:
"La funzione PHP non deve fare nulla di speciale, solo fare l'echo della stringa relativa all'immagine, il resto lo deve fare tutto AJAX, ovvero:
- inviare una richiesta al file contenente php_func()
- recuperare la risposta
- sostituire il link alla nuova immagine nel src del tag img"
Visto che sono del tutto inesperto di Ajax mi date una mano a modificare il codice ?

Un grazie a tutti
Alf

[ciro78]

sai fare una chiamata ajax?

[alfredo.benni]

Ciao ciro78, grazie per aver risposto.
Credo che se la avessi saputa fare non vi avrei scritto.

A parte i parametri come impostare cache, async o ifModified mi perdo già nei parametri base. Figuriamoci sul nonce...

Leggo dal vostro tutorial sui parametri base:

• url: l’indirizzo al quale inviare la chiamata
• success: funzione da lanciare se la richiesta ha successo. Accetta come argomenti i dati restituiti dal server (interpretati di default come html o xml) e lo stato della chiamata
• error: funzione lanciata in caso di errore. Accetta un riferimento alla chiamata XMLHttpRequest, il suo stato ed eventuali errori notificati

Nel vostro esempio qui: https://www.html.it/pag/18403/jquery-ajax/

$.ajax({
    url : "mioserver.html",
    success : function (data,stato) {
        $("#risultati").html(data);
        $("#statoChiamata").text(stato);
    },
    error : function (richiesta,stato,errori) {
        alert("E' evvenuto un errore. Lo stato della chiamata: "+stato);
    }
});

Ma questo dove lo inserisco ? In uno script JavaScript ?
La url lavorando in WordPress qual'è ?
Dalla discussione precedente ho capito che devo lanciare un file PHP separato e messo da un'altra parte. Ok. Sarebbe questa la mia "chamata" ?
Scusate ma di tutti i tutorial che ho visto non ci ho capito praticamente nulla.
Lo so che sono una frana... mannaggia !
Alf

[alfredo.benni]

E non ho capito nemmeno come si adopera. Sto guardando questo link ma non riesco a far funzionare.
Se clicco sul link non succede nulla. Sbaglio io ?

https://www.html.it/app/uploads/docu...11-ajax-1.html

[ciro78]

se non sai camminare come puoi correre?

il forum, in particolare questa sezione, hanno lo scopo di fornire supporto a codice che non funziona o magari ad un algoritmo che non si sa come implementare.

presumo che tu voglia cambiare l'immagine ogni tot secondi quindi devi imparare ad usare la funzione setInterval o simili di js.
poi ti serve studiare un attimo js/ jQuery per capire come fare una chiamata asincrona.

non credo che questa sia la sezione adatta mi sa. è più probabile che tu trovi qualcuno nella sezione cerco collaborazione gratuite.
poi ovviamente c'è sempre l'eccezione che conferma la regola ed ha il tempo di scriverti tutto il codice e come implementarlo.

[alfredo.benni]

Grazie per l'incoraggiamento

Allora questo è script javascript che ho postato nell'altra discussione. Schedula ogni 30 secondi una chiamata

<script>
    function on_callPhp()
        {
            var result="<?php php_func();?>";
            // alert(result);
            return false;
        }
    
    var data = new Date();
    data.setTime(<? echo time()*1000; ?>);
    function orologio()
    {

var sec = data.getSeconds();
        document.getElementById('orologio').innerHTML = sec;
        data.setTime(data.getTime()+1000)
        setTimeout("orologio();",1000);
    if(sec==0)
        {
            // "routine 1 di apertura file in PHP"; 
            document.getElementById('scritta').innerHTML = 'lancio routine 1 di apertura file in PHP';
            on_callPhp();
        }
    if(sec==30)
        {
            // "routine 2 di apertura file in PHP"; 
            document.getElementById('scritta').innerHTML = 'lancio routine 2 di apertura file in PHP';
            on_callPhp();
        }
    }
</script>
<body onload="orologio()">
    <div id="orologio"></div>
    <div id="scritta"></div>
    <?php
        function php_func()
        {
            echo "ciao";
            echo do_shortcode('[wbcr_snippet id="532" title="test_chiamata_snippet"]');
        }
    ?>    
    
</body>

Può funzionare come base di partenza o la strada è completamente sbagliata ?
Alhazred mi ha dato alcuni consigli ma alla fine mi ha detto che devo portare fuori la routine php_func() e fare la chiamata Ajax

E qui dato che non ho capito, nonostante tutti i tutorial che ho visto, come fare sta chiamata, mi sono fermato.
E' possibile vedere un esempio FUNZIONANTE e REPLICABILE in modo da poter capire come funziona ?
Come dicevo uso WordPress e in molti esempio Ajax si fa riferimento a pagine PHP che però non sono richiamabili da WP (che ho visto usa un sistema abbastanza complicato di agganci con la WP-Admin).

In ogni caso, grazie comunque.
Alf