Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Generer contenu de div avec parametres

Generer contenu de div avec parametres

16 réponses
Avatar
1 connu
Bonjour,

Est il possible de lire des parametres (par ex format JSON) dans un ou plusieurs div ayant un classe spécifique ?
Le but est de remplacer au chargement les div par un autre contenu dépendant de ces paramètre.
Debutant, je viens de lire quelques pages sur la JQuery et il semble que ce serait un bon début. Voilà un pseudo code de ce que
j'aimerais faire.


Merci d'avance pour toute idée.
Pierre

<script type = "text/javascript"
src = "jquery-1.3.2.min.js"></script>

<script type = "text/javascript">
//<![CDATA[

$(init);

function init(){
// To do - lire les parametres dans chaque div avec classe MaClasse ???
processResult(data);

} // fin de init

function processResult(data){
$(".MaClasse").text("something interesting with params");
} // fin de processResults

//]]>
</script>
</head>

<body>
<div classe = "MaClasse">
{
param1 = "toto",
param2 = "titi"
}
</div>
<div classe = "MaClasse">
{
param1 = "coco",
param2 = "cici"
}
</div>
</body>
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Olivier Miakinen
Salut,

Je ne suivais pas ce fil de discussion, mais j'ai vu par hasard que
Stéphane parlait de moi, alors je viens voir si je peux être utile.


Le 28/07/2010 17:37, SAM répondait à 1 connu :

Une derniere chose, comment puis je modifier :
eval(d[n].innerHTML.replace(/(param)/g,'var $1'));





En principe, ceci est équivalent à :

eval(d[n].innerHTML.replace(/param/g,'var $&'));

pour y mettre des attributs plus significatif que param ?





Comme je n'ai pas tout lu, je ne suis pas sûr de comprendre. Si tu veux
traiter d'autres chaînes en plus de 'param', par exemple 'company' et
'product', tu peux faire comme ceci :

eval(d[n].innerHTML.replace(/(param|company|product)/g,'var $1'));

Ou bien comme cela :

eval(d[n].innerHTML.replace(/param|company|product/g,'var $&'));

Normalement c'est Olivier Miakinen le esspécialiste.



;-)

d[n].innerHTML.replace(/s([/w]+s?=)/g,'var $1')



Hum... Il y a quelques petites erreurs ici...

1) Le premier s oblige qu'il y ait un caractère blanc au début, et
supprime ce caractère. Je ne suis pas sûr que ce soit une fonctionnalité
souhaitée.

2) Le [/w] n'accepte qu'une barre oblique / ou une lettre w. Tu voulais
probablement dire [w], qui d'ailleurs est équivalent à w.

3) Il n'est pas autorisé d'avoir plus d'un caractère blanc entre le nom
de variable et le signe =. C'est peut-être un peu trop contraignant.


Je proposerais plutôt :

d[n].innerHTML.replace(/(w+s*=)/g,'var $1')

Voire :

d[n].innerHTML.replace(/w+s*=/g,'var $&')

eval(d[n].innerHTML.replace(/(company),'var company'));



eval(d[n].innerHTML.replace(/company/,'var company'));
ou :
eval(d[n].innerHTML.replace('company','var company'));
ou :
eval(d[n].innerHTML.replace(/(company)/,'var $1'));



ou :
eval(d[n].innerHTML.replace(/company/,'var $&'));


eval(d[n].innerHTML.replace(/(product),'var product'));



eval(d[n].innerHTML.replace(/product/,'var product'));
ou :
eval(d[n].innerHTML.replace('product','var product'));
ou :
eval(d[n].innerHTML.replace(/(product)/,'var $1'));



Idem.

ou d'un coup, d'un seul :

eval(d[n].innerHTML.replace(/(product|company|width)/g,'var $1'));



Ah ben oui, c'est ce que je proposais plus haut.


Cordialement,
--
Olivier Miakinen
Avatar
SAM
Le 7/28/10 8:24 PM, Olivier Miakinen a écrit :
Salut,

Je ne suivais pas ce fil de discussion, mais j'ai vu par hasard que
Stéphane parlait de moi, alors je viens voir si je peux être utile.



Ben oui, sans nul doute.

Le 28/07/2010 17:37, SAM répondait à 1 connu :
Normalement c'est Olivier Miakinen le esspécialiste.



;-)

d[n].innerHTML.replace(/s([/w]+s?=)/g,'var $1')



Hum... Il y a quelques petites erreurs ici...

1) Le premier s oblige qu'il y ait un caractère blanc au début, et
supprime ce caractère. Je ne suis pas sûr que ce soit une fonctionnalité
souhaitée.



Heu ... l'idée est de
- supprimer les blancs (y compris nr)
trouvés avant un alpha-numérique
et ... je ne sais + pourquoi je voulais les supprimer :-(
ni pourquoi, finalement, je continue à le faire pou un seul
- garder les :
- alpha-numériques suivants ce(s) blanc(s)
- l'espace ou les espaces suivants si existants
- le signe
2) Le [/w] n'accepte qu'une barre oblique / ou une lettre w. Tu voulais
probablement dire [w], qui d'ailleurs est équivalent à w.



Oui,
lors de mes bricolages j'avais plusieurs caractères entre ces [ ]
... oublié d'enlever ces crochets ...

3) Il n'est pas autorisé d'avoir plus d'un caractère blanc entre le nom
de variable et le signe =. C'est peut-être un peu trop contraignant.



Je veux bien que les gensses fassent des erreurs de frape et tirent à la
rigaud(*) des espaces mais ... heureusement, le html n'en montrera qu'un
au maximum
donc ... mon truc-là est OK ;-) 0 ou 1 espace suivi de
Je proposerais plutôt :

d[n].innerHTML.replace(/(w+s*=)/g,'var $1')



vi, ça marche aussi. (faisait parti de mes bricolages)

ou d'un coup, d'un seul :

eval(d[n].innerHTML.replace(/(product|company|width)/g,'var $1'));



Ah ben oui, c'est ce que je proposais plus haut.



Sauf que c'est de la triche !
Toi, tu vois tt de suite comment triturer une expression régulière ;-)







(*) rigaud : ça doit être une espèce de mitraillette pour typographe ?
à ne pas confondre avec la cloche de la cathédrale de Rouen
offerte par Rigaud



(Vx.Fr. XVIe : à tire-larigot, XVIIIe : à tirelarigot, à foison,
XVIe : le larigot est une flûte
rego = gorge, gosier)
--
sm
Avatar
1 connu
merci à vous deux,


J'ai testé :
eval(d[n].innerHTML.replace(/(product|company|width|height)/g,'var $1'));
et autres variantes.
Ca marche très bien sur FF mais pas du tout avec IE 7 !

Je me suis lancé dans une version plus verbeuse mais qui marche sur les 2 browsers.
Il s'agit de faire faire une boucle sur chaque ligne de parametres et eval quand la ligne n'est pas vide.

var chaine = d[n].innerHTML;
var regLigne=new RegExp("[n]", "g");
var arrayLigne=chaine.split(regLigne);
for (var j=0; j<arrayLigne.length; j++) {
if (arrayLigne[j] != '')
eval(arrayLigne[j]);
Avatar
SAM
Le 7/29/10 12:05 PM, 1 connu a écrit :
merci à vous deux,


J'ai testé :
eval(d[n].innerHTML.replace(/(product|company|width|height)/g,'var $1'));
et autres variantes.
Ca marche très bien sur FF mais pas du tout avec IE 7 !



Y nous casse les pieds cet IE !

alorssse,

======= cas (1) ================== ou bien tu arrives à ce que tes webmestres arrivent à écrire sans erreur
et ils mettent (espaces facultatifs de part et d'autre des =):

html :

<div class="pub">
var company= 'toto';
var product = 'titi';
var width='150';
</div>

JS :

function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--)
if(d[n].className.indexOf('pub')>=0)
{
// évaluation en JavaScript du texte récupéré
eval(d[n].innerHTML);
// modification du contenu du div
d[n].innerHTML = '<iframe src="trucMachin.php?company=' +
company + '&product=' + product + '&width='+ width +
'" class="pub"></iframe>';
}
}

====== cas (2) ================= Peut-être mieux :

html :

<div class="pub">
company= 'toto'
product = 'titi'
width='150'
</div>

JS :

function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length,
company, // on déclare les variables des params
product,
width;
while(n--)
if(d[n].className.indexOf('pup')>=0)
{
// évaluation en JavaScript du texte récupéré
eval(d[n].innerHTML.replace(/'[^w;]/g,'';'));
// modification du contenu du div
d[n].innerHTML = '<iframe src="trucMachin.php?company=' +
company + '&product=' + product + '&width='+ width +
'" class="pub"></iframe>';
}
company=product=width=null; // pour IE, des fois que sa mémoire...
}


Devrait fonctionner avec :
- oubli d'un param
- espace de part et d'autre de - ; ou non en fin de ligne
(et avec ou non espace avant ce ;)
- ligne(s) supplémentaire(s) entre les dires de params
(vérifié IE et Fx)

Je me suis lancé dans une version plus verbeuse mais qui marche sur les 2 browsers.
Il s'agit de faire faire une boucle sur chaque ligne de parametres et eval quand la ligne n'est pas vide.

var chaine = d[n].innerHTML;



============ cas (3) ====== sans rien changer au reste:

html :

<div class="pub">
company= 'toto'
product = 'titi'
width='150'
</div>


voici qui fonctionne avec IE.6

function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--)
if(d[n].className.indexOf('zuu')>=0)
{
// ajout du mot var devant chaque paramètre
var scrpt = d[n].innerHTML.replace(/(product|company|width)/g,
'var $1');
// évaluation en JavaScript du texte récupéré
// on ajoute un ; à la fin de chaque instruction pour IE
// qui n'a pas capté les retours de lignes
eval(scrpt.replace(/'[^w]/g,'';'));
// modification du contenu du div
d[n].innerHTML = '<iframe src="truc.php?company=' +
company + '&product=' + product + '&width='+ width +
'" class="pub"></iframe>';
}
}



Mébon, encore une fois, ce "truc" (1 et 3) est risqué.
À la moindre erreur de frape ça va merder !
Il faudrait au moins glisser qques conditions pour échapper aux erreurs.

Le cas (2) permet de continuer même si aucun paramètre n'est donné ou si
qques espaces inutiles sont glissés (mais pas entre les ' ') ou si les ;
sont omis.

Au cas 3 on introduit le mot 'var' comme dans méthodes précédentes,
pour que les variables restent dans la fonction.

Au cas 2, les variables (internes à la fonction) sont d'abord déclarées.
Ensuite on tente de les valoriser à partir du contenu du div.
Donc si oubli d'1 param, pas grave (sauf pour le php ?)

--
sm
Avatar
1 connu
Y nous casse les pieds cet IE !


Tu peux le dire

Super, merci pour votre patience avec un débutant js. Ca marche super avec la version 2!

Pierre
Avatar
SAM
Le 7/29/10 3:09 PM, 1 connu a écrit :

Super, merci pour votre patience avec un débutant js. Ca marche super avec la version 2!



Bon, tant mieux.
À voir si ça marchera aussi bien quand utilisé par les "clients" ?


eval ( d[n].innerHTML.replace(/'[^w;]/g,'';') );


replace(/'[^w;]/g, '';')

à gauche de la virgule: l'expression régulière de ce qu'on cherche

/'[^w;]/
les / sont pour "encadrer" la RegExp
'[^w;]
le caractère ' suivit de n'importe quoi qui ne soit pas
- un alpha-numérique (a à z et 0 à 9 et _)
- ou un point-virgule
[^w;] --> non w ou ;
g --> chercher tous
i --> on peut l'ajouter ici pour aussi attraper les majuscules

à droite de la virgule: la chaine de remplacement, soit: ';

Donc, au final, on obtient la chaine :

- avec Fx :
company= 'toto';
product = 'titi';
width='150';

- avec IE :
company= 'toto'; product = 'titi'; width='150';

que l'on va faire "évaluer"
(c'est comme si tout ça était écrit dans un script JS)

Au passage, ce serait bien de ne pas utiliser le mot 'width' comme nom
de variable.


--
sm
1 2