Problema con Ajax e IE

[fermat]

ho già provato a fare varie modifiche ma nn riesco a far funzionare questa funzione con IE:

        <script type="text/javascript">
            function changeSelect(str) {
                if (str == "") {
                    document.getElementById("categoria").innerHTML = "";
                    return;
                }

                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else if(window.ActiveXObject) {
                    try {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch(e) {
                        try {
                            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch(e) {
                            xmlhttp = false;
                        }
                    }
                    
                }

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","home-cat.php?sid=" + str, true);
                xmlhttp.send();
            }
        </script>

mi serve per riempire una select in base ai risultati scelti nella prima select.
con gli altri browser ovviamente funge, con IE la seconda select rimane vuota.

[fermat]

ho provato a modificare così:

        <script type="text/javascript">
            function changeSelect(str) {
                if (str == "") {
                    document.getElementById("categoria").innerHTML = "";
                    return;
                }

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

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","home-cat.php?sid=" + str, true);
                xmlhttp.send();
            }
        </script>

ma nada.
la seconda select continua a rimanere vuota.
nessuno ha un'idea??
ribadisco che il problema si presenta solo con IE (nel caso con IE 8).

[cavicchiandrea]

Non capendo cos'è "categoria" difficile dare motivazioni, comunque risolvi mettendo un div contenitore e aggiungendo tutta la select completa non solo le option.

[fermat]

ok vi posto il tutto allora.
nella pagina oltre a quella funzione ho le due select:

                <td>Sezione:</td>
                <td>
                    <select name="sezione" onchange="changeSelect(this.value);" id="sezione">
                        <option value="*">*</option>
                        <?php
                        foreach (selectSection () as $rowSection) {
                            echo "<option value='" . $rowSection['sezione_id'] . "'>" . $rowSection['sezione_nome'] . "</option>";
                        }
                        ?>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Categoria:</td>
                <td>
                    <select name="categoria" id="categoria">
                        <option value='*'>*</option>
                    </select>
                </td>
            </tr>

selectSection() è la funzione che riempie la sezione eseguendo una query.
categoria è l'id della omonima select.
nella funziona Ajax invece viene richiamato: xmlhttp.open("GET","home-cat.php?sid=" + str, true);
che è questa pagina qua:

<?php

$sid = $_GET['sid'];
$result = $config->getPdo()->query("SELECT * FROM categorie WHERE sezione_FK=" . $sid . " ORDER BY categoria_nome");
foreach ($result as $rowCat) {
    echo "<option value='" . $rowCat['categoria_id'] . "'>" . $rowCat['categoria_nome'] . "</option>";
}
?>

[cavicchiandrea]

Non postare codice php ma solo html, oltre a complicare la lettura se ci sono errori (tipo apici o virgolette non chiuse) di sintassi potresti non scoprirli.
Immaginavo che "categoria" fosse la select e ignettargli le option con innerHTML probabilmente ie non le digerisce, fai come t'ho detto.

[fermat]

se intendi il codice preso dal browser:

            <tr>
                <td>Sezione:</td>
                <td>
                    <select name="sezione" onchange="changeSelect(this.value);" id="sezione">
                        <option value="*">*</option>
                        <option value='3'>OggiBARCA</option><option value='1'>OggiCHARTER</option><option value='4'>OggiCRUISER</option><option value='2'>OggiISOLA</option>                    </select>
                </td>
            </tr>
            <tr>
                <td>Categoria:</td>
                <td>
                    <select name="categoria" id="categoria">
                        <option value='*'>*</option>
                    </select>
                </td>
            </tr>

questo sia su FF che su IE, solo che poi nella pagina su FF vedo tutte le altre voci, su IE no.
in sostanza su IE nn posso scegliere nulla.
di primo impatto mi sembra che la prima select nn abbia errori.
probabilmente è innerHTML che nn va su IE.
come potrei fare?

[fermat]

ok scusa ci sono arrivato dopo:

        <script type="text/javascript">
            function changeSelect(str) {
                if (str == "") {
                    document.getElementById("categoria").innerHTML = "";
                    return;
                }

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

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("div_cat").innerHTML = "<select name='categoria' id='categoria'><option value='*'>*</option>" + xmlhttp.responseText + "</select>";
                    }
                }
                xmlhttp.open("GET","home-cat.php?sid=" + str, true);
                xmlhttp.send();
            }
        </script>
....
            <tr>
                <td>Categoria:</td>
                <td>
                    <div id="div_cat">
                        <select name="categoria" id="categoria">
                            <option value='*'>*</option>
                        </select>
                    </div>
                </td>
            </tr>

grazie!!

[fermat]

mi correggo.
ho un bel problema:

        <script type="text/javascript">
            function changeSelect(str) {
                if (str == "") {
                    document.getElementById("categoria").innerHTML = "";
                    return;
                }

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

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("div_cat").innerHTML = "<select name=\"categoria\" id=\"categoria\"><option value=\"*\">*</option>" + xmlhttp.responseText + "</select>";
                    }
                }
                xmlhttp.open("GET","home-cat.php?sid=" + str, true);
                xmlhttp.send();
            }
        </script>

sia su FF che su IE le select vengono popolate.
però in FF nn arriva più il valore selezionato nella seconda select, e qusto mi blocca il submit del form.
su IE invece funziona tutto.
come posso fare??

[cavicchiandrea]

Fai un po di debug usando alert nei vari step ajax oppure usando firebug per vedere che tutto funzioni correttamente.

[fermat]

per ora ho messo su qeusto:

        <script type="text/javascript">
            function changeSelect(str) {
                if (str == "") {
                    document.getElementById("categoria").innerHTML = "";
                    return;
                }

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

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        if(browser =="Microsoft Internet Explorer"){
                            document.getElementById("td_cat").innerHTML = "<div><select name=\"categoria\" id=\"categoria\"><option value=\"*\">*</option>" + xmlhttp.responseText + "</select></div>";
                        } else {
                            document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET","home-cat.php?sid=" + str, true);
                xmlhttp.send();
            }
        </script>

così sembra funzionare tutto sia su IE che su FF.
nn so se è il modo migliore di procedere però.