tabella via ajax, Firefox SI, IE 7 no

**raulz79** · 19-12-2008, 01:08

Ho creato una pagina html che tramite oggetto asincrono riceve da un file php i dati da inserire in una tabella. Lo script Ajax esegue tutto alla perfezione ma i dati vengono visualizzati su Firefox ma non su IE 6 e 7. Eppure ho usato solo metodi del DOM Level 1.

Ecco il codice.
index.php

Codice PHP:


<?php ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Sito Ecommerce</title>

<link rel="stylesheet" type="text/css" href="stile.css" />

<script type="text/javascript" src="ajax.js"></script>

</head>

<body onload="init();">

<div id="contenitore"></div>

</body>

</html>

ajax.js

Codice PHP:


function createXMLHttpRequest() {

     var XHR = null, browserClient = navigator.userAgent.toUpperCase();     if(typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")         XHR = new XMLHttpRequest();

     else if(windows.ActiveXObject && browserClient.indexOf("MSIE 4") < 0) {         if(browserClient.indexOf("MSIE 5") < 0)

             XHR = new ActiveXObject("Msxml2.XMLHTTP");

         else

             XHR = new ActiveXObject("Microsoft.XMLHTTP");

     }

     return XHR;

 }  

function init() {

 var http = createXMLHttpRequest();

  if(http) {

         http.open("post", "processdata.php", true);

         http.setRequestHeader("content-type", "application/x-www-form-urlencoded");

         http.onreadystatechange = function() {

                if (http.readyState == 4) {

                    if (http.status == 200) {

                         var responso = http.responseXML;

                         if(responso) {

                             var classi = [ "foto", "codice", "descrizione", "prezzo", "quantita", "aggiungi" ];

                             var contenitore = document.getElementById("contenitore");

                             var tabella = document.createElement("table");

                             var articoli = responso.getElementsByTagName("articolo");

                              for(var j = 0; j < articoli.length; j++) {

                                  var riga = document.createElement("tr");

                                  for(var i = 0; i < classi.length; i++) {

                                  var cella = document.createElement("td");

                                  if(articoli[j].getElementsByTagName(classi[i])[0]) {

                                          var testo = articoli[j].getElementsByTagName(classi[i])[0].firstChild.nodeValue;

                                     } else {

                                         var testo = classi[i];                                     }                                     cella.appendChild(document.createTextNode(testo));                                     riga.appendChild(cella);                                 }                                 tabella.appendChild(riga);                              }                             contenitore.appendChild(tabella);

                            } else {

                             alert('Errore nella gestione dei dati: ' + http.responseText);

                         }

                    }

                }

         }

         http.send(null);

 }

 }

Quest'ultimo invece è il file xml che php genera e manda come responso:

Codice PHP:


<?xml version="1.0" encoding="utf-8"?>

<articoli>

    <articolo>

        <codice>01289398</codice>

        <descrizione>Articolo di esempio</descrizione>

        <prezzo> 1000,45 € </prezzo>

        <quantita>100</quantita>

    </articolo>

    <articolo>

        <codice>01289398</codice>

        <descrizione>Articolo di esempio</descrizione>

        <prezzo> 1000,45 € </prezzo>

        <quantita>100</quantita>

    </articolo>

    <articolo>

        <codice>01289398</codice>

        <descrizione>Articolo di esempio</descrizione>

        <prezzo> 1000,45 € </prezzo>

        <quantita>100</quantita>

    </articolo>

    <articolo>

        <codice>01289398</codice>

        <descrizione>Articolo di esempio</descrizione>

        <prezzo> 1000,45 € </prezzo>

        <quantita>100</quantita>

    </articolo>

    <articolo>

        <codice>01289398</codice>

        <descrizione>Articolo di esempio</descrizione>

        <prezzo> 1000,45 € </prezzo>

        <quantita>100</quantita>

    </articolo>

</articoli>

**andr3a** · 20-12-2008, 16:43

ti stai scordando qualche appendChild qua e la, se crei una cella e ci appendi roba ma la cella non la appendi di strada ne fai poca.
Detto questo, per una tabella compatibile sia IE che firefox devi creare ... indovina? una tabella, con tanto di tbody

codice:

var table = document.createElement("table"),
    tbody = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td"),
    text = document.createTextNode("Hello Table");
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);

onload = function(){
    document.body.appendChild(table);
};

ma se vuoi un consiglio, il modo più veloce ed indolore per trasformare un XML in HTML, tabella o altro che sia, è XSL(T)

**raulz79** · 20-12-2008, 16:54

Non ci credo, ho perso 5 ore della mia vita per un tbody del .....!!!

Grazie mille Andr3a! Ma sai la cosa che mi fa più rabbia?

Ho letto la compatibility list del W3C, ho provato con jquery prima e prototype dopo, ho riletto gli standard html e poi javascript più volte, ho cercato su google e altri motori di ricerca, anche sulla lista dei bug di explorer, dato che mi funzionava su tutti i browser tranne IE 6 e 7, ma non ho letto da nessuna parte che tbody è necessario per IE, dove le leggo ste cose?

Se tu non avessi mai risposto a questo post, forse non avrei mai trovato la soluzione...!

Avvilente.

Ti ringrazio ancora! Ti devo qualcosa.

**raulz79** · 20-12-2008, 16:58

ho dimenticato un p.s.

ho creato una pagina prova.html e nel body ci ho messo:

<table>
<tr>
<td> cella 1</td>
<td> cella 2</td>
</tr>
tr>
<td> cella 3</td>
<td> cella 4</td>
</tr>
</table>

E me la visualizza lo stesso senza il tbody! Mah, mistero della fede, spero solo che IE sparisca al più presto dalla faccia della terra!

**andr3a** · 20-12-2008, 17:08

se ti leggi l'outerHTML di quella tabella noterai che il tbody IE lo mette in automatico.

In pratica se la tabella è "scritta" non devi usare il tbody (ma se lo usi non fai danno) mentr ese la crei via DOM devi essere pignolo e preciso, ergo tbody perchè il browser non può e non deve intervenire sul DOM che tu hai creato, piuttosto di quello già scritto (vedi innerHTML manuale o il tuo caso sopra)

**raulz79** · 20-12-2008, 17:11

Ho notato andr3a, grazie.

A concludere il thread, posto un link che ho trovato solo ora.

http://www.flashfuck.it/2007/09/11/i...del-tag-table/

Discussione: tabella via ajax, Firefox SI, IE 7 no

Strumenti discussione

Ricerca discussione

Visualizza

Firefox SI, IE 7 no

Permessi di invio