Discussion :

[jeffmartins]

Bonjour,

Sur mon site internet j'intègre plusieurs script javascript, dont un en AJAX me permettant ainsi d'avoir des effets entre les pages et pas de changement de lien.

Voici le SCRIPT de celui-ci :

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
$(document).ready(function(){
	$("a").click(function(){
		page = $(this).attr("href");
		$.ajax({
			url: "pages/"+ page,
			cache: false,
			success:function(html){
				afficher(html);
			},
			error: function(XMLHttpRequest,textStatus,errorThrown){
				javascript:document.location.href='404.html';
			}
		})
		return false;
	});
 
});
 
function afficher(data){	
	$("#content").fadeOut(500, function(){
		$("#content").empty();
		$("#content").append(data);	
		$("#content").fadeIn(1000);	
	})		
}

L'ajax est donc utilisé pour tous les liens de ma page WEB.

Jusque là pas de soucis. 1 fois que je clique sur un lien de mon contenu, mon contenu s'enlève, et le contenu de mon autre page s'affiche (je récupère la page avec la méthode GET).

Cependant, une fois que le contenu de cette autre page est apparu, si je clique sur un autre lien devant ainsi s'afficher, il s'affiche bien mais j'aperçois le lien dans la barre de recherche (ex : accueil.html) et AJAX ne fonctionne plus.

Je pense ainsi qu'il se charge qu'une seule fois dans la page, et lors d'un autre clic vers un lien il n'est pas exécuté.

Pourriez-vous m'éclaircir sur le problème ?

Merci d'avance.

[Bovino]

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

[jeffmartins]

Bonjour,

Effectivement je n'avais pas fait attention à cette partie la de la documentation.

J'ai ainsi effectué la mise à jour en prenant en compte la réaffectation des éléments (ma div content).

Je l'ai donc placé après la fonction du clique :

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
$(document).ready(function(){
	$("a").click(function(){
		page = $(this).attr("href");
		$.ajax({
			url: "pages/"+ page,
			cache: false,
			success:function(html){
				afficher(html);
			},
			error: function(XMLHttpRequest,textStatus,errorThrown){
				javascript:document.location.href='404.html';
			}
		})
		return false;
	});
 
 
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		document.getElementById('content').innerHTML = xhr.responseText;
		afterAjax();
	}
 
 
});

En faisant ça il ne me prend plus en compte AJAX, les urls sont donc visible depuis le navigateur, et il n'y a plus les interactions entre les changements de page.

Je pense que je n'ai pas du placer le code au bon endroit, pourriez-vous m'orienter ?

Merci d'avance.
Jeff

[Bovino]

Code :

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

javascript:document.location.href='404.html';

C'est quoi cette syntaxe ?
javascript n'est pas une instruction JavaScript !

[jeffmartins]

Ah .. Pardon, j'avoue que je débute en javascript et je m'efforce d'essayer de parvenir à le comprendre.

Il est donc impossible de faire changer l'utilisateur de page lorsqu'il y a une erreur ?

Malheureusement cette erreur de syntaxe ne me fait pas avancer sur mon problème de changement de page. Auriez-vous une idée ?

Merci de l'intérêt que vous portez à mon problème,
Jeff

[Bovino]

Relis mon message et supprime juste javascript: qui sort je ne sais d'où !

[jeffmartins]

Ah oui effectivement, je l'avais pas compris dans ce sens là .. C'est vrai que ça parait beaucoup plus logique.

Effectivement là la page 404.html se charge bien quand le lien n'existe pas, merci.

J'ai malheureusement toujours le problème avec AJAX qui n'est pas pris en compte au changement de page, pourriez-vous m'éclaircir ?

Merci d'avance.

[jeffmartins]

Je me permet de faire remonter le sujet au cas ou quelqu'un aurait une idée.

[Xeuch]

Il y'a surement une variable ou un id qui n'a plus la bonne valeur à utiliser par Ajax après le premier chargement dans content.

Revois bien si tout est ok à ce niveau.

[jeffmartins]

Bonjour Xeuch,

En fait donc mon #content j'ai d'autres id, par exemple #menu ou autre, je ne sais pas si sa joue, vu que l'id parent reste bien #content

C'est peut être par le fait aussi que je n'ai pas bien placé le script permettant de réaffecter ma div content, je l'ai placée juste en dessous du script ajax ..

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
$(document).ready(function(){
	$("a").click(function(){
 
		page = $(this).attr("href");
		$.ajax({
			url: "pages/"+ page,
			cache: false,
			success:function(html){
				afficher(html);
			},
			error: function(XMLHttpRequest,textStatus,errorThrown){
				document.location.href='404.html';
			}
		})
		return false;
	});
			        xhr.onreadystatechange = function(){
				        if(xhr.readyState == 4 && xhr.status == 200){
				            document.getElementById('content').innerHTML = xhr.responseText;
				            afterAjax();
				        }
					});
function afficher(data){	
	$("#content").fadeOut(500, function(){
		$("#content").empty();
		$("#content").append(data);	
		$("#content").fadeIn(1000);	
	})		
}

Merci de ton aide

[Xeuch]

il y'a des informations dont AJAX a besoin pour fonctionner et pour faire le rechargement de ta nouvelle page et que tu a du écraser en insérant la première page lors de l'appel de AJAX la première fois.

vérifie si tu n'a pas changer les valeurs des id ou url dont AJAX a besoin qui sont dans le content ainsi que les url dont AJAX a besoin pour recharger la page.

A défaut montre le code la page de traitement AJAX et ta page courante.

[jeffmartins]

Bonjour,
Oui excusez-moi j'ai du mal à percevoir le problème au niveau de mes urls :/

Je vous donne le code du traitement ajax :

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
$(document).ready(function(){
	$("a").click(function(){
 
		page = $(this).attr("href");
		$.ajax({
			url: "pages/"+ page,
			cache: false,
			success:function(html){
				afficher(html);
			},
			error: function(XMLHttpRequest,textStatus,errorThrown){
				document.location.href='404.html';
			}
		})
		return false;
	});
// a partir d'ici, c'est le code pour réaffecter les éléments, mais en le mettant, ajax n'est plus effectif sur l'ensemble des changements de pages..
 
			        xhr.onreadystatechange = function(){
				        if(xhr.readyState == 4 && xhr.status == 200){
				            document.getElementById('content').innerHTML = xhr.responseText;
				            afterAjax();
				        }
					});
 
// La fonction permettant de générer les effets .. 
function afficher(data){	
	$("#content").fadeOut(500, function(){
		$("#content").empty();
		$("#content").append(data);	
		$("#content").fadeIn(1000);	
	})		
}

Un exemple de page :

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <!-- *********** JS ******** !-->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/navigation.js" type="text/javascript"></script>
    <!-- *********** FIN JS ******** !-->
 
</head>
 
<body>
 
<div id="header">
    <div class="middle">
        <h1 class="title_site" title="Retour à l'accueil"><a href="accueil.html#">Jeff Jacquelot</a></h1>
        <span class="desc_site">Développeur WEB - Portfolio Web</span>
    </div>
</div>
<div id="content">
      // le content est géré dans des pages externes et il y a donc des includes en php
        <h2>Bonjour!</h2>   
	    <p>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo,</p>
	    <p>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo,</p> 
    <div class="clear"></div>
    <div class="bloc_petit">
    	<h3>Informations</h3>
    	<ul>
    		<li>PBlablablablablalbal</li>
    		<li>Blablablablablalbal: BlablablablablalbalBlablablablablalbalBlablablablablalbal.Blablablablablalbal</li>
    	</ul>
    </div>
    <div class="bloc_petit">
    	<h3>Blabla</h3>
    	<ul>
    		<li>Blablablablablalbal</li>
    		<li>Blablablablablalbal</li>
    	</ul>
    </div>
</div>
<div id="footer">
    <p>..................</p>
</div>
</body>
 
</html>

Structure de la page index.php qui gère les includes :

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
<?php include('includes/header.php');
 
 
$d="pages/";
 
if(isset($_GET['page'])){
    $page=strtolower($_GET['page']);
    if(preg_match("/^[a-z0-9\-]+$/", $page) && file_exists($d.$page.".html")){
        include $d.$page.".html";
    }
    else {
        include $d."404.html";
    }
}
else {
    include $d."accueil.html";
}
 
include('includes/footer.php'); ?>

Merci d'avance.