fonction jquery qui charge le code html dans un div et ensuite charge un autre contenu dans le div à l'intérieur du html chargé

Question

fonction jquery qui charge le code html dans un div et ensuite charge un autre contenu dans le div à l'intérieur du html chargé

Demandé el 22 de Février, 2012: Quand la question a-t-elle été
11814 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais savoir comment charger une page html (page1.html) dans un div de la page active (index.html) et ensuite charger une autre page html (page2.html) dans un div qui sera à l'intérieur de la page chargée (page1.html). Je veux dire.

index.html

<div id="content"></div>
<a class="link" href="#">load</a>

script

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content').load('page1.html', function(){
            $('#content2').load('page2.html');
        });
    });
});

page1.html

<div id="content2"></div>

Cela fonctionne bien pour un seul clic, mais au deuxième clic, la page 2.html est chargée pendant 0,5 seconde, puis la page 1.html est chargée.

Quel est le problème ?

Merci.

Demandé el 22 de Février, 2012 par Raphael D.G

Answer 1

5 Réponses

Answer 2

1voto

GrahamB Points 154

L'approche que vous avez adoptée semble erronée. Si vous n'avez pas d'autre choix que de remplir la page en utilisant cette approche de requêtes ajax multiples, essayez d'abord de remplir explicitement la div de contenu avec les données de la page 1, avant de remplir la div de contenu 2. Cela signifie que vous ne pourrez pas utiliser le sélecteur .load et que vous devrez effectuer une requête ajax normale, par exemple :

$(document).ready(function() {
    $('a.link').live('click', function() {

        $.ajax({
                url : 'page1.html',
                success: function(data){
                    $('#content').html(data);
                    $('#content2').load('page2.html');
                    }
                });
    });
});

Répondu el 26 de Février, 2012 par GrahamB (154 Points )

Answer 3

1voto

Christopher Ramírez Points 1127

En utilisant vos exemples de code, je ne peux pas reproduire l'erreur - ou plutôt le "bug" - en utilisant jQuery 1.6.4 sur Chrome, Firefox et même IE8.

Ce que j'ai remarqué est un comportement inattendu avec le cache du navigateur activé. Changements de source effectués le Page1.html n'ont pas été récupérés du serveur après le tout premier clic sur le lien. Je vous recommande de désactiver le cache du navigateur avec Firebug ou Chrome Developer Tools et de refaire vos tests.

Aussi, veuillez essayer avec une version mise à jour de jQuery, ou au moins la même version que celle que j'utilise à partir de http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js .

Si l'une des méthodes ci-dessus ne fonctionne pas, essayez de définir un délai pour la récupération. page2.html .

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content').load('page1.html', function(){
            setTimeout("$('#content2').load('page2.html')", 250); // try diff. values
        });
    });
});

Si cela ne résout pas le problème, il serait utile de voir la source complète de page1.html et page2.html.

Répondu el 2 de Mars, 2012 par Christopher Ramírez (1127 Points )

Answer 4

1voto

codef0rmer Points 4551

Essayez ça.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#link').live('click', function() {
        $.ajax({
            url : 'ajax_info.txt', 
            dataType : 'text', 
            success: function(data){
                var $response1 = $('<div />').html(data);
                $.ajax({
                   url : 'ajax_info.txt', 
                   dataType : 'text', 
                   success: function(data){
                      responseCombined = $response1.find('p:last').html(data).end().html();
                      $('#content').html(responseCombined);
                   }
                });
            }
        });
    });
});
</script>
</head>
<body>
<div id="content"></div>
<div id='link'>load</div>
</body>
</html>

Dans le callback de succès de la première requête, j'ai essayé de charger la réponseHTML dans un fichier temporaire. <div> et dans le callback de la seconde requête, j'ai recherché l'élément p:last (dans votre cas, ce sera #content2) et y mettre la réponse de la deuxième requête ajax. Enfin, mettez les données combinées dans #content .

Pour une démonstration, rendez-vous sur http://w3schools.com/ajax/tryit.asp?filename=tryajax_first et exécutez le code ci-dessus.

Répondu el 2 de Mars, 2012 par codef0rmer (4551 Points )

Answer 5

1voto

DefyGravity Points 2745

Votre page principale html

<body>
<a href="#" class="link">i load your page</a>
<div id="container-page1">
</div>
</body>

votre page1 html

<div>
   <p>i'm important text</p>
   <div id="container-page2"></div>
</div>

jquery > version 1.7

J'ai utilisé un déclenchement d'événement parce que cela permet de garder le javascript plat. Sinon, vous risquez de vous retrouver avec du code profondément imbriqué si vous devez passer 3 ou 4 appels ajax plus loin par la suite !

si votre jQuery est < 1.7, faites-le moi savoir et je pourrai créer des équivalents .delegate / .live.

$(document).ready(function() {
    $('body').on({'click': function(evt) {
        $(evt.data.containerSelector).load(evt.data.page1Url, function(data, status, jqxhr){
            $(this).trigger(evt.data.loadPage2Event);
        });
    },'a.link',{page1Url:'page1.html',
 loadPage2Event:'loadPage2',
 containerSelector:'#container-page1'});

    $("#container-page1",'body').on({'loadPage2':function(evt){
       $(this).load(evt.data.page2Url);
  }},'#container-page2',{page2Url:'page2.html'});
});

Répondu el 2 de Mars, 2012 par DefyGravity (2745 Points )

Answer 6

1voto

pepillo Points 360

Avec la dernière version de JQuery, et exécuté sur Chrome, Firefox et IE 9, ce qui suit fonctionne parfaitement bien :

INDEX.html

<html>
<head>
    <title>Index</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('a.link').live('click', function() {
                $('#content').load('link1.html', function(){
                     $('#content2').load('link2.html');
                });
            });
        });
    </script>
</head>
<body>
    <div id="content"></div>
    <a class="link" href="#">load</a>
</body>
</html>

lien1.html

<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <p>This is page 1</p>
    <div id="content2"></div>
</body>
</html>

lien2.html

<html>
<head>
    <title>Page 2</title>
</head>
<body>
    <p>This is page 2</p>
</body>
</html>

Je dirais donc que soit vous n'avez pas la dernière version de jQuery, soit le problème se situe dans un autre élément de la page1 ou de la page2.html.

Répondu el 2 de Mars, 2012 par pepillo (360 Points )

fonction jquery qui charge le code html dans un div et ensuite charge un autre contenu dans le div à l'intérieur du html chargé

Réponses

Votre page principale html

votre page1 html

jquery > version 1.7

Questions en vedette

Top Tags

Prograide.com

Powered by:

fonction jquery qui charge le code html dans un div et ensuite charge un autre contenu dans le div à l'intérieur du html chargé

Réponses

Votre page principale html

votre page1 html

jquery > version 1.7

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: