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 :

Textarea avec déjà un id, name, class présents


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de dancom5
    Homme Profil pro
    Inscrit en
    Janvier 2010
    Messages
    808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56

    Informations forums :
    Inscription : Janvier 2010
    Messages : 808
    Par défaut Textarea avec déjà un id, name, class présents
    Bonjour.

    Le but est lorsque j'écris quelque chose, un mot apparaisse dans la page que le texte est modifié.
    Si j'écris, un mot doit apparaitre et si je recul (backspace), ce mot disparait.
    Sur le site de test, ça marche bien mais pas dans mon code avec ckeditor. Si quelqu'un a une astuce,
    j'aimerais bien la connaître. Voici une démo:

    DEMO

    J'utilise présentement un ID, un NAME et une CLASS dans mon textarea:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <textarea id="contents" class="ckeditor" type='text' name='contenu'><?=$contenu?></textarea>
    Mais, je cherche à ajouter ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <p id="buttonId" style="display:none">à sauvegarder</p>
     
    var button = $("#buttonId");
    $("textarea").on('input', function (e) {
        if (e.target.value === '') {
            // Textarea has no value
            button.hide();
        } else {
            // Textarea has a value
            button.show();
        }
    });
    Le problème, c'est que le ID, Class et Name sont déjà utilisé par CKEDITOR et je n'obtiens pas le résultat souhaité.

  2. #2
    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 : 75
    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
    Il faut apprendre à se servir de l'API de CKEditor. Je ne connaissais pas, mais après une courte recherche, j'obtiens le résultat souhaité.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <textarea name="editor1" id="editor1" rows="10" cols="80">
      Texte quelconque
    </textarea>
    <button id="btn">Go</button>

    Code javascript : 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
    $( window ).load( function(){
     
      // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
     
      /*
       * Replace the <textarea id="editor1"> with a CKEditor
       * instance, using default configuration.
       */
      var editor = CKEDITOR.replace( 'editor1' );
     
      // The "change" event is fired whenever a change is made in the editor.
      editor.on( 'change', function( evt ) {
          // getData() returns CKEditor's HTML content.
     
          if ( evt.editor.getData().length == 0 ){
            $( "#btn" ).fadeOut();
          } else {
            $( "#btn" ).fadeIn();
          }
      });

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

  3. #3
    Membre éclairé Avatar de dancom5
    Homme Profil pro
    Inscrit en
    Janvier 2010
    Messages
    808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56

    Informations forums :
    Inscription : Janvier 2010
    Messages : 808
    Par défaut
    J'ai testé dans mon serveur de développement et aussi sur https://jsfiddle.net/ et ça ne fonctionne pas.

    J'ai mis ===0 au lieu de ==0 à cause que jsfiddle indiquait une erreur. Sans résultats.


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    
    <textarea name="editor1" id="editor1" rows="10" cols="80">
      Texte quelconque
    </textarea>
    <button id="btn">Go</button>
    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
     
    $(window).load(function () {
     
        // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
     
        /*
         * Replace the <textarea id="editor1"> with a CKEditor
         * instance, using default configuration.
         */
        var editor = CKEDITOR.replace('editor1');
     
        // The "change" event is fired whenever a change is made in the editor.
        editor.on('change', function (evt) {
            // getData() returns CKEditor's HTML content.
     
            if (evt.editor.getData().length === 0) {
                $("#btn").fadeOut();
            } else {
                $("#btn").fadeIn();
            }
        });
    });

  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 : 75
    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


    Le code de ma page de test, pour le tester il suffit de le copier-coller dans un nouveau fichier JS :
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1.0">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
      <style>
     
     
      </style>
    </head>
    <body>
     
      <textarea name="editor1" id="editor1" rows="10" cols="80">
        Texte quelconque
      </textarea>
      <button id="btn">Go</button>
     
     
      <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.4/ckeditor.js"></script>
      <script>
        "use strict";
     
                    $( function(){ // forme abrégée de $(document).ready( function( ){
          
                    });
        
        $( window ).load( function(){
          
          // CKEditor API : http://docs.ckeditor.com/#!/api/CKEDITOR.editor
          
          /*
           * Replace the <textarea id="editor1"> with a CKEditor
           * instance, using default configuration.
           */
          var editor = CKEDITOR.replace( 'editor1' );
          
          // The "change" event is fired whenever a change is made in the editor.
          editor.on( 'change', function( evt ) {
              // getData() returns CKEditor's HTML content.
              
              if ( evt.editor.getData().length == 0 ){
                $( "#btn" ).fadeOut();
              } else {
                $( "#btn" ).fadeIn();
              }
          });
          
        });
      </script>
    </body>
    </html>

    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 éclairé Avatar de dancom5
    Homme Profil pro
    Inscrit en
    Janvier 2010
    Messages
    808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56

    Informations forums :
    Inscription : Janvier 2010
    Messages : 808
    Par défaut
    A temps nornal, ça marche mais vu que le ID est déjà utilisé par un autre javascript, ça ne fonctionne pas.

    C'était l'objet principale de ma question au début.

    Pas grave, j'ai trouver une autre solution de remplacement.

  6. #6
    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 : 75
    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
    Un ID doit être unique dans la page web.

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

  7. #7
    Membre éclairé Avatar de dancom5
    Homme Profil pro
    Inscrit en
    Janvier 2010
    Messages
    808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56

    Informations forums :
    Inscription : Janvier 2010
    Messages : 808
    Par défaut
    Donc, si je mets un truc pour ajouter un effet avec jquery dans le textarea alors que le ID utilise un autre truc avec jquery, je ne pourrai pas ajouter cet effet?

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

Discussions similaires

  1. [POO] Instancier un objet avec le nom de la classe
    Par shinchun dans le forum Langage
    Réponses: 4
    Dernier message: 08/06/2006, 13h44
  2. empecher l'ecriture dans un textarea avec la souris
    Par Battosaiii dans le forum Composants
    Réponses: 9
    Dernier message: 14/12/2005, 15h31
  3. [POO] Un peu de mal avec les membres de ma classe
    Par Spack dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/11/2005, 03h41
  4. Réponses: 4
    Dernier message: 26/09/2005, 14h27

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