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 :

Synchronisation de résultat


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut Synchronisation de résultat
    Bonjour, j'ai un moteur de recherche j'ai bien les réponses, mais j'ai un problème de "retard" de résultat.

    lorsque je tape 3 lettres il commence à rechercher et une fois trouvé il affiche, mais si je tape une autre lettre,
    et que la précédente n'est pas terminé, je vais voir affiché le premier résultat puis le deuxième ainsi de suite , c'est déroutant ....

    quelle serait la solution pour contourner ce bug ?



    voici le code
    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    $(document).ready(function() {
        $("#find_filtre").on("change", function() {//changement du filtre
            if ($('#find_cours').val().length > 2){
                recherche();
            }
        });
        $("#find_cours").on("keyup", function() {//saisie de 3 lettre dans le champ recherche
            if ($('#find_cours').val().length > 2){
                recherche();
            }
        });
        //permet de fermer la fenêtre de recherche modal
        $("#modal_off").on("click", function() {
            $("#modal_recherche").css('display', 'none');
        })
        function recherche() {
            var motcle = $("#find_cours").val(); //recupération du mot cle
            var filtre = $('#find_filtre').val(); //filtre all par default
            $("#wait").css('display', 'block'); //faire apparaître le loading
            $("#modal_recherche").css('display', 'block');
            $("#find_cours").css('color', '#046380');
            $.ajax({
                type: 'POST',
                //url : 'prod/script/recherche/ajax_motcle.php',
                url: '/script_veto/recherche/ajax_motcle.php',
                data: {
                    motcle: motcle,
                    filtre: filtre,
                },
                success: function(data) {
                    $("#wait").css('display', 'none');
                    $('#resultat_box').html(data);
                },
            });
        }
    });
    merci d'avance pour la réponse

  2. #2
    Membre actif
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 90
    Par défaut
    Salut,

    Regarde du côté de jquery UI, il propose un widget autocomplete très simple à utiliser et performant, t'auras plus de problème de latence logiquement. Et ça évite de taper du code pour rien

    http://jqueryui.com/autocomplete/

  3. #3
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Autrement, pour faire ça très simplement :

    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    $(document).ready(function() {
        $("#find_filtre").on("change", function() {//changement du filtre
            if ($('#find_cours').val().length > 2){
                recherche();
            }
        });
        $("#find_cours").on("keyup", function() {//saisie de 3 lettre dans le champ recherche
            if ($('#find_cours').val().length > 2){
                recherche();
            }
        });
        //permet de fermer la fenêtre de recherche modal
        $("#modal_off").on("click", function() {
            $("#modal_recherche").css('display', 'none');
        })
     
        var xhr;
        function recherche() {
            var motcle = $("#find_cours").val(); //recupération du mot cle
            var filtre = $('#find_filtre').val(); //filtre all par default
            $("#wait").css('display', 'block'); //faire apparaître le loading
            $("#modal_recherche").css('display', 'block');
            $("#find_cours").css('color', '#046380');
            if (xhr != undefined) {
                 xhr.abort(); //stopper la précédente requête ajax
            }
            xhr = $.ajax({
                type: 'POST',
                //url : 'prod/script/recherche/ajax_motcle.php',
                url: '/script_veto/recherche/ajax_motcle.php',
                data: {
                    motcle: motcle,
                    filtre: filtre,
                },
                success: function(data) {
                    $("#wait").css('display', 'none');
                    $('#resultat_box').html(data);
                },
                complete : function() {
                         xhr = undefined;
                 }
            });
        }
    });

  4. #4
    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
    Citation Envoyé par Spartacusply Voir le message
    Autrement, pour faire ça très simplement :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    xhr.abort(); //stopper la précédente requête ajax
    Bonsoir

    Déclencher et annuler plusieurs transactions AJAX est une opération coûteuse, je propose de différer la recherche :

    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    var jObjFiltre = $( "#find_filtre" ),
        jObjCours = $( "#find_cours" ),
        ObjTimeout = null;
     
    function différerRechercher(){
        if ( ObjTimeout ){
     
            // debug
            //console.log( "clearTimeout" );
     
            clearTimeout( ObjTimeout );
        };
     
        ObjTimeout = setTimeout( function(){
     
            if ( jObjCours.val().length > 2 ){
     
                // debug
                //console.log( jObjCours.val(), jObjFiltre.val() );
     
                $( "#wait" ).css( 'display', 'block' );
                $( "#modal_recherche" ).css( 'display', 'block' );
                jObjCours.css( 'color', '#046380' );
     
                var jqXHR = $.post( "/script_veto/recherche/ajax_motcle.php", {
                    "motcle" : jObjCours.val(),
                    "filtre" : jObjFiltre.val(),
                });
     
                jqXHR.done( function( data, textStatus, jqXHR ){
                    // succès de la transaction, on doit traiter le contenu de data
                    console.log( data, textStatus, jqXHR );
     
                    $( "#wait" ).css( 'display', 'none' );
                    $( '#resultat_box' ).html( data );
     
                });
     
                jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
                    // échec de la transaction, gérer la catastrophe
                    console.log( jqXHR, textStatus, errorThrown );
     
                });
     
                jqXHR.always( function( jqXHR, textStatus ){
                    // la transaction est terminée
                    console.log( jqXHR, textStatus );
     
                });
            }
     
            ObjTimeout = null; // important
     
        }, 800 );
    }
     
    jObjFiltre.on( "change", différerRechercher );
     
    jObjCours.on( "keyup", différerRechercher );

    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.)

  5. #5
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut
    merci de ta réponse Odawin,

    si un résultat d'une liste de donnée j'ai déjà utiliser ceci mais là c'est du html ?

    je vais essayé de montrer ce que j'obtiens en résultat voici la requête

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    //recherche le mot clé dans le titre du module
    $sql = "SELECT id,fullname,summary FROM course WHERE  
        fullname LIKE '%" . self::$motcle . "%' OR 
        shortname LIKE '%" . self::$motcle . "%' OR
        summary LIKE '%" . self::$motcle . "%'";
    $result = self::$db->get_records_sql($sql);
    var_dump($result);

    voici ce que j'obtiens comme résultat var_dump

    array(15) { [21]=> object(stdClass)#161 (3) { ["id"]=> string(2) "21" ["fullname"]=> string(27) "S08.13" ["summary"]=> string(508) "

    Objectifs : Connaître les pricipales intoxications animales, les moyens du diagnostic et le traitement.

    Mots clefs : toxicologie,

    (Crédits : 3,8)
    " } [27]=> object(stdClass)#160 (3) { ["id"]=> string(2) "27" ["fullname"]=> string(67) "S05.01, bien-être éthique" ["summary"]=> string(697) "

    Objectifs d'enseignement : la compréhension du comportement animal et maitriser l'abord et la manipulation des principales espèces d'intérêt vétérinaire.

    Mots clefs : anatomie, physiologie

    (Crédits : 3,8)
    je ne sais pas si je vais réussir à auto compléter un ensemble html ?
    ou peut être que je dois le faire en 2 requêtes ?
    d'abord le titre du module (fullname),
    ensuite j'affiche le reste ce qu'il y a à l'intérieur du module ?

  6. #6
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut
    merci Spartacusply
    je vais testé ça ...

    ça fonctionne très bien, peut m' expliquer comment ça fonctionne ?

    j'ai pas bien saisie ,si la requête ne renvoie pas pour le moment de résultat en attendant le retour,
    on quitte avec

    mais que ce passe t'il quand la personne arrête de taper , et que la dernière réponse est envoyé en client ?

    dans cette ligne ellle pris en compte à chaque fois qu'on fait un keyup ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    complete:function(){
      xhr=undefined
    }

  7. #7
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    C'est très simple, on arrête la précédente requête ajax quand on en lance une (avec xhr.abort(), tu l'avais bien compris). Le "undefined" dans complete indique, que quand la requête ajax est terminée d'être traitée, qu'il y en a plus en cours justement.

Discussions similaires

  1. Le résultat de Print ne s'affiche pas...
    Par Red Bull dans le forum Langage
    Réponses: 9
    Dernier message: 15/06/2006, 18h56
  2. [requête]donner résultat que si + de n lignes...
    Par Titia765 dans le forum Langage SQL
    Réponses: 12
    Dernier message: 10/06/2003, 12h02
  3. Réponses: 3
    Dernier message: 18/05/2003, 00h16
  4. Réponses: 4
    Dernier message: 28/09/2002, 00h00
  5. [BDD] Enregistrer le résultat d'une requête
    Par Mowgly dans le forum C++Builder
    Réponses: 5
    Dernier message: 19/06/2002, 15h26

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