Discussion :

[renaud26]

Bonjour à tous,

Supposons un très long formulaire.
Au milieu de ce formulaire, un lien ouvre une popup qui permet de choisir une image par un bouton radio.

Le clic sur ce bouton a 2 fonctions :
- window.close()
- Un window.opener qui appelle une fonction de la page parent et affiche l'image qui a été choisie dans un div.

Jusqu'à là, tout va bien.

L'ennui, c'est que lorsque la popup se ferme, le navigateur "saute" et remonte en tête de page alors que je voudrais que la page parent reste au même niveau que le lien de la popup. (C'est un détail, mais le formulaire étant très long, ce n'est pas très pratique...)

J'ai essayé avec une ancre...
Pas de succès.
Quelqu'un a une idée ?

[RomainVALERI]

A la rigueur, on peut imaginer une solution "à la main" en stockant la valeur du scroll de la fenêtre mère et forcer à nouveau cette valeur après fermeture de la popup, c'est-à-dire quand la fenêtre principale récupère le focus...

[le_chomeur]

et avec une ancre ??

[RomainVALERI]

et avec une ancre ??

J'ai essayé avec une ancre...

@le chomeur : mais je t'accorde que c'est bizarre : j'aurais moi aussi essayé ça dans un premier temps...
@renaud26 : On peut voir comment tu as implémenté le mécanisme ? (c'est peut-être une erreur de code et pas de raisonnement ^^)

[le_chomeur]

on dirait que le code est posté ( page rafraichie ... mais même avec un ancre ça devrait marcher )

[SpaceFrog]

sinon juste eviter le popup en restant sur la page mère avec un truc comme prototype window ...

[renaud26]

Merci à vous de vous pencher sur le truc.

Voici mon code :
code popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function popupcentre(adresse, nomFenetre, largeur, hauteur, scroll) 
  {
  var largeurEcran = (screen.width - largeur) / 2;
  var hauteurEcran = (screen.height - hauteur) / 2;
  window.open(adresse, nomFenetre, 'height=' + hauteur + ', width=' + largeur + ', top=' + hauteurEcran + ', left=' + largeurEcran + ', scrollbars=' + scroll + ', resizable')
  }

lien ouverture popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" onClick="popupcentre('images.php','images','850','800','yes')">Cliquez ici pour choisir une image</a>

Le code de fermeture de la popup (dans la popup, donc)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<img src=' ".$chemin."/".$imageName." ';
<input type='radio' onClick=\"window.close()\" 
onChange=\"window.opener.afficherImage(this.value')\" 
value='$imageName'>;

Et la fonction afficherImage de la page parent est un simple innerHTML qui affiche l'image dans un DIV...

Elle s'affiche très bien, d'ailleurs...si on se retape tout l'ascenseur pour la voir...

Une ancre... ok, mais comment "diriger" window.clode vers elle ?

[le_chomeur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#"

te renvois en haut de la page

il te faut mettre un lien a l'endroit ou tu veux rester ( l'ancre ) et mettre ton appel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#monancre" ...

[renaud26]

Et bien voilà une chose que j'ignorais.
Je te (vous) remercie beaucoup.

Bonne fin de journée.

[RomainVALERI]

(c'est peut-être une erreur de code et pas de raisonnement ^^)

*sifflotte*

[Macmillenium]

Pas besoin d'ancre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:void(0)" onClick="popupcentre('images.php','images','850','800','yes')">Cliquez ici pour choisir une image</a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:popupcentre('images.php','images','850','800','yes')">Cliquez ici pour choisir une image</a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:popupcentre('images.php','images','850','800','yes')" onclick="return false;">Cliquez ici pour choisir une image</a>

Je recommande la 1ére solution

[SpaceFrog]

aussi sauf qu'il manque un return false...

[le_chomeur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="lafontion;return false;" ...

la propriété href ne doit pas être utiliser pour appeler du javascript
cf : norme w3c ....

[Macmillenium]

La raison pour laquelle on recommande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="javascript:void(0)" onClick="popupcentre('images.php','images','850','800','yes');return false;">Cliquez ici pour choisir une image</a>

Le WCAG n'interdit pas cette méthode

[SpaceFrog]

le javascript dans le href ne sert à rien Mac !
il ne sera jamais atteint puisque le href est inhibé par le return false

mieux vaut utiliser le href pour un chemin pour palier au javascript désactivé ...

[RomainVALERI]

Le WCAG n'interdit pas cette méthode

Ah tiens ? ^^
Je m'interdisais cette syntaxe au nom du principe de séparation contenus/présentation/comportements, car je pensais que c'était considéré comme une intrusion js...
Et le WCAG, comment dire heu ... je vais me renseigner ( "mais qu'est-ce que c'est que ce sigle..." )

edit : ok ce sont les principes et standards de l'accessibilité sur le web ^^ je connaissais le concept mais pas le terme

edit n°2 @macmillenium : je n'aurais pas osé te demander de googler pour moi mais merci de l'intention ! ^^

[Macmillenium]

Et le WCAG, comment dire heu ... je vais me renseigner ( "mais qu'est-ce que c'est que ce sigle... )

WCAG, c'est un standard publié par le WAI (branche accessibilité du W3C) et qui vise principalement les développeurs

le javascript dans le href ne sert à rien Mac !
il ne sera jamais atteint puisque le href est inhibé par le return false

Au temps pour moi

EDIT @RomainVALERI : T'inquiète je connais l'url par cœur

[le_chomeur]

merci spaffy pour la précision ;-)

Mac ==> j'ai pas dit que c'était interdit , mais pas préconisé

;-)

[SpaceFrog]

il n'était pas préconisé pour des raisons de navigation avec js desactivé mai aussi de référencement
aujourd'hui les srcolleur de google sont capable de suivre des liens javascript ...
mais parser des liens href en js ou des liens onclik n'est pas chose facile !

Donc a utiliser avec parcimonie (ou avec sa sœur ^^)

[renaud26]

Bonjour à tous,

Je me permets de réouvrir ce post, car je souhaiterais avoir une précision :

J'ai donc écrit mon lien de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:void(0)"  onclick="fonction();return false;">Clic</a>

Mais supposons que le window.close() de la popup soit suivi d'un window.opener qui appelle une fonction de la page parent, et que cette fonction rafraîchisse la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<a href="#" onClick="window.close();window.opener.rafraichit("mapage.php?id=1")>Fermer</a>
 
//et dans la page parent
function rafraichit(url){
window.location.href=url;
}

Comment, après le refresh de la page, être au même niveau que la popup ?
Mettre une ancre + url#ancre dans la fonction "rafraichit" empêche justement le refresh...