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

jQuery Discussion :

Evaluation de HTML avec Ajax


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Février 2010
    Messages : 4
    Par défaut Evaluation de HTML avec Ajax
    Bonjour à tous

    Je travaille avec jQuery 1.6.1 et voici mon petit problème que je ne comprend pas. je vous fournis le code pour une meilleru compréhension.

    j'insère dans une liste un élément en (1). Cet élément est connu de jQuery car je peux appliquer des opérations sur cet élément.

    En (2), je place un appel a ajax() et j'insère dans la même liste. Aucundes 3 nouveaux éléments insèrés n'est reconnu par jQuery. Pourquoi?
    Ou est l'erreur que je fais?
    merci beaucoup pour votre aide

    (1)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $('#select1').append( '<li id="9">9</li> ' );
     
    function insertData( a ) {
    	$('#select1').append( a );
    }
    (2)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $.ajax({
    	dataType:'html',
    	cache:true,
    	type:'GET',
    	url:"ajax/menu.php?list",
    	success: function(r,s){
    		insertData('<li id="10">10</li> ' );
    		$('#select1').append( '<li id="8">8</li> ' );
    	}
    });

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#select1').append( $('<li id="8">8</li>') );
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Un ID doit être unique et il doit commencer par un caractère alphabétique.

    Exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <ul id="listeID">
    	<li id="li1">Un</li>
    </ul>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $("#listeID").append('<li id="li2">Deux</li>');
     
    // test 1
    $("#listeID").children().each(function(i, item){
    	console.log(i, this.id, $(this).text());
    });
     
    // test 2
    $("#li2").css("color", "red");

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    :red:
    j'ai honte de faire du copier coller comme ça !!!

    j'ai même pas vu l'id nulérique

    Milles excuses ..
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Février 2010
    Messages : 4
    Par défaut
    J'ai finalement trouvé la réponse à mon problème.

    Je suis d'accord que le ID doit etre unique et qu'il doit commencer par un caractère alpha, mais c'étatit pas la question que je posais. La question était au niveau de l'évaluation AJAX.

    Alors, si j'ai bien compris. Ajax fait un appel asynchone au serveur HTTP et lorsque la réponse retourne du serveur, le success: est éxécuté commme dans un THREAD. Nous ne sommes donc plus dans le CONTEXTE de jQuery.

    En ajoutant un ASYNC: FALSE a la requête AJAX, cela force de conserver le contexte de jQuery

    Merci quand même des réponses reçues

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Nous ne sommes donc plus dans le CONTEXTE de jQuery.
    Bien sûr que si...

    En ajoutant un ASYNC: FALSE a la requête AJAX, cela force de conserver le contexte de jQuery
    Non, ça force juste à attendre que le serveur ai renvoyé sa réponse pour continuer les traitements, ce que tu ne faisais manifestement pas avant.
    Il faut bien comprendre que lorsque tu fais une requête au serveur, tu n'obtiens pas de résultat instantanément comme par magie, il faut attendre que la requête soit acheminée, que le serveur travaille, qu'il envoie la réponse et que le navigateur la reçoive. Donc si pendant ce temps tu essayes d'utiliser les résultats qui ne sont pas encore arrivés, ben forcément, ça marche moins bien

    Mais cela, on ne pouvait pas le deviner tant que tu ne l'avais pas dit...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Février 2010
    Messages : 4
    Par défaut
    Merci Bovino pour ta réponse

    Citation Envoyé par Bovino Voir le message
    Bien sûr que si...


    Non, ça force juste à attendre que le serveur ai renvoyé sa réponse pour continuer les traitements, ce que tu ne faisais manifestement pas avant.
    Il faut bien comprendre que lorsque tu fais une requête au serveur, tu n'obtiens pas de résultat instantanément comme par magie, il faut attendre que la requête soit acheminée, que le serveur travaille, qu'il envoie la réponse et que le navigateur la reçoive. Donc si pendant ce temps tu essayes d'utiliser les résultats qui ne sont pas encore arrivés, ben forcément, ça marche moins bien

    Mais cela, on ne pouvait pas le deviner tant que tu ne l'avais pas dit...
    Je sais très bien que les données doivent être transmises au serveur et que le serveur doit retourné la reponse à la requête.

    Si tu regardes le code sur le POST initial, je traitais l'information retourné par le serveur sur comme suit:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $.ajax({
    	dataType:'html',
    	cache:true,
    	async:false,
    	type:'GET',
    	url:"ajax/menu.php?list",
    	success: function(r,s){
    		insertData('<li id="10">10</li> ' );
    		$('#select1').append( '<li id="A8">A8</li> ' );
    	}
    });
    Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.
    Salut,

    Jpense que tu fais une fause interprétation du problème.
    Que ca soit synchrone ou pas ca a rien avoir avec le contexte de jQuery.

    Synchrone ca veut dire que tant que ton callback est pas exécuté tu passes pas à la suite du code.
    Asynchrone ca veut dire que tu continues ton stuff et un beau jour tu executes le callback.

    Alors c'est sur que si tu fais une asynchrone
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $.ajax({
    	dataType:'html',
    	cache:true,
    	type:'GET',
    	url:"ajax/menu.php?list",
    	success: function(r,s){
    		insertData('<li id="10">10</li> ' );
    		$('#select1').append( '<li id="A8">A8</li> ' );
    	}
    });
    //et que derriere tenquilles
    $('#select1').remove();
    forcément quand ton callback success est appelé, c'est très probable que ton navigateur a eu le temps de défoncer ton select.

    Chose qui n'est pas possible en synchrone vu que tu exécutes pas $('#select1').remove();
    tant que tu n'as pas eu de callback.

    Je me souviens d'ailleurs que la synchrone fait friser le navigateur mais c'était jQuery il y a trois ans, cela dit, je vois pas cqu'ils auraient pu faire de mieux compte tenu de la nature du langage.

    Bref, il serait préférable que tu mettes ton code javascript où tu testes ton truc ET ton code html.

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Si tu regardes le code sur le POST initial, je traitais l'information retourné par le serveur sur comme suit
    Comme le fait remarquer galerien69, la question n'est pas de savoir quand les données sont intégrées à la page mais quand tu essayes de les traiter !

    Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.
    Soit parce que ton ordinateur est au-dessus d'un ancien cimetière de chats noirs indiens, soit parce que tu tentes de traiter les éléments avant que le callback ai été appelé...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#select1').append($(a) );
    tu passes un string de html ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Récupérer du HTML ajouté avec AJAX
    Par Incognito87 dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 10/12/2014, 21h58
  2. [Prototype] Evaluer un script avec Ajax.Updater
    Par razmous dans le forum Bibliothèques & Frameworks
    Réponses: 8
    Dernier message: 28/12/2009, 21h29
  3. perte de balises html avec AJAX super bizarre
    Par shadeoner dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 14/07/2009, 17h23
  4. [AJAX] faire apparaître du code HTML avec AJAX ?
    Par beegees dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 29/10/2008, 10h34
  5. impression HTML avec la librairie wxwindows
    Par farscape dans le forum Autres éditeurs
    Réponses: 1
    Dernier message: 23/12/2003, 08h47

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