[Ajax] Cambio colore button dopo richiesta

[webking2003]

ciao a tutti!! Ho creato una funzione javascript che mi richiama in modo asincrono un file php inviandogli alcuni valori per crearmi una select con gli elementi presi dal database e fin quì tutto ok,una funzione ha il compito di stamparmi fuori la select creata in un apposito div con le istruzioni:

var addControlGenereResponse = xmlHttp.responseText;
var selDiv = document.getElementById("selDiv");
selDiv.innerHTML = addControlGenereResponse; 

benissimo mi viene fuori tutto correttamente però c'è una cosina..
in quel file php che richiamo e che appunto mi genera la query,io vorrei che se esce un determinato valore mi cambiasse il colore di un button che non è all'interno del div dove estraggo la select...
ho provato a mettere

var bDefault=document.getElementById("bDefault");
bDefault.style.color="#FF9900";
var bPersonalizzato = document.getElementById("bPersonalizzato");
bPersonalizzato.style.color="#90F"; 

ma se lo metto nel file php non succede niente,se lo metto dopo la funzione di innerHTML va ma non posso controllare quel valore...come posso fare?

[Vindav]

sinceramente non è chiaro quale sia il problema...

in quel file php che richiamo e che appunto mi genera la query,io vorrei che se esce un determinato valore mi cambiasse il colore di un button che non è all'interno del div dove estraggo la select...

Esce da dove? oltre alla query la pagina php ti torna anche un altro valore a parte o il valore di cui parli è il risultato della query? se il bottone è dentro o fuori dal div non credo importi granche...

se lo metto dopo la funzione di innerHTML va ma non posso controllare quel valore

Anche in questa frase non si capisce di che valore parli... hai la risposta della chiamata php (xmlHttp.responseText), non hai tutto cio che ti interessa all'interno della variabile addControlGenereResponse ?

[webking2003]

scusate se non sono stato chiaro,posto il codice della funzione javascript che effettua la chiamata asincrona al file php

    function ControlGen(textGenInput)
    {
        // creeremo una chiamata asincrona verso il server così potremo controllare se innanzitutto quel genere
        // esiste nei suoi personalizzati poi potremo controllare se esiste in quelli di default con un'unica query
        // nel caso esista lo posiziono già nella select appropriata
             if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
             {
                xmlHttp.open("GET", "../_script/_addDelElements.php?txtInput="+textGenInput+"&operation=addGenere&catCtrl="+categoryNumberCopy,true);
                xmlHttp.onreadystatechange = ControlGenereResponse;
                xmlHttp.send(null);
             }
             else
                 setTimeout('ControlGen()', 1000);
    }
    
    function ControlGenereResponse()
    {
        //Procediamo solo se la transazione è completata
        if(xmlHttp.readyState == 4)
        {
            //lo status 200 indica che la transazione è stata eseguita con successo
            if(xmlHttp.status == 200)
            {
                //estraiamo l'xml ricevuto dal server
                var addControlGenereResponse = xmlHttp.responseText;
                var selDiv = document.getElementById("selDiv");
                selDiv.innerHTML = addControlGenereResponse;
            }
            
            else
            {
                alert("C'è stato un problema nell'accesso al server:" + xmlHttp.statusText);
            }
        }
    } 

come si può notare manda dei parametri al file _addDelElements.php
benissimo ora nel file php eseguo una query e creo una select in questo modo:

                $queryExtrSel = "SELECT ID_Genere,Nome_Genere FROM Genere
                INNER JOIN Cat_Gen ON Cat_Gen.ID_Gen = Genere.ID_Genere
                WHERE Cat_Gen.ID_Cat = $idCateg AND Genere.User_Personalize = $idUserGenResult";
                
                if($idUserGenResult==$id_utente)
            ?>
            <select name="selGenere" id="selGenere">
            <?php
            $queryExtrSelected = "$queryExtrSel";
            $resQueryExtrSelect=mysql_query($queryExtrSelected) OR die("Errore 003, contattare l'amministratore ".mysql_error()) ;
            while ($rigaResQueryExtrSelect = mysql_fetch_array($resQueryExtrSelect)) {
            $ID_Genere_New = $rigaResQueryExtrSelect['ID_Genere'];
            echo"";
            $Nome_Genere_New = $rigaResQueryExtrSelect['Nome_Genere'];
            if($ID_Genere_New == $idGen)
                echo '<option value= " '.$ID_Genere_New .' " selected="selected">' . $Nome_Genere_New . '</option>';
            else
                echo '<option value= " '.$ID_Genere_New .' ">' . $Nome_Genere_New . '</option>';
            }
            ?>
            </select>

vorrei fare in modo che dopo che ho creato questa select se uno dei parametri che ho inviato dalla funzione javasccript a quì mi risulta vera(tramite un controllo con l'id nella query) allora mi cambia il colore a 2 button...come posso fare?

[webking2003]

dopo la creazione della select ho messo una cosa così ma non vuole funzionare

            else if($idUserGenResult==0)
            {
                ?>    
                        <script type="text/javascript">
                     var bDefault=document.getElementById("bDefault");
            bDefault.style.color="#FF9900";
            var bPersonalizzato = document.getElementById("bPersonalizzato");
            bPersonalizzato.style.color="#90F";
            </script>
                <?php
            }

vedo che nella else if entra ma praticamente non mi esegue lo script come mai?

[webking2003]

eppure mi sembra tanto strano...non dovrebbe eseguirmi anche il codice del cambio colore ai button nel momento in cui la funzione ControlGenereResponse() mi da la risposta quando esegue le istruzioni

var addControlGenereResponse = xmlHttp.responseText;
var selDiv = document.getElementById("selDiv");
selDiv.innerHTML = addControlGenereResponse;

??

[Vindav]

prova cosi:

  else if($idUserGenResult==0) 
            { 
                ?>     
                        <script type="text/javascript"> 
function coloraBottone(){
                     var bDefault=document.getElementById("bDefault"); 
            bDefault.style.color="#FF9900"; 
            var bPersonalizzato = document.getElementById("bPersonalizzato"); 
            bPersonalizzato.style.color="#90F"; 
}
            </script> 
                <?php 
            }

var addControlGenereResponse = xmlHttp.responseText;
var selDiv = document.getElementById("selDiv");
selDiv.innerHTML = addControlGenereResponse; 
coloraBottone();

[webking2003]

mmm mi sa proprio che non si può fare a questo punto... però mi sembra una stupidaggine fare una nuova richiesta solo per vedere nel db una condizione se risulta positiva o negativa... secondo me è uno spreco di risorse visto che già ha fatto tutti i controlli...

la parte della index che riceverà la select è questa:

                <button type="button" id="bDefault" name="bDefault" onclick="setGenere(1);" disabled="disabled">Default</button>
                <button type="button" id="bPersonalizzato" name="bPersonalizzato" onclick="setGenere(2);" disabled="disabled">Personalizzato</button>

                <div id="selDiv">
                <select name="selGenere" id="selGenere" disabled="disabled">
                <option>  --  </option>
                </select>
                </div> 

quelli che vedete sono i due button a cui devo cambiare il colore mentre il div "selDiv" conterrà la mia select

[webking2003]

mmm ho provato come dici tu effettivamente è una grande idea ma non va... mi sembra tanto strano però...

[Vindav]

fai due cose metti un alert per vedere cosa contiene la variabile addControlGenereResponse, verifica che nella console di firefox non ci siano errori...

[webking2003]

ok nella alert mi visualizza questo:

<select name="selGenere" id="selGenere">
			<option value= " 1 ">Animazione</option><option value= " 2 " selected="selected">Avventura</option><option value= " 3 ">Azione</option><option value= " 4 ">Biografico</option><option value= " 5 ">Commedia</option><option value= " 6 ">Documentario</option><option value= " 7 ">Drammatico</option><option value= " 8 ">Fantascienza</option><option value= " 9 ">Fantasy</option><option value= " 10 ">Guerra</option><option value= " 11 ">Horror</option><option value= " 12 ">Musicale</option><option value= " 13 ">Storico</option><option value= " 14 ">Thriller</option><option value= " 15 ">Western</option>			</select>
            	
                <script type="text/javascript">
				function coloraBottone()
				{
                	 var bDefault=document.getElementById("bDefault");
					 bDefault.style.color="#FF9900";
					 var bPersonalizzato = document.getElementById("bPersonalizzato");
					 bPersonalizzato.style.color="";
				}
				</script>