Remplacer le contenu d'un div par un autre

**clodette0071** · 30/01/2014, 11h22

Bonjour,
comme le titre l'indique, je travaille sur un site web et j'aimerais récupérer le contenu d'un div d'une page spécifique, le stocker dans une variable et l'utiliser pour remplacer le contenu du div d'une autre page. Je signale que je suis novice, à l'aide de bout de codes trouvés ça et là sur le net, j'ai constitué le code suivant mais ça ne marche pas. Pourriez vous m'indiquer l'erreur?

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
(function ($) {
$(document).ready(function(){ 
//j'initialise une variable qui récupère le contenu de la page source
var contenu_source = $('body.page-source div#main-content').html();
 
//Je place le lien qui permettra d'effectuer le switch entre les deux pages au //début de la page de destination
$('body.page-dest div#main-content').prepend('<a href=#>Cliquer pour changer l\'affichage</a>');
 
//je lui rajoute une classe lien-pour-switcher
    	$( 'body.page-dest div#main-content a' ).first().addClass( 'lien-pour-switcher' );
 
//cette classe me permet de donner l'instruction : au clique remplace le //contenu de destination par le contenu source
$(".liens-pour-switcher").click(function(){    			            
    $('body.page-dest div#main-content').replacewith(contenu_source);
});
});
})(jQuery);

Merci

**Bovino** · 30/01/2014, 11h30

Je comprends rien à ce que tu demandes...

Mais juste une chose, la balise <body> devant être unique dans la page, comment fais-tu pour avoir un $('body.page-source') et un $('body.page-dest') qui semblent ne pas correspondre au même élément ?

**clodette0071** · 30/01/2014, 11h52

En fait, l'idée de ce que je voudrais faire, c'est lorsque je suis sur la page destination et que je clique sur le lien que j'ai rajouté, le main content de la page de destination est remplacé par le main content de la page source.
oui, le 'body' est unique mais quand je rajoute la classe .page-source ou .page-destination, l'action s'effectue seulement sur la page que je veux et non pas toutes les pages du site (quand je ne précisais pas la classe de la page, le lien était rajouté sur toutes les pages...)

**manry** · 30/01/2014, 15h50

AHA trouvé en fais tu a 2 classes différentes ^^
la première

lien-pour-switcher

et la deuxième

liens-pour-switcher

tu a un 'S' en trop dans la deuxième

**clodette0071** · 30/01/2014, 17h01

ah oui! merci manry, j'ai rectifié mais toujours rien... peut être y a t-il un souci dans ma logique...

**manry** · 30/01/2014, 17h42

bon après plusieurs test je ne peux pas récuperer d'éléments d'autres pages mais comme je suis un gars bien je te passe mes codes de test pour que tu puisse voir par toi même (essaye de mettre une valeur en dur dans ta variable et tu verra qu'elle passe bien

)

source :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset = utf-8" http-equiv="Content-Type">
		<link href="impression.css" media="all" rel="stylesheet" type="text/css">
	</head>
 
	<body class = 'page-source'>
		<div id = 'main-content'>
			<p>foo</p>
		</div>
	</body>
</html>

dest:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset = utf-8" http-equiv="Content-Type">
		<script src = "jquery.js"></script>
		<script>
                $(document).ready(function(){ 
                        //j'initialise une variable qui récupère le contenu de la page source
                        var $contenu_source = $('.page-source #main-content p');
 
                        //Je place le lien qui permettra d'effectuer le switch entre les deux pages au //début de la page de destination
                        $('.page-dest #main-content').prepend('<a href=#>Cliquer pour changer l\'affichage</a>');
 
                        //je lui rajoute une classe lien-pour-switcher
                        $( '.page-dest #main-content a' ).first().addClass( 'liens-pour-switcher' );
 
                        //cette classe me permet de donner l'instruction : au clique remplace le //contenu de destination par le contenu source
                        $('.liens-pour-switcher').on('click', function(){
                                console.log($contenu_source);
                                $('.page-dest #main-content p').text($contenu_source);
                        });
                });
        </script>
	</head>
 
	<body class = 'page-dest'>
		<div id = 'main-content'>
			<p>bar</p>
		</div>
	</body>
</html>

copie directement les codes dans ton éditeur pour tester

Remplacer le contenu d'un div par un autre

jQuery

Vue hybride

Discussions similaires

Partager

Partager