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

AJAX Discussion :

Récupérer le contenu d'un textarea depuis une instance CKEDITOR


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Août 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 10
    Par défaut Récupérer le contenu d'un textarea depuis une instance CKEDITOR
    Bonjour ici !

    Petit up du sujet, je vous remercie par avance pour l'aide que vous m'apporterez.
    J'ai un petit problème pour récupérer le texte présent dans mon champs textarea tout ce passe bien sans Ckeditor
    mais dès que je le met il m'est impossible de récupérer le contenu, j'ai eu beau essayer toutes les solutions trouver
    à droite à gauche, mais je ne m'en sort pas

    le formulaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <form name="formulaire" id="monForm" action="<? echo $rootpath; ?>post.php?action=repondre&t=331" method="post">
     <textarea cols="80" rows="8" id="message" name="message"></textarea>
                            <script type="text/javascript">
                            var editor = CKEDITOR.replace( 'message', 
                            {
                                toolbar: 'MyToolbar',
                                height: '600px',
                                resize_enabled: false
                            });
                            </script>
    <input type="submit" class="btn btn-success" name="envoyer" value="Envoyer" />
    et le jquery :

    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
    $(document).ready(function() {
        // Lorsque je soumets le formulaire
        $('#monForm').on('submit', function(e) {
            e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
     
            var $this = $(this); // L'objet jQuery du formulaire
     
            // Je récupère les valeurs
            //var message = $('#message').val(); // marche sans ckeditor
            //var message =  editor.getData();
            var message = CKEDITOR.instances['message'].getData();
     
            // Je vérifie une première fois pour ne pas lancer la requête HTTP
            // si je sais que mon PHP renverra une erreur
            if(message === '') {
                alert('Les champs doivent êtres remplis');
            } else {
                // Envoi de la requête HTTP en mode asynchrone
                $.ajax({
                    url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                    type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                    data: $this.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
                    success: function(html) { // Je récupère la réponse du fichier PHP
                        alert(html); // J'affiche cette réponse
                    }
                });
            }
        });
    });
    Petite précision j'utilise CKEDITOR 4 ! Merci par avance =)

  2. #2
    Membre habitué
    Profil pro
    Inscrit en
    Août 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 10
    Par défaut
    Je viens de voir que le topic avait été déplacé, techniquement l'ajax fonctionne,
    le problème c'est de récupérer le contenu du textarea provenant de CKEDITOR =)
    Si jamais vous avez l'info j'ai eu beau tout essayé j'en suis encore au même point ...

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Août 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 10
    Par défaut
    J'ai fais un test
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var message = CKEDITOR.instances['message'].getData();
            alert(message);
    qui me retourne bien le contenu de l'instance, il y a donc effectivement un problème avec la transmission "post" des infos !

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Août 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 10
    Par défaut
    Finalement le problème venait de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     data: $this.serialize()
    il suffisait de passer les variables normalement ! solution ci-dessous ...
    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
    $('#send2').click(function(e) {
            e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
            var $this = $('#monForm'); // L'objet jQuery du formulaire
            var send2 = $(this).val();
            var message = encodeURIComponent(CKEDITOR.instances['message'].getData()); //On recupere le contenu de l'instance CKEditor
            if(message === '') {
                alert('Les champs doivent êtres remplis');
            } 
                // Envoi de la requête HTTP en mode asynchrone
                $.ajaxSetup({async: false});
                $.ajax({
                    url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                    type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                    data : 'message=' + message + '&send=' + send2,
                    success: function(data) { // Je récupère la réponse du fichier PHP
                        for ( instance in CKEDITOR.instances ){//Suppression du contenu de l'instance CKEditor
                            CKEDITOR.instances['message'].updateElement();
                            }
                            CKEDITOR.instances['message'].setData('');
                    }
                });
            });

  5. #5
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

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

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Oui faut être prudent avec l'utilisation des raccourcis. Par exemple serialize() ne transmet pas non plus les champs avec la notation tableau... Finalement cette fonction que l'on voit beaucoup en exemple ne convient que pour des utilisations très basiques.

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 20/01/2012, 22h27
  2. Lister le contenu d'un dossier depuis une applet
    Par faocode dans le forum Applets
    Réponses: 1
    Dernier message: 11/05/2007, 10h05
  3. Réponses: 5
    Dernier message: 08/12/2006, 19h02
  4. Récupérer le contenu d'un textArea sous firefox
    Par BouB dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/08/2006, 09h46
  5. Récupérer le contenu d'un input d'une Popup
    Par Lung dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/06/2006, 17h09

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