11522 sujets

JavaScript, DOM et API Web HTML5

Récupération de la valeur dans la même page

bonjour à tous
Je voudrais savoir si c'est possible en php/javascript de passer et récupérer une valeur dans la même page et sans actualiser cette page?

J'ai un lien qui fait appeler une fonction javascript permettant afficher un div avec style="display:none;" donc ce que je voulais est de ne pas actualiser la page.

j'ai un lien:
<a href="mapage.php#?valeur=mavaleur" onclick="fonction(event);">lien</a>

mais j'ai essayé c'est impossible de passer mavaleur

dans la même page, j'ai une div qui est comme suit:
<div id="division" style="display:none;">blabla</div>


function fonction(evt){
        var variable = document.getElementById('division') ;
	variable.style.display='block' ;
}


C'est un peu urgent.
Merci d'avance à tous.
Modifié par benjaminsrj (05 Jun 2009 - 09:39)
Salut,

hem... ce que tu veux faire n'est pas très clair :
* je ne vois nulle part mavaleur dans ton code JavaScript
* le # dans le lien fait que tu cibles une ancre... et donc si le JS est désactivé il est impossible de récupérer la variable en PHP.
* tu n'annules pas le lien en JS.
* en l'état tu ne te sers pas d'event alors pourquoi le passer en paramètre ?
* selon ce que tu veux faire c'est peut-être une mauvaise idée de mettre directement le DIV en display:none car si le JS est désactivé on ne le verra jamais (mais tu comptes peut-être prévoir de l'afficher en PHP si tu reçois mavaleur ?

En attendant plus de précisions je serais parti sur ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
function fonction(elem){
	var mavaleur = elem.href.split(/(.+)valeur=([^&]+)/)[2];
	//alert(mavaleur);
	document.getElementById('division').style.display='block';
	return false;
}
</script>
</head>
<body>
<div>
<a href="mapage.php?valeur=mavaleur" onclick="return fonction(this);">lien</a>
</div>
<div id="division" style="display:none;">blabla</div>
</body>
</html>
merci pour ta réponse.
désolé j'ai un peu mal interprêté.
l'idée c'est que le div s'affiche quand on clique sur le lien grâce à la fonction de javascript.
$mavaleur récupérée doit être affiché dans div

<a href="mapage.php#?valeur=<?php $mavaleur?>" onclick="fonction(event);">lien</a>

<div id="division" style="display:none;">mavaleur</div>

ici comment récupérer $mavaleur qui est passé dans javascript?

event c'est pour régler la position de la division grâce à une autre fonction getYPos
function fonction(evt){
	var posy = getYPos(evt) + 20 ; 
        var variable = document.getElementById('division') ;
	variable.style.display='block' ;
}


merci d'avance à toi encore une fois
Euh... je vais donc supposer que tu as plusieurs liens puisque sinon il suffirait de faire
<div id="division" style="display:none;"><?php echo $mavaleur; ?></div>
Smiley murf


Donc je ferais quelque chose comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
function fonction(evt, valeur){
	var posy = getYPos(evt) + 20 ;
	var texte = document.createTextNode(valeur);
	var div = document.getElementById('division') ;
	if(div.firstChild) div.removeChild(div.firstChild);
	div.appendChild(texte);
	div.style.display='block' ;
	return false;
}
</script>
</head>
<body>
<?php
$valeur1 = 'abcd123';
$valeur2 = 'efgh456';
?>
<div>
	<p><a href="mapage.php?valeur=<?php echo $valeur1; ?>" onclick="return fonction(event, '<?php echo $valeur1; ?>');">lien 1</a></p>
	<p><a href="mapage.php?valeur=<?php echo $valeur2; ?>" onclick="return fonction(event, '<?php echo $valeur2; ?>');">lien 2</a></p>
</div>
<div id="division" style="display:none;"></div>
</body>
</html>
Et un truc comme ça ?
[b]HTML[/b]
<a href="?" onclick="maFonction(event, 'test'); return false;">salut</a>

[b]JS[/b]
function maFonction(event, valeur) {
    /* données reçues */
    alert(
        "type d'événement = " + event.type
        + "\nbalise cliquée = " + (event.target || event.srcElement).tagName
        + "\nvaleur passée = " + valeur
    );
    /* affichage de valeur dans la div#division */
    document.getElementById('division').innerHTML = valeur;
}
Edit: Oups, j'avais pas vu ta réponse Heyoan.
Modifié par marcv (05 Jun 2009 - 12:17)
'lut Marc,

et dire que j'ai lu voilà déjà un bon moment que innerHTML devait être remplacé par les méthodes du DOM et que tu fais en 1 ligne ce qui m'en prend 4 (sans parler du côté verbeux) ! Smiley lol
Merci pour votre réponse.

les deux méthodes marchent. mavaleur se passe bien entre php et javascript.
Mais un seul problème est que dans mon div, je vous montre le code
<div id="division" style="display: none;">
	<table>
	<tr>
	<td><input type="text" class="text" name="var" id="var" value="<?php echo $object->getName() ;?>" /></td>
	</tr>
	</table>
	</div>

Je voudrais récupérer mavaleur et puis obtenir un objet correspondant à mavaleur, et puis afficher le nom de cet objet dans un champ texte de div.
benjaminsrj a écrit :
Je voudrais récupérer mavaleur et puis obtenir un objet correspondant à mavaleur, et puis afficher le nom de cet objet dans un champ texte de div.
Pas compris... Le plus simple serait de nous donner un exemple du code HTML généré tel que tu le souhaites..

Et sinon ça irait plus vite si tu donnais toutes les infos en une seule fois plutôt que de rajouter un nouvel indice à chaque message. Smiley rolleyes
Heyoan a écrit :
j'ai lu voilà déjà un bon moment que innerHTML devait être remplacé par les méthodes du DOM
innerHTML a pour principal inconvénient d'être une méthode proprio de Microsoft, qui ne figure pas (encore ?) dans les saints grimoires du W3C (malgré l'insistance de quasiment tous les navigateurs). Ça prend certes longtemps --et c'est un peu normal-- de standardiser une idée, n'empêche qu'en attendant, cette méthode est :
- beaucoup plus facile à utiliser (tu t'en es rendu compte)
- plus rapide à l'éxécution
- parfaitement supportée par la quasi totalité des navigateurs

Alors, à un moment, faut ouvrir les yeux... (je dis pas ça pour toi, bien sûr, mais pour ceux qui écrivent les articles dont tu parles).

Heyoan a écrit :
Pas compris... Le plus simple serait de nous donner un exemple du code HTML généré tel que tu le souhaites.
Ou une page en ligne, encore mieux.
marcv a écrit :
innerHTML a pour principal inconvénient d'être une méthode proprio de Microsoft,

Il y a quand même d'autres gros gros pièges et pas du genre idéologique.

marcv a écrit :
cette méthode est :
- beaucoup plus facile à utiliser (tu t'en es rendu compte)
- plus rapide à l'éxécution
- parfaitement supportée par la quasi totalité des navigateurs

Mais faut pas faire le boulet non plus : un coup de innerHTML += "" dans une boucle for et le truc est plus lent que les méthodes du DOM. Puis faire attention au HTML que l'on rajoute, qu'il soit bien formé de préférence et ne pas oublier les obligatoires bugs de IE avec innerHTML (le comble) (sur un <table> par exemple, ou les fuites de mémoires avec IE6, etc.).

Quand on travail sur un document XML (ou XHTML envoyé en temps que application/xhtml+xml) innerHTML n'est pas disponible, il faut obligatoirement passer par les méthodes du DOM (dans les nouvelles specs ça change, mais c'est pas pour demain non plus).

DOM oui, innerHTML oui, faut juste savoir quand et comment Smiley smile
Modifié par nod (05 Jun 2009 - 14:05)
Désolé pour ma mauvaise expression.
Il y a 2 fichiers: un fichier family.php, dedans ya plusieurs liens
 $rqt = "select id_family from family;"
$res = mysql_query($rqt);
while($families = mysql_fetch_array($res){
$familyId = $families['id_family'] ;
<a href="family.php?familyId=<?php echo $familyId; ?>" onclick="show_family_name(event, '<?php echo $familyId; ?>'); return false;"><?php echo bddToHtmlText($family->getFamilyName()) ; ?></a>
}


dans la même page, j'ai un div intégré avec une table qui se masque par défaut

<div id="toolfamilyid" style="display: none;">
<table class="noborder">
<tr>
<td class="noborder"><label for="familyname">Nom de la famille : </label></td>
<td class="noborder"><input type="text" class="text" name="familyname" id="familyname" value="<?php echo $_GET['familyId']?>" /></td>
</tr>
</table>
</div>


.js

function getYPos(evt) {
var posy = 300;
if (!evt) var evt = window.event;
if (evt.pageY) {
posy = evt.pageY;
}
else if (evt.clientY) {
posy = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return posy ;
}

function show_family_name(event,familyid) {
var posy = getYPos(event) + 20 ;
var texte = document.createTextNode(familyid);
var div = document.getElementById('toolfamilyid') ;
if(div.firstChild) div.removeChild(div.firstChild);
var toto = div.appendChild(texte);
div.style.display='block' ;
}


comme je disais, j'aimerais que quand on clique sur un lien. par exemple, je clique sur un lien contenant un familyId = 3, alors il appelle la fonction show_family_name, il permet de faire afficher le div et en plus, je veux avoir familyid 3, pour faire une requête afin d'avoir le nom de la famille.

J'arrive toujours pas à trouver une solution. et je m'excuse encore une fois pour ma mauvaise expression.
Modifié par benjaminsrj (05 Jun 2009 - 14:54)
@benjaminsrj:
a écrit :
J'arrive toujours pas à trouver une solution
Eh ben moi non plus Smiley smile

Ce que je comprends :
- tu as une liste de liens contenant chacun un familyId en variable get du href
- tu as également une div masquée
- lorsque l'on clique sur n'importe lequel de ces liens, tu veux que la div masquée s'affiche.

Ok jusque là.

Après, désolé, mais je comprends absolument pas ce que tu veux dire par "obtenir un objet correspondant à mavaleur" ou "avoir familyid [...] pour faire une requête"...

@nod:
a écrit :
un coup de innerHTML += "" dans une boucle for et le truc est plus lent que les méthodes du DOM
D'abord ce serait pas très inspiré de faire un += directement sur innerHTML dans une boucle (je ne pense pas que ce soit une limite de innerHTML, mais plutôt du développeur, dans ce cas Smiley lol ), et quand bien même on le ferait, je pense que ça dépend (1) du nombre d'itérations de ta boucle et (2) de l'HTML inséré à chaque itération. En clair, les méthodes du DOM seraient plus performantes au bout de 300 itérations peut-être. Mais je le répète, c'est un mauvais procès, tu ne peux pas comparer innerHTML mal utilisée avec les méthodes du DOM bien utilisées.
a écrit :
Puis faire attention au HTML que l'on rajoute, qu'il soit bien formé de préférence
Si tu ne formes pas bien ton code, tu n'auras pas plus de chance avec une méthode qu'avec une autre (essaye document.createElement('stroong') ou doqument.createElement('strong')). Là encore, ce n'est pas un problème de innerHTML mais un problème de développeur.
a écrit :
sur un document XML [...] innerHTML n'est pas disponible
Le nom de la méthode me semble spécifier assez clairement qu'elle est à destination exclusive du HTML. Là encore, c'est un mauvais procès que tu lui fais, elle n'a jamais été prévue pour fonctionner avec XML (ce qui va pourtant devoir être possible si on ambitionne de la standardiser).
Pour le reste, je suis bien sûr d'accord avec toi : c'est pas utilisable sur les tableaux et oui, il faut faire attention aux éléments qu'on supprime/écrase sous IE6 (bien que je crois me souvenir que des méthodes existent pour palier ce bug).

Au final, je crois qu'on s'acharne vraiment trop sur cette pauvre méthode, qui rend d'excellents services dans 99% des cas.
Modifié par marcv (05 Jun 2009 - 18:11)
oula oula, on s'est mal compris. Je ne fait pas un procès à innerHTML pas dutout dutout. J'adore innerHTML.

C'est juste que cette histoire de innerHTML dans une boucle, de bugs IE bah souvent on le dit pas. Or c'est important de le savoir pour justement ne pas utiliser innerHTML comme un boulet. Pour info, la dégradation en performances de innerHTML est très rapide, bien avant les 300 éléments et plus l'élement que tu modifies contient d'autres noeuds, plus ça part en couille. Alors que le DOM reste lent, mais constant dans ce cas.

Oui c'est vrai que le coup du innerHTML dans un fichier XML vu comme ça… Mais vu le nombre de gens qui captent pas la subilité du XHTML et que le jour où ils décident de l'envoyer comme il faut, avec un script js prévu pour un fichier HTML… bah ça foire… Bam c'est la faute de javascript *hum hum*. Elle a pas été prévue pour, mais on l'utilise quand même. Classique.

C'était juste un post d'information ^^ je l'ai appris à mes dépends tout ça, autant l'éviter à quelqu'un d'autre Smiley smile
Il faut l'utiliser en connaissance de cause.
Modifié par nod (05 Jun 2009 - 19:52)
Sujet clos
Aller à