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>

10 réponses

1 2
Avatar
SAM
Le 7/26/10 11:47 AM, 1 connu a écrit :
Bonjour,

Est il possible de lire des parametres (par ex format JSON) dans un ou plusieurs div ayant un classe spécifique ?



sous la forme proposée dans l'ébauche de code donnée
(où les divs contiennent du code html et non des objets (à la JSON))
--> à mon idée : non.

Le but est de remplacer au chargement les div par un autre contenu dépendant de ces paramètre.



Je n'en vois pas l'intéret, autant faire charger directement le code voulu.

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.



à mon idée, et si je comprends le but à atteindre,
Le JS doit spécifier les nouveaux params
puis les appliquer au Json de remplissage des divs
ensuite on peut remplir les divs en fonction des nouveaux critères




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);



qu'est-ce que pourraient être ces "paramètres" ?
- attributs particuliers de la balise div ?
- sous-éléments du div ?
par exemple bouton ou case à cocher
pourquoi reprendre après coup le contenu des divs s'il n'y a pas eu
action du visiteur ?
Il doit être plus simple d'envoyer la page avec les bons contenus des divs.


} // 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>





<html>
<head>
<style type="text/css">
.class1 { display: none; color: red }
.vu .class2 { display: none }
.vu .class1 { display: block }
</style>
<script type="text/javascript">
function balancier() {
var d = this.parentNode;
while(d.tagName != 'DIV') d = d.parentNode;
d.className = d.className ==''? 'vu' : '';
}
window.onload = function() {
var b = document.getElementsByTagName('BUTTON'),
n = b.length;
while(n--) b[n].onclick = balancier;
}
</script>
</head>
<body>
<div>
<p><button>interchanger</button>
<div class="class1">
Je suis caché
</div>
<div class="class2">
Je suis vu
</div>
</div>
<div>
<div class="class1">
Je suis caché
</div>
<div class="class2">
Je suis vu
</div>
<p><button>interchanger</button>
</div>
<div>
<div class="class1">
Je suis caché
</div>
<p><button>interchanger</button>
<div class="class2">
Je suis vu
</div>
</div>
</body>
</html>
Avatar
1 connu
"SAM" a écrit dans le message de news:
4c4da099$0$2976$
Le 7/26/10 11:47 AM, 1 connu a écrit :
Bonjour,

Est il possible de lire des parametres (par ex format JSON) dans un ou plusieurs div ayant un classe spécifique ?



sous la forme proposée dans l'ébauche de code donnée
(où les divs contiennent du code html et non des objets (à la JSON))
--> à mon idée : non.



Voila qui est clair. Tans pis merci.

Le but est de remplacer au chargement les div par un autre contenu dépendant de ces paramètre.



Je n'en vois pas l'intéret, autant faire charger directement le code voulu.



Je propose aux clients de mon service de mettre des sortes d'"encart" (un peu comme les pub ou les votes ) dans leur propre site.
Je veux que ca soit le plus simple possible à parametrer. Avec une reférence sur mon code JS dans l'entete, ils pourront mettre 1
ou plusieurs encarts où ils voudront.
Il faut parametrer ces encarts pour en connaitre le contenu à envoyer par mon serveur.
L'idée est qu'au moment où un visiteur charge la page de mon client, le js modifie le div en un <iframe> avec un url dépendant des
parametres et pointant vers mon serveur qui presentera le service ad hock.
Bref, remplacer un truc simple à gérer par mon client :
<div classe = "MaClasse">
{
param1 = "toto",
param2 = "titi"
}
par quelque chose de plus complexe :

<iframe>
allowtransparency="true" width="50%" height="150" noresize scrolling="auto" marginheight="0" marginwidth="0"
src="http://MonServeur/MonAppli/?param1=toto&param2=titi">
</iframe>

Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?


Merci
Pierre
Avatar
SAM
Le 7/26/10 5:21 PM, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4c4da099$0$2976$
Le 7/26/10 11:47 AM, 1 connu a écrit :
Bonjour,

Est il possible de lire des parametres (par ex format JSON) dans un ou plusieurs div ayant un classe spécifique ?


sous la forme proposée dans l'ébauche de code donnée
(où les divs contiennent du code html et non des objets (à la JSON))
--> à mon idée : non.



Bref, remplacer un truc simple à gérer par mon client :
<div classe = "MaClasse">
{
param1 = "toto",
param2 = "titi"
}
par quelque chose de plus complexe :

<iframe>
allowtransparency="true" width="50%" height="150" noresize scrolling="auto" marginheight="0" marginwidth="0"
src="http://MonServeur/MonAppli/?param1=toto&param2=titi">
</iframe>

Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?



<div class="pub toto titi"></div>
<div class="pub tata tutu">la pub tata+tutu ici</div>


JS :
===
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length,
params;
while(n--) if(d[n].className.indexOf('pub')>=0) {
params = d[n].className.split(' ');
pub(d[n],params);
}
}
function pub (quoi, params) {
quoi.innerHTML = '<iframe src="http://MonServeur/MonAppli/?param1=' +
params[1] + '&param2=' +params[2]+ '" class="pub"></iframe>';
}
window.onload = init;


Ne reste qu'à réaliser les css
div.pub { }
et
iframe.pub ( }

--
sm
Avatar
SAM
Le 7/26/10 6:01 PM, SAM a écrit :
Le 7/26/10 5:21 PM, 1 connu a écrit :

Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?



<div class="pub toto titi"></div>



Autres solutions :
(mais le code HTML est, à mon sens, trop JS et prétexte à erreurs)

HTML (1) :
=========
<div class="pub">
param1= 'toto'
param2= 'titi'
</div>

JS (1) :
=======
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--)
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML.replace(/(param)/g,'var $1'));
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
param1 + '&param2=' + param2 + '" class="pub"></iframe>';
}
}
window.onload = init;




HTML (2) :
=========
<div class="pub">
var params = {
param1: 'toto',
param2: 'titi'
};
</div>


JS (2) :
=======
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--) {
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML);
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
params.param1 + '&param2=' + params.param2 +
'" class="pub"></iframe>';
}
}
window.onload = init;



--
sm
Avatar
1 connu
Bonjour,


J'ai réussi à lire un encart du style :

<div class = "output">
{
"company": "Nestlé",
"product": "Test accent éàèç"
}
</div>

avec une adaptation de ton code js en parsant le contenu innerHTML au format JSON :

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

function init() {
var d = document.getElementsByTagName('div'),
n = d.length,
while(n--) if(d[n].className.indexOf('output')>=0) {
var textJSON = d[n].innerHTML;
var obj = JSON.parse(textJSON ); // marche pas dans IE
//var obj = jQuery.parseJSON(textJSON); // marche pas du tout
pub(d[n],obj);
}
}
function pub (quoi, obj) {
quoi.innerHTML = '<iframe allowtransparency="true" width="50%" height="150" noresize scrolling="auto" marginheight="0"
marginwidth="0" src="http://MonDomain/MonApp?company=' +encodeURIComponent(obj.company) + '&product='
+encodeURIComponent(obj.product)+'></iframe>';
}
window.onload = init;
//]]>
</script>


1 ier problème : JSON.parse(textOrig) marche avec Firefox mais pas avec IE
J'ai essayé jQuery.parseJSON(json) sans succès !

2ieme problème :

J'aimerais, toujours pour faire simple pour mes clients, ne faire qu'une seule reference dans leurs pages du style :


<script type = "text/javascript" src = "http://MonDomain/MonCode.js"></script>

Est ce possible y compris avec le mecanisme d'init + evt. une librairie exterieure comme jQuery ?

D'avance merci



Pierre
Avatar
1 connu
Super, tu reponds à mes questions avant que je les pose !

Ca à l'air de résoudre mes problèmes (l'autre post).

Je teste ca.

Merci

"SAM" a écrit dans le message de news:
4c4fe74d$0$27578$
Le 7/26/10 6:01 PM, SAM a écrit :
Le 7/26/10 5:21 PM, 1 connu a écrit :

Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?



<div class="pub toto titi"></div>



Autres solutions :
(mais le code HTML est, à mon sens, trop JS et prétexte à erreurs)

HTML (1) :
========= >
<div class="pub">
param1= 'toto'
param2= 'titi'
</div>

JS (1) :
======= >
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--)
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML.replace(/(param)/g,'var $1'));
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
param1 + '&param2=' + param2 + '" class="pub"></iframe>';
}
}
window.onload = init;




HTML (2) :
========= >
<div class="pub">
var params = {
param1: 'toto',
param2: 'titi'
};
</div>


JS (2) :
======= >
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--) {
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML);
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
params.param1 + '&param2=' + params.param2 +
'" class="pub"></iframe>';
}
}
window.onload = init;



--
sm
Avatar
1 connu
Merci, j'ai pu faire marcher la version 1 :

div class="pub">
param1= 'toto'
param2= 'titi'
</div>

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

pour y mettre des attributs plus significatif que param ?

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

J'ai tenté :
eval(d[n].innerHTML.replace(/(company),'var company'));
eval(d[n].innerHTML.replace(/(product),'var product'));
mais non !

Merci
Pierre


"SAM" a écrit dans le message de news:
4c4fe74d$0$27578$
Le 7/26/10 6:01 PM, SAM a écrit :
Le 7/26/10 5:21 PM, 1 connu a écrit :

Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?



<div class="pub toto titi"></div>



Autres solutions :
(mais le code HTML est, à mon sens, trop JS et prétexte à erreurs)

HTML (1) :
========= >
<div class="pub">
param1= 'toto'
param2= 'titi'
</div>

JS (1) :
======= >
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--)
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML.replace(/(param)/g,'var $1'));
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
param1 + '&param2=' + param2 + '" class="pub"></iframe>';
}
}
window.onload = init;




HTML (2) :
========= >
<div class="pub">
var params = {
param1: 'toto',
param2: 'titi'
};
</div>


JS (2) :
======= >
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length;
while(n--) {
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML);
d[n].innerHTML = '<iframe src="tables-emty_cells.htm?param1=' +
params.param1 + '&param2=' + params.param2 +
'" class="pub"></iframe>';
}
}
window.onload = init;



--
sm
Avatar
Pascal
1 connu a écrit :
Je propose aux clients de mon service de mettre des sortes d'"encart" ( un peu comme les pub ou les votes ) dans leur propre site.
Je veux que ca soit le plus simple possible à parametrer. Avec une re férence sur mon code JS dans l'entete, ils pourront mettre 1
ou plusieurs encarts où ils voudront.
Il faut parametrer ces encarts pour en connaitre le contenu à envoye r par mon serveur.
L'idée est qu'au moment où un visiteur charge la page de mon client , le js modifie le div en un <iframe> avec un url dépendant des
parametres et pointant vers mon serveur qui presentera le service ad ho ck.
Bref, remplacer un truc simple à gérer par mon client :



Bonjour,

Il y a des chances pour que des problèmes d'une autre nature soient
découverts côté serveur, car on a là affaire à un classique de la
gestion des encarts publicitaires sur le Web, et ce n'est jamais aussi
simple qu'on le croit.

Si tu veux standardiser tout ça, je te conseille vivement d'utiliser un
système d'adserving (le serveur dédié s'appelle un adserver).
Il y en a un, gratuit (à la base) et opensource, qui a maintenant une
place de choix sur le marché : OpenX [http://www.openx.org/].
Il peut être installé sur un serveur propriétaire, ou en hébergem ent
chez OpenX.

Ce que tu donnes comme paramètres à tes clients s'appellent, dans le
jargon du métier (car s'en est un), des "tags d'invocation".
En principe, c'est un code 100% javascript que tu envoies aux clients
pour que leur Webmaster le recopie à l'endroit où l'encart doit appar aître.
Ceci explique pourquoi la plupart de ces tags utilisent la méthode
"document.write()" pour générer le code, balise SCRIPT comprise, à
l'endroit indiqué.

Pour indication, ces systèmes sont capables de gérer plusieurs
publicités sur un même encart, de limiter le nombre de vues par
internaute, de contourner les problèmes de cache (client et serveur), d e
fournir des statistiques très détaillées sur le rendu de chaque
campagne, etc.
Bref, tout ce qu'il faut pour ne pas réinventer la roue !

Cordialement,
Pascal
Avatar
1 connu
"Pascal" a écrit dans le message de news: i2p11i$50u$
Ce que tu donnes comme paramètres à tes clients s'appellent, dans le jargon du métier (car s'en est un), des "tags d'invocation".
En principe, c'est un code 100% javascript que tu envoies aux clients pour que leur Webmaster le recopie à l'endroit où l'encart
doit apparaître.
Ceci explique pourquoi la plupart de ces tags utilisent la méthode "document.write()" pour générer le code, balise SCRIPT comprise,
à l'endroit indiqué.



Je retiens l'idée. Je ne savais pasqu'on pouvait mettre un script n'importe où dans le body !
Un script avec des variables representants les tags d'invocation que pourra changer le webmaster et le tour est joué !
Le voie suivie avec Sam me semble quand même plus simple pour le webmaster ...

Merci pour ces infos.

Pierre
Avatar
SAM
Le 7/28/10 11:14 AM, 1 connu a écrit :
Merci, j'ai pu faire marcher la version 1 :

div class="pub">
param1= 'toto'
param2= 'titi'
</div>

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



Un testeur d'expressions régulières :
<http://stephane.moriaux.pagesperso-orange.fr/truc/js_regexp_testeur_om>
Tous mes marques-pages chez MDC sont HS !
y a plus rien qui fonctionne là-bas, même leur "search" ne trouve pas
'RegExp' ... :-( qui pourtant est ici :
<https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp>
ou ici en Fr mais ...
<https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/RegExp>

pour y mettre des attributs plus significatif que param ?



Normalement c'est Olivier Miakinen le esspécialiste.

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

ex:



Houch!
de piouz en piouz compliqué !
et à la moindre erreur de frappe (comme l'oubli d'un param)
ça va merder

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



avec :
function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length,
params;
while(n--)
if(d[n].className.indexOf('pub')>=0)
{
eval(d[n].innerHTML.replace(/s([/w]+s?=)/g,'var $1'))
d[n].innerHTML = '<iframe src="collection.htm?company=' +
company + '&product=' + product + '&width=' + width +
'" class="pub"></iframe>';
}
}
window.onload = init;


J'ai tenté :



Pourquoi changer le mode d'écriture ?
(rajouter des ( ) ou oublier des /)

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'));

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'));

ou d'un coup, d'un seul :

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

mais non !


Pour sûr ! ;-)


============ autre idée =========== peut-être plus facile ? :
(bien que ne supportant aucune erreur, même pas une ',')

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

et pour la fonction :

function init() {
var d = document.getElementsByTagName('DIV'),
n = d.length,
params;
while(n--)
if(d[n].className.indexOf('zuu')>=0)
{
params = d[n].innerHTML.replace(/s*(?='w)/g,'');
params = params.replace(/^s+|s*$/g,'');
params = params.replace(/s+/g,'&');
params = params.replace(/'/g,'');
d[n].innerHTML = '<iframe src="maPub.php?' + params +
'" class="pub"></iframe>';
}
}
window.onload = init;


--
sm
1 2