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)

---