Discussion :

[SrgtPepper]

Bonjour,

A l'aide de la fonction .ajax() de JQuery je charge le contenu d'une page.
Mais je voudrais récupérer seulement le contenu d'une div de cette page. J'y arrive grâce à la fonction .find() mais du coup il ne me charge plus les javascripts contenus dans cette div.

Voici mon script :

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
 
<script type="text/javascript">
$(document).ready(function() {
	var $contenu_div = $('#cadre_principal div');
	var page = $('#nav li a:first').text(); // par défaut c'est Index
 
	// au clic sur un lien du menu
	$('#nav li a').on('click', function() {
		$('#nav li').attr('class', '');
		$(this).parents().attr('class', 'active');
 
		// on récupère le nom de la page demandée
		var pageDemandee = $(this).text();
 
		// si on appelle une page qui n est pas celle affichée
		if(pageDemandee != page) { 
 
			// on met en mémoire la page
			page = pageDemandee;
 
			//chargement dans la div
			$.ajax({
				type: 'POST',
	   			url: $(this).attr('href'),
	   			data: {userlogin: 1},
	   			dataType : 'html',
	   			success: function(data){
	   				var dom = $(data).find('#madiv');
					$contenu_div.hide().html(dom).fadeIn();
 
	   			}
			});
		}
		return false;
	});
});
</script>

la div contenue dans la page chargée est du style :

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
 
<div id="madiv">
 
<!-- Contenu html -->
 
<script type="text/javascript">
 // Mes différents scripts
 // script 1
</script>
<script type="text/javascript">
 // script 2
</script>
<script type="text/javascript">
 // script 3 ...
</script>
 
</div>

Merci d'avance.

[Bovino]

C'est une très mauvaise façon de procéder de faire comme ça, mais tu peux utiliser .load().

[SpaceFrog]

perso je passe plutot par getScript() ou append()

[SrgtPepper]

Hum, simplement comme ça?

Code :

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

1
2
3
 
var dom = $(data).find('#madiv');
$contenu_div.hide().load(dom).fadeIn()

Etant un projet d'étude je n'ai pas vraiment le temps de refaire ça dans les règles de l'art.
Mais j'aimerais bien savoir quelle est la bonne méthode à mettre en place.

Si je procède ainsi :

Code :

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

1
2
 
$contenu_div.hide().load($(this).attr('href')+" #madiv", {userlogin : 1}).fadeIn();

Je charge bien ma div mais toujours pas les scripts contenus.

[SylvainPV]

issu de la doc de jquery.ajax :

If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string

ce qui pourrait expliquer que tes scripts ne fonctionnent pas dans ton cas.

Bovino a raison, c'est très moche de charger en ajax des scripts au milieu de HTML, et source d'énormément d'erreurs. Mieux vaut externaliser tes Javascript et les charger individuellement avec $.getScript()

[SrgtPepper]

Oui je conçoit que c'est pas vraiment la meilleur façon. Mais c'est celle qui serait le plus simple pour moi.

En fait si j'ajoute la page telle quelle, les scripts fonctionnent et sont présent.
Par contre en manipulant les données reçu pour récupérer juste une partie de la page, il me supprime les balises <script> et leurs contenus.