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

Résolu

Bertrand40 Messages postés 1196 Date d'inscription Statut Membre Dernière intervention -
Bertrand40 Messages postés 1196 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Redirection sur l'ancre d'une même page
Comment supprimer une page sur word - Guide
Imprimer tableau excel sur une page - Guide
Créer une page facebook - Guide
Comment traduire une page - Guide
Page d'accueil - Guide

2 réponses

Réponse 1 / 2

ElementW Messages postés 4814 Date d'inscription Statut Contributeur Dernière intervention 1 223

$("#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 Statut Membre Dernière intervention 194

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 4814 Date d'inscription Statut Contributeur Dernière intervention 1 223

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 Statut Membre Dernière intervention 194

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 4814 Date d'inscription Statut Contributeur Dernière intervention 1 223

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 Statut Membre Dernière intervention 194

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 Statut Membre Dernière intervention 194

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

connection ok mais aucune page ne s'affiche

recherche d'u

imprimer plusieurs fois la meme photos sur la meme page

Mettre le menu Inspecter l’élément en bas

Votre réponse

Discussions similaires