[Résolu] Ne pas charger avec un lien une page sur laquel on est déjà

Salut à tous,

J'aimerais pouvoir faire un système en jquery qui puisse empêcher de charger de nouveau une URL si nous sommes déjà présent sur celle-ci dans notre navigateur. Mais je tourne en rond et je pense avoir un problème de variable global en JavaScript.

Pourriez-vous m'éclairer un peu que je puisse effectuer mon système de navigation correctement pour éviter de recharger une page déjà active ? Je vous montre mon code :

$(document).ready(function() {

    window.alert("pageCourante : " + pageCourante);

    if (typeof (pageCourante) == 'undefined' )
    {
        $('#nav a:first').css("color","red");
        var pageCourante = $('#nav a:first').text();
    }

    function validLien(pageDemande, url)
    {
        window.alert(pageDemande);
        window.alert(pageCourante);
        window.alert(url);
        window.alert("../" + url);
        if (pageDemande != pageCourante)
        {
            pageCourante = pageDemande;
            return window.location = "../" + url;
        }
    }

    $('#btn_presentation a').on('click', function(e){
        e.preventDefault();
        validLien($(this).text(), "main.php");
    });

    $('#btn_actualite a').on('click', function(e){
        e.preventDefault();
        validLien($(this).text(), "actualite.php");
    });
});

Si vous avez une idée je vous remercie d'avance

salutations,

bin pourquoi tu ne récupères pas directement la page courante avec "location.href" ?

Ou faire simplement une condition php avant tes liens pour faire en sorte que l'HTML soit comme ça :

Tu es sur la page index.php:

<ul>
   <li>Home</li>
   <li><a href='pf.php'>Portfolio</a></li>
   <li><a href='contact.php'>Contact</a></li>
</ul>

Tu es sur une autre page que index.php, par exemple pf.php:

<ul>
   <li><a href='index.php'>Home</li>
   <li>Portfolio</li>
   <li><a href='contact.php'>Contact</a></li>
</ul>

Et les liens du menu ne sont plus cliquable pour les pages courantes.

Je trouve un chouilla plus logique de rendre un lien non cliquable en n'en faisant pas plutôt que de créer un comportement de redirection et d'ensuite l'annuler avec une fonction.
Modifié par Apoooo (17 Sep 2013 - 08:45)

Salut les gars,

alors pour répondre à Apoooo je pense qu'il n'est pas bon d'utilisé ta méthode car c'est une forme de répétition que tu fais de ton menu. Il est préférable de n'avoir qu'une seule implémentation de menu pour un site.

Ainsi j'ai externalisé mon header des pages web et je le rappel à chaque chargement de page.

D'ailleurs je me demande si je ne vais pas appeler mon stylesheets CSS et mon script Jquery a partir du header.html externalisé aussi au lieu de les inclure à chaque page....a voir les implications.

Zelalsan je ne connais pas cette variable de JavaScript. Effectivement elle ma permet de résoudre simplement mon problème. Je fais un switch suivant cette variable et suivant la réponse je color le bon lien. Et au moment de l'appel à une page j'ai une fonction qui valide bien que la page demandé est bien différente de la page en cours par l'intermédiaire de cette variable et si ce n'est pas le cas alors je ne fais rien.

Merci à vous

Perso et maintenant que j'ai bien relu ton message, ce que dit Apoooo est juste. Le menu se construit en PHP et tu ajoutes une condition, du genre si l'adresse du lien que tu vas ajouter est la même que la page en cours, alors il n'y aura pas de lien.

<?php
   $menu = array(
      "Item1" => "item1.php",
      "Item2" => "item2.php",
      "Item3" => "item3.php",
   );
   echo '
      <nav>
         <ul>';
   foreach($menu as $k=>$v){
      echo '<li>'.($v == substr($_SERVER['REQUEST_URI'], 1) ? $k : '<a href="'.$v.'">'.$k.'</a>').'</li>';
   }
   echo '
         </ul>
      </nav>
   ';
?>

Tout à fait d'accord avec toi.

J'ai mal compris Apoooo. Je pensais qu'il parlait pour chaque fichier. Du coup je suis parti dans des explications de factorisation de code inutile je crois. Désolé Apoooo

D'ailleurs pendant que nous y sommes au lieu de passer par mon script Jquery pour changer la couleur du nom du lien peu être effectué en CSS directement à la d'aide de la génération d'une class variable dans la balise du lien.

Mais avant d'effectuer tout ca en PHP, HTML et CSS uniquement quel intérêt est-je d'après-vous de passer par une solution PHP-HTML-CSS plutôt qu'avec du Jquery ?

Je savais que dans mes exemples de code, j'aurai du mettre le php en me relisant, effectivement ça porte à confusion mais c'est bien ce que je voulais dire, le menu est généré par PHP et tu n'as pas un menu diff par page

Souvent, pour la gestion des couleurs du menu, on fait en sorte d'appliquer une class spécifique (le plus courant, on trouve le nom de classe "active") qui changera l'aspect du bouton.

<ul>
   <li>Mon texte</li>
   <li class="active">Mon texte</li>
   <li>Mon texte</li>
</ul>

Et pour mettre cette classe active au chargement de page, tu fais une condition, exactement comme celle que tu demandais pour "mettre un lien ou pas" pour dire que si c'est la page courante, tu lui fous la classe active, autrement rien. Donc l'aspect original.

Pour la question du pourquoi PHP, HTML, CSS et pas avec jQuery :
Si tu utilises jQuery juste pour ça, ça te fait une librairie JS chargée pour rien donc de la bande passante utilisée inutilement alors que PHP lui est natif au serveur (en admettant que tu ais un serveur avec PHP).

L'autre point, c'est comme je l'ai dis dans l'autre réponse, avec ta solution, tu génères un code HTML qui fait telle action pour en détourner le sens avec du jQuery, alors qu'avec PHP, le code généré est déjà celui avec le comportement voulu. Gain de temps, de lignes de code et de perfomances car pas de jQuery.

Ma classe CSS .active mise dynamiquement sur un lien ne semble pas être interpreté par mon fichier externe CSS :

        
<div id="btn_presentation">
            <?php
            if ($_SERVER[REQUEST_URI] == "/main.php")
                echo "<a class=\"active\">presentation</a>";
            else
                echo "<a href=\"/main.php\">presentation</a>";
            ?>
 </div>

css correspondant :

.active
{
    color: #ff0000;
    background-color: #ff0000;
}

c'est quoi ce bordel ? J'ai vérifié l'arrivé HTML dans le navigateur et j'ai bien cela :

<a class="active">presentation</a>

rrrrr c'était un autres selecteur css qui avait le priorité sur .active.
C'est pas la 1e fois que ca m'arrive il faut vraiment que je calcul le chiffre de priorité du selecteur.

Merci à vous le sujet est bien résolu