Ajax, jQuery, PHP et insertions

**nico.mrgreen** · 14/02/2013, 17h51

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 php :

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

1
2
3
4
5
6
7
<?php
include("header.php");
 
include("page2.php");
 
include("footer.php");
?>

header.php

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
<?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 html :

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

1
2
3
4
5
            </div>
        </div>
 
    </body>
</html>

page1.php

Code php :

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

1
2
3
4
Ma page 1
<?php
echo $_GET['val1'];
?>

page2.php

Code php :

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

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 :

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

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 :

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

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

**nico.mrgreen** · 15/02/2013, 16h13

Double post, mais solution trouvée.

Remplacer :

Code :

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

$("#blabla").click(function() { });

par :

Code :

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

$("#content").on("click", "#blabla", function() { });

Ajax, jQuery, PHP et insertions

jQuery

Vue hybride

Discussions similaires

Partager

Partager