UI Tabs et ancres nommées

Version imprimable

13/01/2011, 09h55
albedo0

UI Tabs et ancres nommées

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 !
13/01/2011, 10h14
SpaceFrog

tu as quoi dans l'action du form ?
13/01/2011, 10h33
albedo0

C'est l'action que je souhaite :

Code:

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:

index.php?action=session
13/01/2011, 11h19
SpaceFrog

dans l'attribut action de ton formulaire ????
13/01/2011, 12h09
albedo0

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

ça a l'air de te choquer....
13/01/2011, 12h33
SpaceFrog

en fait je ne saisis pas le souci :oops:
14/01/2011, 10h03
albedo0

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
14/01/2011, 11h28
scourjean

Tu as essayé de faire un focus sur un élément du haut de ta page ?
14/01/2011, 12h04
albedo0
Citation:

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

Je viens d'essayer le code suivant :
Code:

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 ??? :roll:
14/01/2011, 12h44
SpaceFrog

et avec un timestamp dans l'url ?? pour contourner le cache, peut être le navigateur en oublirait-il la position du scroll ???
14/01/2011, 13h18
albedo0

Citation:

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...
14/01/2011, 14h10
scourjean

Tu utilises quelle version de jquery ui pour les tab ?
17/01/2011, 13h22
albedo0

Citation:

Envoyé par scourjean

Tu utilises quelle version de jquery ui pour les tab ?

J'utilise jQuery UI 1.8.7
17/01/2011, 14h25
Loceka

Citation:

Envoyé par albedo0

Citation:

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:

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

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

Code:

(new Date()).getTime()
18/01/2011, 12h07
albedo0

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

Code:

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