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

  1. #1
    Membre du Club
    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 :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    class='autotitre'


    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)
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  2. #2
    Rédacteur/Modérateur

    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 !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre du Club
    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 :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    initializePlugins();

    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
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  4. #4
    Membre émérite
    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 du Club
    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)
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr