Ajax, jQuery, PHP et insertions
Bonjour,
J'essaie tant bien que mal de me mettre au HTML5, en m'aidant également de jQuery pour pousser les fonctions dont j'ai besoin.
Mes compétences en développement web sont plutôt bonnes, mais je suis resté cantonné au HTML4 et au javascript assez basique, assez éloigné des méthodes de programmation qu'on utilise avec jQuery.
Je maitrise correctement l'Ajax à mon niveau, mais avec jQuery le fonctionnement est quand même bien différent.
J'explique mon problème. Par souci de simplification, j'ai épuré au maximum les codes sources.
Voici mes pages :
index.php
Code:
1
2
3
4
5
6
7
| <?php
include("header.php");
include("page2.php");
include("footer.php");
?> |
header.php
Code:
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
| <?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site</title>
<link rel="stylesheet" href="my.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script>
$(document).ready(function(){
// Requried: Navigation bar drop-down
$("nav ul li").hover(function() {
$(this).addClass("active");
$(this).find("ul").show().animate({opacity: 1}, 400);
},function() {
$(this).find("ul").hide().animate({opacity: 0}, 200);
$(this).removeClass("active");
});
// Requried: Addtional styling elements
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
$("nav ul li a").click(function() {
var adr = $(this).attr('href');
$.ajax({
type: "GET",
url: adr,
success: function(resultat) {
$('#content').html(resultat);
}
});
return false;
});
$("#blabla").click(function() {
var adr = $(this).attr('href');
var donnee1 = $(this).attr('val1');
$.ajax({
url: adr,
type: "get",
data: { "val1": donnee1 },
success: function(resultat) {
$('#content').html(resultat);
}
});
return false;
});
});
</script>
<script src="my.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/navbar.css">
</head>
<body>
<!-- Home -->
<div id="page">
<header>
<nav class="dark">
<ul class="clear">
<li>
<a href="page1.php">
Page 1
</a>
</li>
<li>
<a href="page2.php">
Page 2
</a>
</li>
</ul>
</nav>
</header>
<div data-role="content" id="content"> |
footer.php
Code:
1
2
3
4
5
| </div>
</div>
</body>
</html> |
page1.php
Code:
1
2
3
4
| Ma page 1
<?php
echo $_GET['val1'];
?> |
page2.php
Code:
1
2
| Ma page 2
<a id="blabla" val1="contenu de variable" href="page1.php">Test</a> |
Mon problème est donc le suivant :
Lors du chargement de la page index.php, j'include la page page2.php qui contient un lien qui va être interprété par Javascript pour insérer via Ajax la cible du lien, qui est page1.php
Jusque là, ça fonctionne sans problème.
Par contre, si je clique, dans mon menu, sur l'onglet Page 2, qui va donc m'afficher à nouveau le contenu de la page 2, si je clique sur mon lien Test, ça ne chargera plus la cible du lien via Ajax, mais ça ouvrira le lien de manière classique... Et je ne sais pas du tout comment il peut être possible de gérer ça autrement. Lorsque je manipulais Ajax sans jQuery, j'avais une fonction de ce type :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| function file(fichier) {
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
} |
Qui marchait sans problème même lorsque le lien était dans le contenu d'un fichier affiché via Ajax. Là, avec jQuery, impossible :(
En outre, je cherche aussi comment transmettre une variable via mon lien... J'ai fait un essai en créant une balise dans mon <a> mais c'est trop beau pour marcher...
Je suis complètement largué, je l'avoue. Avant, je créais mes petites fonctions comme ça :
Code:
1
2
3
4
| function cliquemoi(var1, var2) {
var retour = file('mapage.php?var1='+var1+'&var2='+var2);
document.getElementById('madiv').innerhtml = retour;
} |
C'était simple, basique et fonctionnel. Là, je paie ma galère :(
Merci par avance de vos conseils :)
