Redirection sur l'ancre d'une même page

Résolu/Fermé

Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 - 7 avril 2013 à 09:29
Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 - 3 sept. 2015 à 12:21

Bonjour tout le monde,

Je viens vers vous après des heures de recherches et de tests infructueux.

Voici la page sur laquelle je teste le script : http://www.pronostics-formule1.fr/xtestx.php

Je cherche à faire quelque chose de simple a priori, mais impossible de le faire fonctionner sous tous les navigateurs. Je souhaiterais, via JS obligatoirement (sinon ça m'obligerait à changer tout le code) :

- effacer une page et mettre un msg d'alerte (ça fonctionne)
- rediriger vers une ancre de cette même page (le problème est là)

Voici le code, dont le code JS qui semble le plus logique :

<p id="test" style="cursor:pointer;">CLIQUEZ ICI</p>

<p id="ancre" style="margin:400px 0;">ICI l'ancre</p>

$("#test").click(function() {
	$('#content').empty().fadeIn().append('<p class="notification valide">redirection en cours</p>');
	setTimeout(function(){
		window.location.replace("http://www.pronostics-formule1.fr/xtestx.php#ancre");
		window.location.reload();
	},1000);
});

Comportement sous les différents navigateurs :

- FF 20 : ça marche très bien
- Chrome 26 : il y a refresh, ça descend à l'ancre, puis ça remonte
- IE 10 : il y a refresh, mais aucun effet vis à vis de l'ancre
- Opera 12 : idem IE 10.

J'ai essayé beaucoup de choses :
- window.location.reload();
- window.location.reload(true);
- window.location.reload(false);
- window.location.href..
- etc...

Rien y fait, je suis démuni. :/

En espérant que vous pourrez m'aider.

A voir également:

Redirection sur l'ancre d'une même page
Comment supprimer une page sur word - Guide
Comment traduire une page - Guide
Imprimer tableau excel sur une page - Guide
Créer une page facebook - Guide
Word numéro de page 1/2 - Guide

2 réponses

Réponse 1 / 2

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
7 avril 2013 à 09:44

$("#test").click(function() {
	$('#content').empty().fadeIn().append('<p class="notification valide">redirection en cours</p>');
	setTimeout(function(){
		window.location.hash="ancre";
	},1000);
});

Une ancre? On recharge pas la page!

Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 194
7 avril 2013 à 09:51

En fait j'ai pas tout dit.

Lorsqu'on clique, il y a soumission d'un formulaire (message sur le forum) et il faut recharger la page pour afficher le nouveau contenu.

Quoiqu'il en soit, il faut de toute manière recharger la page car j'efface le contenu :

$('#content').empty()

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
Modifié par gravgun le 7/04/2013 à 10:11

On ne peut pas faire window.location.replace en même temps qu'un envoi.
En estimant que le serveur tourne avec PHP, une solution serait de faire écrire un bout de javascript qui va faire défiler jusqu'à l'ancre du nouveau post:

<script>window.location.hash = "post<?php echo $numeroPost ?>";</script>

A mettre à la fin de la page pour que ce soit exécuté une fois la page chargée.

Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 194
Modifié par Bertrand40 le 7/04/2013 à 10:47

L'envoi est avant.

clic > envoi Ajax > refresh et affichage

Il semblerait que ce soit plutôt un problème de comportement de navigateur, puisque FF en est capable, et que les autres navigateurs en étaient capables il y a de ça quelques mois.

J'ai ajouté un bout de code de ce type, ça fonctionne mais c'est pas top je trouve :

if (window.location.hash) { 
  $('html, body').animate({ 
   'scrollTop': $(window.location.hash).offset().top 
  }, 2000); 
 }

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
7 avril 2013 à 11:05

Dans ce cas, il vaut mieux de faire un envoi ET une réception AJAX: on envoie le post, on reçoit un message d'erreur ou d'envoi terminé avec l'ID du post. En JSON c'est pas mal.

// Ton envoi en AJAX
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    var json = JSON.parse(xmlhttp.responseText);
    switch(json.status) {
        case "OK":
            $('#content').append(json.postHTML);
            window.location.hash = json.postID;
        break;
        case "ERR":
            $('#content').empty().append("Oh mon dieu une erreur");
        break;
    }
}
}

En faisant comme ça il faut que coté PHP/JSP/ASP ça renvoie ça:

{
    "status": "OK",
    "postHTML": "<div class=\"post\" name=\"post164\">Ici le contenu du post ajouté en direct</div>",
    "postID": "post164"
}

C'est un peu compliqué mais c'est très flexible et dynamique comme méthode.

Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 194
7 avril 2013 à 11:15

En fait mon bout de code ne fonctionne pas, j'avais pas vu que la page n'était pas tout à fait chargée.

Je vais essayer de comprendre ce que tu me proposes, mais je ne connais pas du tout. Je fais de l'Ajax assisté par JQuery à la base. Merci quoiqu'il en soit.

Réponse 2 / 2

Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 194
3 sept. 2015 à 12:21

J'avais oublié cette discussion, désolé..

Le problème a été contourné en ajoutant une valeur aléatoire à l'URL (j'ai mis une date tout simplement).

Discussions similaires

recherche d'u

imprimer plusieurs fois la meme photos sur la meme page

connection ok mais aucune page ne s'affiche