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 :

JQuery et élément de page HTML ajouté via javascript


Sujet :

jQuery

  1. #1
    Membre très actif Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2014
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2014
    Messages : 146
    Par défaut JQuery et élément de page HTML ajouté via javascript
    Helloooo

    Sur une page php, j'ai un tableau html dont le nombre de ligne est défini par un paramètre de configuration que je stocke dans une base de donnée.
    Plusieurs champs par lignes, je les remplis au fur et à mesure d'un choix de titres (le tableau me sert à faire une playlist avec titre, bpm, durée et style).

    Pour le champs de titre, j'utilise une fonction que j'avais dégottée il y a longtemps, en JQuery, et qui est un "searchable dropdown menu", autrement dit, un input type text mais qui agit comme un menu déroulant <select> dont les choix dépendent de ce que je saisis dans le champ (en gros, si je tape "toto", les choix seront tous les titres contenant "toto").

    Cette fonction est à utiliser en mettant l'intégration des fichiers JQuery et le script lui même à la fin de page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     <link rel="stylesheet" href="./js/jquery-ui.min.css" type="text/css" /> 
    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.min.js"></script>	
     
    <script type="text/javascript">
    $(function() {
    	$(".autotitre").autocomplete({
    		source: "suggtitre.php",
    		minLength: 1
    	});		
    });
    </script>
    et en ajoutant ceci dans l'input :
    Jusque là , pas de souci.

    Il se peut que j'ai à rajouter une ou plusieurs lignes donc ca aussi c'est bon, via un bouton en bas du tableau :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input style="width:200px" type="button" value="Ajouter"  onclick="ajouterligne()">

    et une fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function ajouterligne(){
    nblignes++;
    playlist_table.insertAdjacentHTML('beforeend',
    '<tr><td><input type="text" name="titre'+nblignes+'" id="titre'+nblignes+'" value="" placeholder="Titre"  class="autotitre"></td></tr>');
    }
    Je n'ai mis ici que l'input qui nous intéresse, volontairement. $nblignes sert pour incrémenter l'identifiant des champs pour le ramassage des valeurs à la validation du formulaire.

    Seulement voilà, quand j'ajoute une ligne, le script de recherche précédemment décrit ne fonctionne pas. D'autres scripts qui eux sont déclenchés par des onclick etc etc, fonctionnent, mais la class 'autotitre' non . Je pense que c'est parce que lorsque la page a été chargée initialement la ligne n'existait pas et donc JQuery ne la connait pas.
    Il faudrait pouvoir relancer un scan de la page en fin de fonction d'ajout de ligne, pour prendre en compte les nouveaux éléments.

    Mais je n'ai aucune idée de 1) si c'est faisable, 2) comment faire

    Si quelqu'un a une idée pour un petit canard

    MErkouin !
    Mes recherches effectuées ne m'avaient données aucun résultat (j'avoue cependant que c 'est une demande un peu tordue lol)

  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
    il faut relancer l'init du plugin après l'ajout dynamique ...

    une autre possibilité serait de faire un delelgate sur le focusin du parent

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $('[conteneurParent]').on('focusin', '.autotitre', function(){
        $(this).autocomplete({ .../...
     
        });
    });
    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
    Membre très actif Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2014
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2014
    Messages : 146
    Par défaut
    Merci pour cette réponse rapide

    J'ai tenté le réinit du plugin en ajoutant ceci (sans trop savoir, j'ai glané cette commande sur internet) à la fin de la fonction d'ajout de ligne de tableau :
    Mais rien de mieux.

    J'ai tenté en adaptant le script en mettant playlist_table (id du tableau html) en tant que conteneur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $('[playlist_table]').on('focusin', '.autotitre', function(){
        $(this).autocomplete({
    		source: "suggtitre.php",
    		minLength: 1
        });
    });
    Mais malheureusement, pas de résultat

    Par quelle méthode je peux réinitialiser le plugin ?

    Merki

    Edit :
    Un peu au culot, j'ai ajouté ceci à la fin de la fonction d'ajout :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $(".autotitre").autocomplete({
    		source: "suggtitre.php",
    		minLength: 1
    	});
    Je ne suis pas certain que ce soit la solution la plus propre mais ça a l'air de fonctionner.

    Si il y a plus propre je reste preneur, sinon je mettrais le sujet en résolute

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 507
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 507
    Par défaut
    Citation Envoyé par Couin Voir le message
    J'ai tenté en adaptant le script en mettant playlist_table (id du tableau html) en tant que conteneur
    @SpaceFrog t'a dit ce qu'il faut faire.

    Il faut mettre le id de la table précédé d'un diez # et pas les crochets :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('#playlist_table').on(...)
    Et tu n'as pas besoin de réinitialiser le plugin à chaque fois qu'un nouvel élément .autotitre s'ajoute au DOM, parce que l'événement est attaché (par délégation) à tous les .autotitre

  5. #5
    Membre très actif Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2014
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2014
    Messages : 146
    Par défaut
    Hello,

    Merci , en effet, cela marche en appliquant ta correction

    Et plus besoin de remettre le script comme je l’avais mis à la fin de la fonction d'ajout.

    Je crois que je peux donc passer en Résolu

    Merci et bon OuiK ! (bon j'ouvre un autre sujet car un autre petit souci lol)

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/11/2015, 09h15
  2. [jQuery Mobile] Dans une page HTML en Java
    Par ib.sissoko dans le forum Composants graphiques
    Réponses: 10
    Dernier message: 04/02/2014, 09h57
  3. Cacher élément sur page HTML
    Par hostyle dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 28/01/2012, 10h05
  4. Réponses: 3
    Dernier message: 28/01/2011, 10h58
  5. recuperer un tableau sur page html securisee via macro
    Par TOTOTAR dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 16/06/2009, 04h53

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