window.location et ancre

**Pathoche** · 20/02/2013, 17h30

Bonjour.

J'ai un soucis pour aller sur une ancre dans une fonction JavaScript.

- Il s'agit d'une page qui contient un très long tableau (genre 250 lignes) avec une case à cocher par ligne.
- Lorsqu'on clique sur une case à cocher, cela exécute une fonction JavaScript qui mets la base de donnée à jour et recharge la page pour prendre en compte les modifications effectuées.
- Chaque case à cocher possède un id dont je veux me servir comme ancre pour replacer l'affichage sur la bonne ligne au rechargement de la page.

Au début dans ma fonction JavaScript, j'avais juste ça :

Code :

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

1
2
3
 
// Rafraichissement de la page
window.location.href="inscription.php";

Cela me recharge bien la page, mais positionne mon tableau sur la première ligne, ce qui dans ce cas est normal.

Donc, j'ai voulu faire ça :

Code :

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

1
2
3
 
// Rafraichissement de la page
window.location.href="inscription.php#id_case_a_cocher";

Problème, je vais bien sur la bonne ligne et puis tout disparait, écran blanc.

Alors j'ai découpé le rechargement de la page en deux :

Code :

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

1
2
3
4
5
6
 
// Rafraichissement de la page
 window.location.href="inscription.php";
 
// se positionne sur l'ancre du tableau
self.location.hash="#"+id_case_a_cocher;

Re-problème, je vais bien sur la bonne ligne, mais aussitôt ça revient sur la première ligne du tableau.

J'avoue que là je sèche.
Si quelqu'un à une idée, je suis preneur.

**SpaceFrog** · 20/02/2013, 17h35

sur quoi tu lances ce bout de code ?
un href ?

tu as manifestement un autre code qui interfère

**Pathoche** · 20/02/2013, 18h43

En bref, c'est les onclick des case à cocher qui appellent le fonction JavaScript

Code :

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

onclick="modif(this.id)"

La fonction JavaScript appelle une page php pour mettre à jour la base de donnée (ajouter ou supprimer une ligne dans une table selon que l'on coche ou décoche une case), puis lorsque c'est fait, recharge a page pour que le tableau soit à jour.

Fonction JavaScript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function modif(clique)
        {
            if (document.getElementById(clique).checked) {
                // Ajout d'une inscription
                window.location.href="validationInscription.php?monmatricule="+clique+"&afaire=inscription";
 
            }else{
                // Demande de confirmation de suppression
                if (confirm("Voulez-vous vraiment supprimer cette personne : "+clique+" ?"))
                {
                    // Suppression
                    window.location.href="validationInscription.php?monmatricule="+clique+"&afaire=desinscription";
                }
            }
 
            // Rafraichissement de la page
            window.location.href="inscription.php";
 
            // se positionne sur l'ancre du tableau
            self.location.hash="#"+clique;
        }

Tout va bien sauf cette histoire d'ancre.
J'ai aussi l'impression que la page se chargerait deux fois, la deuxième en déconant, mais je ne vois pas pourquoi.

Code complet de la page :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?php session_start(); ?>
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
        <title>Passeport Pétrolier</title>
        <link href="styleTableau.css" rel="stylesheet" type="text/css" />
 
        <script language="javascript">
        function modif(clique)
        {
            if (document.getElementById(clique).checked) {
                // Ajout d'une inscription
                window.location.href="validationInscription.php?monmatricule="+clique+"&afaire=inscription";
 
            }else{
                // Demande de confirmation de suppression
                if (confirm("Voulez-vous vraiment supprimer cette personne : "+clique+" ?"))
                {
                    // Suppression
                    window.location.href="validationInscription.php?monmatricule="+clique+"&afaire=desinscription";
                }
            }
 
            // Rafraichissement de la page
            window.location.href="inscription.php";
 
            // se positionne sur l'ancre du tableau
            self.location.hash="#ancre";
        }
        </script>
    </head>
 
    <body>
 
        <h1>Inscription aux formations</h1>
 
        <?php
        // Récupère les critères d'accés dans les variables de session
        $niveau=$_SESSION["niveau_pp"];
        $filtre=$_SESSION["filtre_pp"];
        $droit=$_SESSION["droit_pp"];
 
        // Connexion à la base de donnée du Personnel
        $dbconnectPersonnel = pg_connect("host=bpia-psql-1 port=5432 dbname=ListePersonnel user=postgres password=AdminPsql1");
        if (!$dbconnectPersonnel)
        {
        echo "Pas de connexion à la base de données Personnel dans le fichier inscription.php.<br>";
        echo "Prenez contact avec M. LEFEVRE au 29.319<br>";
        exit;
        }
 
        // Connexion à la base de données du Passeport Pétrolier
        $dbconnect = pg_connect("host=bpia-psql-1 port=5432 dbname=PasseportPetrolier user=postgres password=AdminPsql1");
        if (!$dbconnect)
        {
            echo "Pas de connexion à la base de données Passeport Pétrolier dans le fichier inscription.php.<br>";
            echo "Prenez contact avec M. LEFEVRE au 29.319<br>";
            exit;
        }
 
        // Construction de la requete sur la base du personnel
        $queryPersonnel = "select * from personnel where statut='EV' and  $niveau LIKE '$filtre%'order by nom";
 
        // Execute la requete
        $resultPersonnel = pg_query($dbconnectPersonnel, $queryPersonnel);
        if (!$resultPersonnel)
        {
            echo "La requete sur la base du personnel ne fonctionne pas dans le fichier inscription.php.<br>";
            echo "Prenez contact avec M. LEFEVRE au 29.319<br>";
            exit;
        }
        ?>
 
        <table align="center">
            <?php
            while ($personnel = pg_fetch_assoc($resultPersonnel))
            {
                // Constuction de la chaine d'identité
                $identite=trim($personnel['matricule'])." - ".trim($personnel['nom'])." ".trim($personnel['prenom'])." (".trim($personnel['grade']).") - (".trim($personnel['fonction'])."/".trim($personnel['service']).")";
 
                // Recupere le matricule
                $matricule=trim($personnel['matricule']);
 
                // Construction de la requete de vérification pour savoir si la personne est inscrite
                $queryVerifInscrit = "select * from suivi_militaire where matricule='$matricule'";
 
                // Execute la requete
                $resultVerifInscrit = pg_query($dbconnect, $queryVerifInscrit);
                if (!$resultVerifInscrit)
                {
                    echo "La requete resultVerifInscrit ne fonctionne pas dans le fichier inscription.php.<br>";
                    echo "Prenez contact avec M. LEFEVRE au 29.319<br>";
                    exit;
                }
 
                // Compte le nombre de personne
                $NbLigne=pg_num_rows($resultVerifInscrit);
 
                // Remplissage du tableau
                if ($NbLigne==0)
                {
                    // Pas inscrit à la formation
                    ?>
                    <tr>
                        <td align="left">
                            <input type="checkbox" onclick="modif(this.id)" id="<?php echo $matricule; ?>" value="<?php echo $matricule; ?>"><?php echo $identite; ?>
                        </td>
                    </tr>
                    <?php
                }else{
                    // Inscrit à la formation
                    ?>
                    <tr>
                        <td align="left">
                            <input type="checkbox" onclick="modif(this.id)" id="<?php echo $matricule; ?>" checked value="<?php echo $matricule; ?>"><?php echo $identite; ?>
                        </td>
                    </tr>
                    <?php
                }
            }    
            ?>
        </table>    
        <h2 id="ancre">ANCRE</h2>
    </body>
</html>

La ligne 126 (<h2 id="ancre">ANCRE</h2>) est là juste pour voir si la fonction me renvoie bien l'ancre qui se trouve tout en bas de la page. Et là, j'y vais bien et retourne aussitôt au début du tableau.

**Pathoche** · 21/02/2013, 12h47

Finalement je laisse tomber cette histoire d'ancre.

Puisque le but de cette manip était de se repositionner dans le tableau sur la bonne ligne, j'ai fait autrement.

Je suis passé par un objet XmlHttpRequest. Comme ça ma page ne se recharge pas et donc mon tableau ne bouge pas.

Pour ceux que ça intéresserait :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// ********************************************************************************************
// Fonction pour déterminer le navigateur utilisé et ainsi créer le bon objet XMLHttpRequest  *
// ********************************************************************************************
function getXhr()
{
	var xhr = null; 
 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
 
// *******************************************************************************
// Fonction qui sera appelée sur le clic des cases à cocher                      *
// *******************************************************************************
function modif(clique)
{
	// Appel de la fonction de determination de l'objet
	var xhr = getXhr();
 
	// Determine l'ajout ou la suppression
	if (document.getElementById(clique).checked) {
		// Ajout d'une inscription
		var afaire = "inscription";
 
	}else{
		// Demande de confirmation de suppression
		if (confirm("Voulez-vous vraiment supprimer cette personne : "+clique+" ?"))
		{
			// Suppression
			var afaire = "desinscription";
		}else{
			// On recoche la case
			document.getElementById(clique).checked=true;
			// on quitte la fonction
			return;
		}
	}
 
	// Appel de la page de traitement php
	xhr.open("POST","validationInscription.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// envoi des arguments à la page php
	xhr.send("monmatricule="+clique+"&afaire="+afaire);
}

**Bovino** · 21/02/2013, 12h51

De toute façon, ta fonction modif() ne pouvait pas faire ce que tu souhaitais...
Dedans, tu as un if... else, donc pas possible de ne pas entrer dans l'une des conditions et les deux conditions comportaient déjà une redirection ! Tu ne pouvais donc jamais atteindre la suite du code !

window.location et ancre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager