IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] mise a jour d'un tableau, innerHTML et IE


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Mars 2006
    Messages
    37
    Détails du profil
    Informations forums :
    Inscription : Mars 2006
    Messages : 37
    Par défaut [AJAX] mise a jour d'un tableau, innerHTML et IE
    bon, se doit pas être le seul message concernant ce gros souci qu'est le innerHTML sur les éléments row et table avec IE.

    mais voilà, je n'ai pas trouvé de réponse satisfaisante et je voudrais avoir un avis pour des questions d'efficacité.

    je mets donc mon tableau html à jour grâce à l'ajax, il y a 6 cellules à mettre à jour et 2 d'entres elles nécessitent un p'tit passage sur le serveur pour être renseigné.

    au début, je comptais mettre toute la ligne dans mon fichier .php et la rentrer dans ma ligne avec un innerHTML. Mais voilà que j'apprends que ce brave IE à décidé qu'il serait le seul à ne pas accepter ça, comme ça, il rappellerait aux developpeurs qu'il a le pouvoir de nous em.... la vie.

    j'entrevois une solution bourrin : création de 2 objets XMLHttpRequest et récupérer mes 2 cellules séparément.

    mais je ne trouve pas ça tellement jolie ni efficace (et si ce n'était pas une, mais 10 ou 20 cellules à changer ....)

    merci.

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Effectivement, scinder les contenus récupérés pour pouvoir n'actualiser que les contenus des cellules séparément (plutot qu'une ligne entière) semble être une bonne solution.
    Cependant : pourquoi 2 objets XHR ?
    Côté serveur, prépare une réponse divisée en deux parties avec un séparateur de ton choix, et découpe la réponse à l'arrivée (avec un split par exemple) pour actualiser chaque cellule séparément...

    >>> et ce n'est pas beaucoup plus lourd avec 20 cellules qu'avec 2 ^^ (à condition de nommer correctement les éléments pour pouvoir les itérer sans trop de difficulté)

    Exemple avec deux cellules et deux contenus à mettre à jour :

    côté serveur :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    echo $donnee1."##".$donnee2;
    et côté client:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // dans la fonction de callback de ton appel ajax :
    var splitReponse = xhr.responseText.split("##");
    document.getElementById("taCellule1").innerHTML = splitReponse[0];
    document.getElementById("taCellule2").innerHTML = splitReponse[1];
    Mais tant qu'à séparer les contenus, à mon avis, autant faire du DOM
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // dans la fonction de callback de ton appel ajax :
    var splitReponse = xhr.responseText.split("##");
    document.getElementById("taCellule1").appendChild(document.createTextNode(splitReponse[0]));
    document.getElementById("taCellule2").appendChild(document.createTextNode(splitReponse[1]));
    ...voire une syntaxe avec replaceChild si les cellules n'étaient pas vides avant l'appel

  3. #3
    Membre averti
    Inscrit en
    Mars 2006
    Messages
    37
    Détails du profil
    Informations forums :
    Inscription : Mars 2006
    Messages : 37
    Par défaut
    merci a toi, j'avais pas penser au separateur. mais en meme temps, j'ai "simplifier" au possible mon ajax avec une p'tite methode toute bete et j'aime bien l'utiliser

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
     * fonction qui simplifie l'ajax ^^
     */
    function ajaxSimple(emplacement, data, fichier){
    	var xhr = getXhr();
    	document.body.style.cursor='wait';
    	if(xhr !== false){
    		xhr.open("POST", "../js/"+fichier, true);
    		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     
    		xhr.onreadystatechange = function(){ 
    			if(xhr.readyState == 4){
    				if(emplacement != undefined){
    					emplacement.innerHTML = xhr.responseText;
    				}
    				document.body.style.cursor='auto';
    			}
    		}
     
    		xhr.send(data);
    	}
    }
    bon, j'peu toujours retaper tout ca, mais j'voulais vraiment savoir si le rapport "efficatité"/"temps à codé ca, quitte a se planter" etait vraiment favorable a ma solution. mais j'ai toujours du mal a evaluer la "lourdeur" de l'ajax, du javascript, des appels a la base de donnée voir du code php.

    en tout cas, merci pour ta reponse

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2007] Mise a jour d'un tableau croise dans un sous formulaire
    Par NioKhy dans le forum IHM
    Réponses: 18
    Dernier message: 06/07/2012, 18h23
  2. AJAX mise à jour bd avec checkbox
    Par wakan dans le forum CodeIgniter
    Réponses: 1
    Dernier message: 04/03/2011, 23h21
  3. [AJAX] Mise a jour d'un div pendant l'execution
    Par jinpol dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/08/2007, 14h31
  4. [AJAX] mise a jour de formulaire
    Par Emcy dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 31/01/2007, 11h41
  5. [AJAX] Mise a jour de deux div
    Par Phenomenium dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 06/09/2006, 18h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo