UI Tabs et ancres nommées

**albedo0** · 13/01/2011, 10h55

Bonjour,

J'utilise jquery et jquery-ui pour afficher des onglets.

Tout se passe comme convenu excepté dans un cas de figure particulier.

J'ai paramétré mes onglets pour qu'ils s'affichent en fonction du clique sur m'onglet, mais également en fonction des variables de l'URL.
Lorsque j'ai #edit, je me retrouve donc sur l'onglet edit ! Tout ça c nickel !

Mais lorsque je valide un formulaire dans un onglet qui est plutôt long, la page se recharge mais l'onglet arrive en haut de page. C'est le comportement des ancres nommées en html. Si la page est courte, il n'y a pas de soucis, mais pour les pages longues, c'est nettement moins pratique.

Quelqu'un aurait-il une idée ???

Merci par avance !

**SpaceFrog** · 13/01/2011, 11h14

tu as quoi dans l'action du form ?

**albedo0** · 13/01/2011, 11h33

C'est l'action que je souhaite :

Code :

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

index.php?action=session#edit

Mais à cause du défilement type "ancre nommée", j'ai mis le code suivant qui m'affiche donc le premier onglet sans faire défiler la page... mais lorsqu'il y a des erreurs sur le formulaire, je reviens quand même sur ce premier onglet

Code :

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

index.php?action=session

**SpaceFrog** · 13/01/2011, 12h19

dans l'attribut action de ton formulaire ????

**albedo0** · 13/01/2011, 13h09

oui oui, c'est bien l'attribut action...

ça a l'air de te choquer....

**SpaceFrog** · 13/01/2011, 13h33

en fait je ne saisis pas le souci

**albedo0** · 14/01/2011, 11h03

Ok alors je vais un peu mieux m'expliquer.

LOrsque l'on navigue entre les onglets tout se passe bien...

Mais lorsque je valide un foirmulaire :
1. la page est rechargée,
2. le bon onglet est activé, (jusqu'ici tout va bien)
3. la page défile jusqu'à la div servant d'onglet (comme les ancres nommées) <-- ce qui ne me convient pas

L'en-tête du site et surtout les messages de confirmation ou d'erreurs de traitement du formulaire qui se trouve en dehors des onglets ne sont pas visible directement, je dois faire défiler ma page vers le haut pour voir la page correcte...

En espérant avoir été plus clair cette fois-ci

**scourjean** · 14/01/2011, 12h28

Tu as essayé de faire un focus sur un élément du haut de ta page ?

**albedo0** · 14/01/2011, 13h04

Tu as essayé de faire un focus sur un élément du haut de ta page ?

Je viens d'essayer le code suivant :

Code :

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

1
2
<body onload="document.getElementById('toppage').focus();" >
     <input type="text" id="toppage" style="position:absolute;top:0px;border:0px;width:0px;height:0px;"/>

Hormis le fait que la page s'affiche su niveau de l'onglet et qu'elle remonte ensuite en haut de page, ça marche... par contre c quand vraiment du bidouillage... je suis pas fan de cette solution, même si pour l'instant je vois rien de mieux !

Une autre solution ???

**SpaceFrog** · 14/01/2011, 13h44

et avec un timestamp dans l'url ?? pour contourner le cache, peut être le navigateur en oublirait-il la position du scroll ???

**albedo0** · 14/01/2011, 14h18

Envoyé par SpaceFrog

et avec un timestamp dans l'url ?? pour contourner le cache, peut être le navigateur en oublirait-il la position du scroll ???

C'est à dire ? Je ne vois pas trop comment cela peut marcher cette histoire de timestamp...

**scourjean** · 14/01/2011, 15h10

Tu utilises quelle version de jquery ui pour les tab ?

**albedo0** · 17/01/2011, 14h22

Envoyé par scourjean

Tu utilises quelle version de jquery ui pour les tab ?

J'utilise jQuery UI 1.8.7

**Loceka** · 17/01/2011, 15h25

Envoyé par albedo0

Envoyé par SpaceFrog

et avec un timestamp dans l'url ?? pour contourner le cache, peut être le navigateur en oublirait-il la position du scroll ???

C'est à dire ? Je ne vois pas trop comment cela peut marcher cette histoire de timestamp...

En fait certains navigateurs se fichent éperdument de l'option "no-cache" d'une page. Une URL qui a déjà été visitée est donc ajoutée dans le cache du navigateur et, quand on rappelle cette URL, il se dit "j'ai déjà vu cette page" et il te la rouvre comme il l'avait enregistrée.

Pour palier à ça, tu peux modifier l'URL de la page, par exemple en rajoutant un attribut contenant un timestamp à ton URL :

Code :

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

http://www.ton-site.com/ta-page.html?t=230923093

En javascript tu peux avoir le temps en millisecondes comme ceci :

Code :

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

(new Date()).getTime()

**albedo0** · 18/01/2011, 13h07

Finalement, j'ai trouvé la solution qui me convient...

Code :

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

<body onload="window.scrollBy(0,-100000);">

Je fais remonter ma page de 100000 pixels au chargement ce qui résout le problème hormis le fait que la page commence par se charger au niveau des onglets... mais bon c'est un moindre mal !

Merci pour votre aide en tout cas et je reste abonné à ce fil si quelqu'un trouve une idée lumineuse !

UI Tabs et ancres nommées

jQuery

Discussions similaires

Partager

Partager