Impossible de récupérer le contenu d'un textarea

**Maxime.mt** · 08/12/2018, 16h41

Bonjour,

Je reviens avec un nouveau problème. J'ai fait des recherches, essayé plusieurs méthode comme "find" par exemple, mais impossible de récupérer le contenu du textarea. Aucune erreur console ni réseau. Le système fonctionne niquel sur les input.
Le alert reste vide et idem en base de données, seul le champs qui correspond au textarea reste vide.

J'utilise ckeditor, peut être que ça vient de là.

Le code que j'utilise en jquery

Code js :

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
$('#ajtInf').submit(function(event) {
    event.preventDefault();
    var ref = $('#ref').val(),
     type = $('#type').val(),
     texte = $(this).find('#editor1');
    // Alert pour test du textarea
    alert(texte);
 $.ajax({
  url : 'ajtInf.php',
  type : 'POST',
  data : 'ref=' + ref + '&type=' + type + '&editor=' + texte,
  dataType : 'html',
 });
 $.ajax({
  url : 'actInf.php',
  type : 'POST',
  data : 'ref=' + ref,
  dataType : 'html',
  success : function(code_html, statut){
   $('#'+ref).html(code_html);
  },
 });
 $('#infos').css('display','none');
});

Le textarea modifié par ckeditor à l'id "editor1". En dehors de ça c'est un formulaire tout ce qu'il y a de plus banal et dont la récupération ne pose absolument aucun problème sur les autres champs.

**Watilin** · 08/12/2018, 18h48

En utilisant .find() tu obtiens l’élément textarea qui est un objet DOM (encapsulé dans un objet jQuery). Pour avoir sa valeur il faut ensuite appeler .val().

The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

texte = $(this).find('#editor1').val();

Note : à la place de alert, utilise console.log.

**Maxime.mt** · 08/12/2018, 19h10

Déjà passé par cette étape, mais toujours rien.

**psychadelic** · 09/12/2018, 00h24

Alors c'est que l'erreur est ailleurs,
_ est-ce ton id est bien unique ?
_ est-ce que utilise bien le mode strict ?
_ pourquoi tes 2 appels ajax on tous deux une virgule en trop ? ( lignes 18 et 30)
_ pourquoi ton premier appel ajax n'utilise pas de callback ? (ligne 13)
_ pourquoi tu fais 2 appels ajax en même temps dans ton submit ? (et quel est l’intérêt ? )
_ pourquoi tu utilises un formulaire alors qu’a priori tu utilise de l'ajax pour envoyer tes données ? ( => donc le formulaire ne sert à rien ? )

Le code que tu nous montre est beaucoup trop succin pour qu'on puisse se rendre compte de quoi que ce soit.

ton code, juste indenté proprement, et avec ses erreurs :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
$('#ajtInf')
.submit(function(event)
{
  event.preventDefault();
  var
    ref   = $('#ref').val(),
    type  = $('#type').val(),
    texte = $(this).find('#editor1')
  ;
  // Alert pour test du textarea
  console.log(texte);
 
  $.ajax(
  {
    url      : 'ajtInf.php',
    type     : 'POST',
    data     : 'ref=' + ref + '&type=' + type + '&editor=' + texte,
    dataType : 'html',
  });
 
  $.ajax(
  {
    url      : 'actInf.php',
    type     : 'POST',
    data     : 'ref=' + ref,
    dataType : 'html',
    success  : function(code_html, statut)
    {
      $('#'+ref).html(code_html);
    },
  });
  $('#infos').css('display','none');
});

**Maxime.mt** · 09/12/2018, 12h25

Bonjour,

Oui l'id est unique, et instauré par ckeditor (comme précisé dès le premier message), pas par moi.
Sachant que le mode strict, à ce que j'en ai compris, n'est pas supporté par tout les navigateurs, non, je ne l'utilise pas.
Pour les virgules, oublis de ma part suite à des tests, mais ça n'empêche pas le fonctionnement puisque, comme je l'ai précisé, seul le textarea est touché.
Pas besoin d'affiché quoi que ce soit puisque, encore une fois, comme précisé, ça envois des informations à un fichier php pour enregistrer des infos en BDD.
Pourquoi deux appels ? Tout simplement parce qu'ils n'appellent pas le même fichier distant vu que leur utilité n'est pas la même. Le deuxième sert à actualiser une information précise en fonction de ce que a été rajouter précédemment.
Si j'utilise un formulaire c'est que j'en ai besoin, le fait que ça passe en ajax au lieu de façon "standard" est simplement personnel et lié au fonctionnement même du site.

Le code que je montre est loin d'être succin. Il montre tout et je vais pas rajouter du code inutile, et qui alourdirai le bordel, pour te faire plaisirs. Puisque le reste n'est qu'un formulaire html et que j'ai donné les infos, à savoir l'id du "rebelle".
Je sais que ça ne vient pas de php puisque j'ai fait le test avec des infos en dur (sans variables POST) et il fonctionne très bien.

sauf si tu aimes jouer aux devinettes : on te propose une correction possible, puis tu réponds
si c'est oui, on à gagné ( mais quoi ?)
si c'est non, on recommence une nouvelle question et ainsi de suite ?

Là par contre il va falloir que tu me dises de quoi tu parle. J'ai apporté tout les détails du problème dès le premier message.
Et à la solution proposé, je dis que je l'ai déjà essayé et que ça ne fonctionne pas.

J'ai peut être un problème de code, mais toi tu ne sais tout simplement pas lire.

Pour ce qui est de l'indentation, je préfère très largement la mienne, hors ré-indentation suite au copier-coller sur le forum. La tienne je la trouve extrêmement mauvaise, illisible et illogique.

Désolé, mais quand je reçois une réponse agressive je répond sur le même ton. Surtout quand on ne peut se le permettre.
Tu ne donne pas de solution, juste des critiques à peine masqués. En prétextant que je ne donne pas toutes les infos, ce qui est faux puisque j'ai exposé le problème avec le moindre détails.

Edit : C'est confirmé, c'est bien ckeditor qui bloque. Je l'ai désactivé et le console.log me retourne bien le contenu du textarea sans rien changer d'autre.
Donc, psychadelic, pour rester sur le même ton que toi, redescend de ton pied d'estale et patiente que ta tête, ou tes chevilles ou les deux qui sait, dégonfle(nt).

Bon en dehors de ce personnage très pédant qu'est psychadelic, est ce que quelqu'un connait un bon éditeur, comme celui de Développez par exemple, pour faire ce que j'ai a faire sans qu'il ne me bloque en JS ? Si j'ai pas le choix je ferai du html/php à 100% pour cette partie, mais pour la logique d'utilisation du site, j'aimerai bien pouvoir le faire en ajax.

**psychadelic** · 09/12/2018, 14h28

Envoyé par Maxime.mt

[*]Sachant que le mode strict, à ce que j'en ai compris, n'est pas supporté par tout les navigateurs, non, je ne l'utilise pas.

le mode strict sert surtout à s'assurer que son code est cohérent, c'est un outil utile pour deboguer son code, tu peux le retirer lors du passage en prod. Cela t'aurais possiblement permis de remonter un message d'erreur dans le cas présent.

Et au moins mon message t'a réveillé pour aller chercher la raison ailleurs, comme je te l'ai écrit.

Sinon, désolé de m'être énervé (je réagis souvent comme ça quand on tourne en rond) , et j'utilise MarkDown, parce que tous les éditeurs de code soit disant wysiwyg deviennent vite obsolète sans jamais réussir à être vraiment fiable.

**badaze** · 09/12/2018, 14h45

L’id editor1 correspond à quel type de balise ? Un div ?

**Maxime.mt** · 09/12/2018, 15h53

Envoyé par psychadelic

le mode strict sert surtout à s'assurer que son code est cohérent, c'est un outil utile pour deboguer son code, tu peux le retirer lors du passage en prod. Cela t'aurais possiblement permis de remonter un message d'erreur dans le cas présent.

Et au moins mon message t'a réveillé pour aller chercher la raison ailleurs, comme je te l'ai écrit.

Sinon, désolé de m'être énervé (je réagis souvent comme ça quand on tourne en rond) , et j'utilise Visual studio Code, parce que tous les éditeurs de code soit disant wysiwyg deviennent vite obsolète sans jamais réussir à être vraiment fiable.

Pas de soucis, au moins on a mis les choses à plat

Je pensais déjà à ckeditor dès le début, Je l'ai même dit, mais avec la fatigue je n'ai pas pensé à le désactiver pour tester. J'y ai pensé ce matin en me réveillant

Je vais abandonner ajax pour cette partie je pense.

Envoyé par badaze

L’id editor1 correspond à quel type de balise ? Un div ?

A un textarea.
D'où le titre

Edit : Voila où atterrit le textarea après passage en JS par ckeditor. Me reste plus trouver un moyen de récupérer son contenu … sans bug

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false" contenteditable="true"><p>test<br></p></body>

**badaze** · 09/12/2018, 17h03

Je ne suis pas un spécialiste mais un textarea ne permettra jamais de faire un editeur wysiwyg.
Il y a donc autre chose. Ma question n'était pas aussi "débile" qu'il n'y paraissait puisque tu as vu toi aussi qu'il y a quelque chose "en dessous".

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
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>
 
  <script>
  function toto()
  {
   var a     = document.getElementById('cke_1_contents'); 
   var frame = a.firstChild;
   
   alert(frame.contentWindow.document.body.innerHTML);
  }
  </script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
 
  <input type="button" value="Clic" onclick="toto()"/>
    </body>
</html>

Nom : Capture20181209_002.JPG
Affichages : 747
Taille : 29,3 Ko

**Maxime.mt** · 09/12/2018, 17h30

Je savais que c'était une surchouche.

C'est pour ça que j'essais de récupérer le contenu désiré. Merci de ton aide, ça me donne une piste.

**NoSmoking** · 09/12/2018, 18h55

Bonjour,
effectivement CKEditor travaille avec une surcouche, le moyen d'accéder à ce qui est saisi est de passer par les méthodes mises à disposition et notamment getData(), on y accède avec CKEDITOR.instances.id_editeur.getData().

Exemple pour voir :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CKEditor getData()</title>
<script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
<style>
[id^="text"]::before {
  content: attr(id) " :";
  display: block;
  margin-top: 1em;
  font-weight: bold;
  color: #069;
}
</style>
</head>
<body>
  <h1>CKEditor <code>getData()</code></h1>
  <textarea id="editor" name="editor">Texte original</textarea>    
  <p><button id="getData()">Get Editor</button></p>
  <div id="text-getData()"></div>
  <div id="text-original"></div>
<script>
CKEDITOR.replace('editor');
document.getElementById("getData()").onclick = function() {
  document.getElementById("text-getData()").textContent = CKEDITOR.instances.editor.getData();
  document.getElementById("text-original").textContent = document.getElementById("editor").value;
}
</script>  
</body>
</html>

Tu peux également mettre à jour ta <textarea>, qui ne l'est pas naturellement, pour ne pas avoir à utiliser getData(), il te faut dans se cas mettre à jour celle-ci « automatiquement ».

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var oEdit = CKEDITOR.replace('editor');
oEdit.on("change", function(e) {
  document.getElementById("editor").value = this.getData();
});

**Maxime.mt** · 13/12/2018, 21h57

Bonsoir,

Désolé j'étais pris.
Je tente demain, j'ai pas la tête au code là, et je vous tiens au courant.

**Mikad0** · 17/04/2023, 11h24

Bonjour, cette conversation date mais elle m'a été utile pour trouver mon bug actuel. Merci

Mise à jour du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
EDITOR.replace('ra2_remarque_poids');
 
$("#formulaire").submit(function( event ) {
  event.preventDefault();
  var str = $("#formulaire").serialize();
  var editorData = CKEDITOR.instances.ra2_remarque_poids.getData(); // Récupère les données de l'éditeur CKEditor
  str += "&ra2_remarque_poids=" + encodeURIComponent(editorData); // Ajoute les données de l'éditeur au formulaire encodées correctement
 
  $.ajax({
    type: "POST",
    url: "URL DE DESTINATION",
    data: str,
.......

Bonne prog !

Impossible de récupérer le contenu d'un textarea

jQuery

Partager

Partager