Preview all'onchange

[diablo85]

Salve a tutti, sto progettando una cosa molto semplice ma purtroppo non riesco!!! Praticamente c'è una select con i vari option ognuno dei quali rappresenta un tema css. A destra di questa form c'è un div che mostra una preview del tema selezionato. Alla select è collegato il gestore di eventi onchange che richiama una funzioncina in ajax. Praticamente all'onchange viene richiamata tramite ajax una piccola pagina php che salva la selezione del tema nel database e produce in output l'anteprima del tema (che dovrà essere visualizzato nella pagina principale accanto al form). Ora se richiamo a sè la pagina php che "elabora" i dati dall'onchange funziona alla perfezione, mi scrive "<h3>Anteprima</h3" e mi visualizza l'immagine. Se invece la richiamo tramite ajax nella pagina principale mi viene visualizzata solo la scritta "anteprima" ma l'immagine non viene visualizzata. Questo è il codice della pagina php che viene richiamata tramite ajax:

echo "<h3>Anteprima</h3>";
  ?>
  <script type="text/javascript">
    var objBody = document.getElementsByTagName("body").item(0);
  
    var objImage = document.createElement("img");
    objImage.setAttribute('src', '<?php echo "../graphics/blog/".$tema."/screenshot.jpg" ?>');
    objBody.appendChild(objImage);
    
  </script>

Come già detto se apro la pagina che contiene questo codice funziona alla perfezione, però se la richiamo tramite ajax nella pagina che contiene anche il form non viene nisualizzata l'immagine... Qualcuno avrebbe un'idea? Grazie mille!

[pietro09]

Nelle discussioni utili c'è questo link, che forse fa al caso tuo:

http://forum.html.it/forum/showthrea...readid=1071699


Però, permettimi di dire che sono perplesso :master: e che difficilmente userei questo approccio.

Io farei così:

chiamo la pagina server mediante ajax, salvo quello che devo nel database, e quindi restituisco al chiamante, non codice javascript, ma semplicemente una stringa del tipo:

<h3>Anteprima</h3>[img]xxx.jpg[/img]

La funzione ajax avrà un evento load di ascolto: alla ricezione prendo quella stringa e la metto pari pari nel div mediante innerHTML.

[diablo85]

ho provato anche ad utilizzare il tag [img][/img] dell'html senza ricorrere a javascript per aggiungere l'immagine al DOM però l'errore è sempre lo stesso: funziona standalone, ma non funziona se la richiamo tramite ajax da un'altra pagina... Cosa intendi con "La funzione ajax avrà un evento load di ascolto"?

[pietro09]

Originariamente inviato da diablo85
Cosa intendi con "La funzione ajax avrà un evento load di ascolto"?

Nel link suggerito:
http://forum.html.it/forum/showthrea...2#post10139622

l'evento click del pulsante fa partire ajax: Button1_onclick

ajax("a.asp", onload);

onload è la funzione di "ascolto"

vedi come riceve i dati dal server e lo mette dentro il div1
$("div1").innerHTML = t;

[diablo85]

non uso prototype o robe simili, la richiesta xml http la faccio manualmente. Ti posto il codice così magari riesci a spiegarmi bene dove devo modificare perchè non ci sto capendo più niente!!!

function selectBlogTheme(idDiv,tema){
  var sDiv = idDiv;
  var sTema = tema;
  url = "pages/select_blogTheme.php?tema=";
  http.open("GET", url + escape(sTema), true);
  http.onreadystatechange = function() {   
    if(http.readyState == 1){
      document.getElementById(sDiv).innerHTML = "<h3>Anteprima</h3><span class=\"loading\">Salvataggio in corso...

\n<img src=\"graphics/loading.gif\" alt=\"Salvataggio\" /></span>";
    }
    if (http.readyState == 4) {
      if(http.status==200) {
        var results=http.responseText;
        document.getElementById(sDiv).innerHTML = results;
      }
    }
  }
  http.send(null);
}

dove la variabile http è proprio la XMLHttpRequest()

[pietro09]

document.getElementById(sDiv).innerHTML = results;

da quel che posso vedere mi pare che vada bene.

[diablo85]

già! Il problema sta proprio nel caricamento dell'immagine perchè se in output ci metto del testo viene visualizzato correttamente! Il problema è proprio nel fatto che non si tratta di testo ma di un'immagine...

[pietro09]

Originariamente inviato da diablo85
già! Il problema sta proprio nel caricamento dell'immagine perchè se in output ci metto del testo viene visualizzato correttamente! Il problema è proprio nel fatto che non si tratta di testo ma di un'immagine...

quando carichi l'immagine, l'html ricevuto è corretto? (io lo guardo con Firefox)

ps. come risposta prova a inviare una stringa semplice "[img]prova.jpg[/img]"


la devi vedere

[diablo85]

si funziona, qualsiasi output testuale viene visualizzato correttamente. Se inoltre richiamo a sè stante la pagina php che visualizza l'immagine funziona alla perfezione! Il tutto non funzinoa più però se lo richiamo tramite ajax da un'altra pagina...

[pietro09]

ho provato con una paginetta htm che chiama una pagina asp (non conosco php)

function Button1_onclick()
{
ajax("a.asp", onload);

function onload()
{
var t = this.request.responseText;
document.getElementById("div1").innerHTML = t;
}

}

che più o meno è uguale al tuo (questa istruzione: document.getElementById("div1").innerHTML = t

la pagina server fa solo:
<%
response.write "[img]/ProveNikon/images/IMG_17.jpg[/img]"
response.end
%>

Guardando l'html generato con firefox trovo:

<div id="div1">[img]/ProveNikon/images/IMG_17.jpg[/img]</div>


perciò l'immagine la vedo perfettamente. Di più non so