Jquery ne fonctionne pas sur page php distincte

**typiac** · 19/10/2012, 22h41

Bonjour,

J'espère que j'ai fait le bon choix en postant ici. J'hésitais entre php, jquery et javascript mais comme j'ai du mal a identifier la nature du problème, je m'excuse si j'ai commis une erreur!

Alors voilà, j'utilise jquery sur un site en php. Le principe est classique, un menu fait des appel de pages php (ces dernières sont en fait des sortes de grands menus déroulants) comme ceci:

Bouton dans menu.php intégré dans home.php insère une page.php dans un div...dans home.php bien sûr.

Lorsque je fais mon petit codage, avant de créer la page.php, je l'intègre directement dans home.php pour faire les tests plus rapidement...

Impeccable, ça marche.

Mais dès que je sors le code pour le mettre dans page.php afin de l'appeler que je le veux...mes animations ne marchent plus!

Voici un extrait sans doute plus parlant:

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
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document sans nom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ahah.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").css("cursor", "pointer");
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>
</head>
<body>
 
<a href="javascript:ahah('php/contenu1.php','bigside');"><div>BOUTON1</div></a>
<a href="javascript:ahah('php/contenu2.php','bigside');"><div>BOUTON2</div></a>
<a href="javascript:ahah('php/contenu3.php','bigside');"><div>BOUTON3</div></a>
 
 
    <div id="bigside">
        <?php include_once "php/contenu1.php" ?>
 
     </div>   
 
 
 
 
 
    </div>

Disons que mes effets recalcitrants sont sur contenu2.php:

Code :

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

1
2
3
4
5
6
<dt><div>Dossier 1</div></dt>
<dd>contenu</dd>
<dt><div>Dossier 2</div></dt>
<dd>contenu</dd>
<dt><div>Dossier 3</div></dt>
<dd>contenu</dd>

Ici, le script de la home.php est sensé me cacher ce qui se trouve entre les balises dd pour les faire apparaître avec l'évènement click.

Comme vous pouvez le constater, je n'ai pas mis de lien vers les scripts dans la page contenu2.php car ils sont dans la home.php

Alors j'ai testé de mettre le script dans cette page mais ça ne marche pas plus alors que si j'insère le contenu de la page contenu2.php directement dans la div de la home.php, ça marche très bien.

Alors, je suis en train de me dire que je n'arrive pas à saisir comment les appels de page php fonctionnent. J'ai donc envie de poser la question de façon plus ouverte de façon à vraiment comprendre et non à obtenir juste une réponse à 1 problème!:

- Si j'appel des pages php à insérer dans un div via javascript, si ces pages php contiennent elles-même du javascript, ou dois-je mettre les scripts?
- le fait d'appeler deux fois jquery ne risque t-il pas de créer un conflit?

Voilà, j'ai essayé d'être le plus clair possible!

**typiac** · 19/10/2012, 23h17

Afin de faire avancer le chimilimiblick, je viens de faire ne autre constatation:

lorsque ma page php contenant les div où je veux mettre mon animation est appelée dans ma home.php par:

<?php include_once "php/page.php" ?>...ça marche.

Je clique sur un autre bouton et l'include disparaît pour faire apparaître une autre page php. impecc.

Je clique sur le bouton permettant de rappeler la page php initiale....patatra...ça ne marche plus!

Bizarre non?

**danielhagnoul** · 19/10/2012, 23h20

Bonsoir

Le contenu de "bigside" est dynamique.

Code :

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

1
2
// http://api.jquery.com/on/
$( "#bigside" ).on( "click", "dt", function(){ ... });

et le contenu de la méthode ahah() :

Code :

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

1
2
3
4
5
6
7
var jObj = $( "#" + arguments[1] );
 
jObj.load( arguments[0], function(){
	$("dd", jObj )
		.hide()
		.css("cursor", "pointer");
});

**typiac** · 19/10/2012, 23h37

Je suis en train d'essayer de décrypter ce que tu viens d'écrire mais j'avoue que j'ai du mal. Que me suggères-tu?

Dans le doute, je mets le script ahah:

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
function ahah(url, target, delay) {
  var req;
  document.getElementById(target).innerHTML = 'images/1.gif';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(req, url, target, delay);};
    req.open("GET", url, true);
    req.send("");
  }
}  
 
function ahahDone(req, url, target, delay) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML="ahah error:\n"+req.statusText;
    }
    if (delay != undefined) {
       setTimeout("ahah(url,target,delay)", delay); // resubmit after delay
	    //server should ALSO delay before responding
    }
  }
}

**typiac** · 19/10/2012, 23h48

BOn, je viens de remettre tous mes scripts dans home.php et j'ai donc:

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
 
<!doctype html>
<title>Document sans nom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ahah.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").css("cursor", "pointer");
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>
 
</head>
 
<body>
<a href="javascript:ahah('php/page1.php','bigside');">BOUTON</div></a>
<a href="javascript:ahah('php/page2.php','bigside');">BOUTON</div></a>
 
<div id="bigside"><?php include_once "php/page1.php" ?></div>

La page2.php est comme ceci:

Code :

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

1
2
3
4
5
 
<dt><div>titre1</div></dt>
<dd><div>contenu1</div></dd>
<dt><div>titre2</div></dt>
<dd><div>contenu2</div></dd>

Le script ne marche pas mais la page s'affiche....

Si je mets par défaut la page2.php dans l'include....ça marche. J'appelle une autre page php, elle se charge.
Je rappelle la page2.php....elle s'affiche mais le script ne fonctionne plus!

**typiac** · 20/10/2012, 00h32

Ok, je pense avoir compris mon problème, c'est ce que tu me disais:

Jquery ne voit pas un évènement lorsqu'il est associé au chargement d'une page alors que mon include php n'est pas appelée.

C'est pas forcément logique dans la mesure où lorsque j'introduis ladite include dès le chargement, lorsque je la fait disparaître puis réapparaître, jquery devrait s'en rappeler (pas malin celui-là!^^).

Bon, après quelque recherches, j'apprends qu'on peut associer l'évènement .live de cette façon:

Code :

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

1
2
 
$('.clickme').live('click', function() { /* ... */ });

Mais je n'arrive pas à l'adapter à mon script, je suis trop débutant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").css("cursor", "pointer");
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>

Comment dois-je le modifier?