Richiesta asincrona e problemi con caratteri dentro tendina

Ciao a tutti! Vi scrivo perchè ho un problema che non riesco a risolvere.... Dunque, ho una pagina con una casella di riepilogo, la classica tendina, nella quale devono essere caricati dei valori mediante una richesta asincrona. Questi valori derivano da alcune query fatte sulla pagina lato server.

Per semplificare il problema, nella pagina php ho inserito semplicemente una echo con i valori che mi dovrebbero ritornare sul lato client.

Il problema è che quando i valori vengono ricevuti  e inseriti nella <select>, nella tendina compaiono dei caratteri strani.... Faccio un esempio:

Marche disponibili:

-----------------------

                             <- carattere vuto

Asus

AsRock

Intel

Msi

Gigabyte

-----------------------

Pagina lato client: index.php

<?php 
  include('inc/conn.inc.php');
?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="it"> 
<head> 
<title></title> 
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" > 

var http = createRequestObject(); 
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null; 

function createRequestObject() { 
 var ro; 
 var browser = navigator.appName; 
 if (browser == "Microsoft Internet Explorer") { 
   ro = new ActiveXObject("Microsoft.XMLHTTP"); 
 } 
 else { 
   ro = new XMLHttpRequest(); 
 } 
 return ro; 
} 

function addElement(ogg,val,text) { 
 var newOption; 
 newOption = document.createElement("option"); 
 newOption.value = val; 
 newOption.text = text; 
 ogg.add(newOption, where);     
} 

function removeElement(ogg) {  
 if (ogg.options.length > 0) { 
   while (ogg.options.length) { 
     ogg.remove(0); 
   }     
 } 
} 

function disabledElement(ogg,val){ 
 document.getElementById(ogg).disabled = val; 
} 

function richiediMarca(oggId){ 
 var id = document.getElementById(oggId).value;
 http.open('GET','prova.php', true); 
 http.onreadystatechange = rispostaMarca; 
 http.send(null);   
} 


function rispostaMarca() { 
 var Marca = document.getElementById('m1');  
 if (http.readyState == 4) { 
   if (http.status == 200) { 
     var response = http.responseText;
     removeElement(Marca); 
     var elemento = response.split(',');
     max = elemento.length; 
     addElement(Marca,'sel','Seleziona una marca:'); 
     for(x=0;x<max;x++) { 
       var val = elemento[x].split(',')
       addElement(Marca,val[0],val[0]); 
     } 
     disabledElement('m1',false); 
   } 
   else { 
     addElement(Marca,'sel','Caricamento...'); 
   } 
 } 

} 

</script> 

</head> 

<body onload="richiediMarca('m1');"> 

<form name="form"> 
Marche disponibili:<br>

<select name="m1" id="m1"> 
  <option value="sel" selected="selected"></option> 
</select> 

</form> 

</body> 
</html>

Pagina lato server: prova.php

<?php
 
  $prova=",Asus,AsRock,Intel,Msi,GigaByte,";
  //echo utf8_encode($prova);
  echo ($prova);
?>

Ho provato varie funzioni di codifica, tipo utf8_encode, ma niente. 

Un piccola osservazione: Se sostituisco:

var response = http.responseText;

con

var response = ',Asus,AsRock,Intel,Msi,GigaByte,';

i valori vengono inseriti correttamente nella tendina, senza problemi di caratteri vuoti o strani.

Aspetto vostri suggerimenti!

Grazie

inviato 8 anni fa
whitewolf11
modificato 8 anni fa
X 0 X

Ho provato ad eseguire i tuoi script in locale. Risultato: neinte caratteri strani. Per quanto riguarda gli spazi ho risolto semplicemente togliendo le virgole alle estremità della stringa e riformulando questa funzione:

function rispostaMarca() {

 var Marca = document.getElementById('m1'); 

 if (http.readyState == 4) {

   if (http.status == 200) {

     var response = http.responseText;

     removeElement(Marca);

     var elemento = response.split(',');

     max = elemento.length;

     addElement(Marca,'sel','Seleziona una marca:');

     for(x=0;x<max;x++) {

       var val = elemento[x];

       addElement(Marca,val,val);

     }

     disabledElement('m1',false);

   }

   else {

     addElement(Marca,'sel','Caricamento...');

   }

 }

}

risposto 8 anni fa
Gianni Tomasicchio
modificato 8 anni fa
X 0 X

Che sbadato.....ho fatto uno split in più....... :buck:

Ok! Funziona perfettamente.

Grazie mille Gianni !

risposto 8 anni fa
whitewolf11
X 0 X

Non me ne sono accorto perchè utilizzavo Firefox, invece con IE continuano ad apparire i caratteri strani in corrispondenza dell'ultima voce. La tendina ora si presenta così:

Marche disponibili:

-----------------------

Asus

AsRock

Intel

Msi

Gigabyte                   

-----------------------

Ho utilizzato la tua funzione ed ho eliminato le virgole ad inizio e fine nella stringa sul lato server.

risposto 8 anni fa
whitewolf11
X 0 X

Nonostante numerosi tentativi non sono riuscito ancora a risolvere il problema...

Gianni, potresti gentilmente confermarmi se sotto IE ti compaiono caratteri strani.

Grazie!

risposto 8 anni fa
whitewolf11
X 0 X

Nel test che ho fatto non sono usciti caratteri strani su IE7  :dunno:

risposto 8 anni fa
Gianni Tomasicchio
X 0 X

Allora...il problema c'è. Il fatto è che con Firefox o IE7 non si vede. Mi spiego meglio: la stringa restituita dalla chiamata asincrona risulta sporca cioè con caratteri a quadrettini, attaccati in corrsipondenza dell'ultima voce della tendina. Tali caratteri risultano chiaramente visibili se si utilizza IE6. Ho fatto varie prove ed a volte questi caratteri strani compaiono sia all'inizio della stringa che alla fine o solo all'inizio o alla fine, naturalmente in base al tipo di prova.

Il frammento di codice che ho postato non è altro che un estratto di un programma che tratta select multiple tramite Ajax. Quindi in base al valore selezionato nella prima tendina carica i valori della seconda tendina.

Però in questo caso se seleziono una delle voci per così dire sporche il risultato della seconda tendina risulta giustamente compromesso. Il fatto è che con Firefox o IE7 queste voci sporche non si vedono e ci si può accorgere del problema solo se si utilizza IE6(in questo caso sono chiaramente visibili) o se si passa il valore selezionato ad una query (che di conseguenza non restituisce niente)

Tutto il problema nasce dalla stringa restituita dalla chiamata asincrona che risulta sporca e finora non sono riuscito a capire come risolvere il problema.

risposto 8 anni fa
whitewolf11
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda