Document.querySelector: '#categories_description[1]' is not a valid selector

Bonjour,

J'ai une erreur qui apparait dans en texarea pour un affichage multilangue. Il s'agit d'un wysiwyg ckEditor 5.
Je ne suis pas du bon en js et donc ce que jecomprends c'est qu'il n'aime pas dans le # avec un array (description[1])

Une erreur est créèe dans la console .

Citation:

---

Document.querySelector: '#categories_description[1]' is not a valid selector

---

Mon code

Code:

---

1 2 3

for ($i = 0, $n = \count($languages); $i < $n; $i++) { $name = 'categories_description[' . $languages[$i]['id'] . ']'; echo HTML::textAreaCkeditor($name, 'soft', '750', '300', (isset($categories_description[$languages[$i]['id']]) ? str_replace('& ', '&amp; ', trim($categories_description[$languages[$i]['id']])) : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $languages[$i]['id'])), 'id="' . $name . '"'); ?>

---

le code dans ckeditor

Code:

---

1 2 3 4 5

ClassicEditor .create(document.querySelector('#" . HTML::output($name) . "') , { toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help'] } ) ....

---

le probléme vient de ce code :

Code:

---

document.querySelector('#" . HTML::output($name)')

---

qui n'accepte pas l'array = #categories_description[1]

J'ai essayé ce ci mais cela ne fonctionne pas aussi

Code:

---

1 2 3 4 5 6

$id = HTML::output($name); ====> categories_description[1]   ClassicEditor .create(document.querySelector('#{$id}') , { toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help'] } )

---

Ce code est essentiel sinon je ne pourrais pas enregistrer les donnéesde l'area en fonction de la langue : categories_description[1] et donc l'id de l'area doit etre le meme categories_description[1] (approche similaire)

Votre aide est la bienvenue car je suis bloqué

Merci.

Bonjour,
mais pourquoi utiliser document.querySelector alors qu' il existe document.getElementById qui lui fera le job comme il faut.

Tu peux y arriver mais dans ce cas il te faut échapper certains caractères comme [ et ] qui ont une application spéciale en CSS.
Soit :

Code:

---

<div id="array[1]">............</div>

---

on peux récupérer avec

Code:

---

1 2 3 4 5 6

// c'est simple console.log(document.getElementById("array[1]")); // cela se corse console.log(document.querySelector("#array\\[1\\]")); // presque illisible console.log(document.querySelector("#array\\005B\\0031\\005D"));

---

à noter qu'en CSS il faudra écrire

Code:

---

1 2 3 4

/* pour prise en compte CSS */ #array\[1\] { background: #DEF; }

---

De plus as-tu besoin d'une telle ID, côté serveur tu as besoin d'un name pas d'une id.

document.getElementById ne fonctionne pas du tout

donc j'ai rèussi à avoir le meme id

Code:

---

1 2 3 4 5 6

for ($i = 0, $n = \count($languages); $i < $n; $i++) { $name = 'categories_description[' . $languages[$i]['id'] . ']'; //Ajout $ckeditor_id = str_replace('[', '', $value); $ckeditor_id = str_replace(']', '', $ckeditor_id); echo HTML::textAreaCkeditor($name, 'soft', '750', '300', (isset($categories_description[$languages[$i]['id']]) ? str_replace('& ', '&amp; ', trim($categories_description[$languages[$i]['id']])) : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $languages[$i]['id'])), 'id="' . $ckeditor_id . '"'); ?>

---

puis dans ma fonction

Code:

---

1 2 3 4 5 6 7

$ckeditor_id = str_replace('[', '', $name); $ckeditor_id = str_replace(']', '', $ckeditor_id);   ClassicEditor .create(document.querySelector('#{$ckeditor_id}') , { toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help'] } )

---

Ce qui me permet d'avoir la meme valeur : categories1 pour la premiére langue et categories2 pour la deuxiéme langue

Mais la console me donne cette erreur :

Citation:

---

CKEditorError: can't convert null to object
Read more: https://ckeditor.com/docs/ckeditor5/...rror-can't convert null to object
init datacontroller.js:301
decorate observablemixin.js:258
fire emittermixin.js:200
t observablemixin.js:262
create classiceditor.js:206
promise callback*create/< classiceditor.js:206
create classiceditor.js:200
<anonymous> index.php:413
index.php:588:13
<anonyme> http://localhost/clicshopping_test/C...th=&cID=14:588
(Asynchrone : promise callback)
<anonyme> http://localhost/clicshopping_test/C...th=&cID=14:587

---

qui correspond à ca

Code:

---

1 2	.catch(error => { console.error( error );

---

J'ai aussi testé en dur

Code:

---

.create(document.querySelector('#{$ckeditor_id}') , {

---

par

Code:

---

.create(document.querySelector('#categories1') , {

---

cela fonctionne trés bien.


une idée ?

Merci

Citation:

---

document.getElementById ne fonctionne pas du tout

---

même au siècle dernier cela fonctionnait très bien :mrgreen:

Citation:

---

une idée ?

---

regarde le code HTML généré, Ctrl + U, c'est souvent plein d'enseignements !

trouvé :)

Code:

---

document.getElementById(description1)

---

et non

Code:

---

document.getElementById(#description1)

---