Generer contenu de div avec parametres
Le
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>
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>
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.
Je n'en vois pas l'intéret, autant faire charger directement le code voulu.
à 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
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.
<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>
Voila qui est clair. Tans pis merci.
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¶m2=titi">
</iframe>
Pas moyen de faire ca? Une autre idée pour arriver au même resultat ?
Merci
Pierre
<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] + '¶m2=' +params[2]+ '" class="pub"></iframe>';
}
window.onload = init;
Ne reste qu'à réaliser les css
div.pub { }
et
iframe.pub ( }
--
sm
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 + '¶m2=' + 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 + '¶m2=' + params.param2 +
'" class="pub"></iframe>';
}
}
window.onload = init;
--
sm
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 :
Est ce possible y compris avec le mecanisme d'init + evt. une librairie exterieure comme jQuery ?
D'avance merci
Pierre
Ca à l'air de résoudre mes problèmes (l'autre post).
Je teste ca.
Merci
"SAM" 4c4fe74d$0$27578$
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" 4c4fe74d$0$27578$
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
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
Un testeur d'expressions régulières :
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 :
ou ici en Fr mais ...
Normalement c'est Olivier Miakinen le esspécialiste.
d[n].innerHTML.replace(/s([/w]+s?=)/g,'var $1')
Houch!
de piouz en piouz compliqué !
et à la moindre erreur de frappe (comme l'oubli d'un param)
ça va merder
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;
Pourquoi changer le mode d'écriture ?
(rajouter des ( ) ou oublier des /)
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'));
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'));
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