10 votes

jQuery.post() à l'intérieur d'un jQuery.post()

Imaginez un site web dont le contenu est chargé via un menu à l'aide de jQuery .post() (ou .get()).

Imaginez qu'à l'intérieur de ce contenu dynamique chargé, il y ait un autre post jQuery pour afficher d'autres éléments sous le contenu.

(tout cela sans naviguer vers un nouveau fichier dans la barre d'adresse)

Voici ce que je veux dire (mais seulement le cadre de base...) :

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<!-- the result of the search will be rendered inside this div -->
<br />
<div id="result" name="result"></div>

<script>
window.onload = (function(){
    /* attach a submit handler to the button */

    $("#click1").click(function(event) {
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: 'n: term',
              success: function(msg) {
                $( "#result" ).empty().append( msg );
              }
         });
    });
});
</script>

</body>
</html>

Donc, arrêtez de rire, je sais que la page ne se charge que dans le div et cela ne fonctionne pas à cause des mêmes ID... c'est pas Inception ici ;-)

Mais même si j'y associe une toute nouvelle page avec de nouveaux identifiants, cela ne fonctionne pas...

Est-il possible d'ajouter un nouveau AJAX jQuery à l'intérieur d'un contenu existant, déjà chargé en AJAX jQuery ?

Je pense que oui, mais je n'arrive pas à trouver mon erreur...

/EDIT

Je pense que je dois donner un peu plus d'informations :

test.php

<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<div id="result" name="result"></div>

<script>
window.onload = (function(){        
    $("#click1").click(function(event) {
        $.ajax({
            url: 'test2.php',
            type: 'POST',
            data: 'n: term',
              success: function(msg) {
                $( "#result" ).empty().append( msg );
              }
         });
    }); 
    $("#click2").click(function(event) {
        $.ajax({
            url: 'test3.php',
            type: 'POST',
            data: 'n2: term',
              success: function(msg) {
                $( "#result2" ).empty().append( msg );
              }
         });
    });
});
</script>

test2.php

<input type="text" name="n2" id="n2" placeholder="Search..." />
<button id="click2">Go</button>
<div id="result2" name="result2"></div>

test3.php

<?php
echo 'It´s working!';
?>

Ma dernière question : Pourquoi ça ne marche pas ? Pourquoi n'affiche-t-il pas "Ça marche !" à la fin ?

12voto

Darcy Points 1613

Vous pouvez placer un autre message dans le gestionnaire de succès du premier message :

$("#click1").click(function(event) {
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: 'n: term',
          success: function(msg) {
            $( "#result" ).empty().append( msg );

            $.ajax({/* params here */});
          }
     });
});

1voto

thirtydot Points 114021

Cuando $("#click2").click(..); cours, le #click2 n'existe pas, donc cela ne fonctionne pas.

Vous pouvez soit déplacer $("#click2").click(..); à l'intérieur de la success pour la première demande, ou vous pouvez utiliser le gestionnaire .live() .

0voto

James Montagne Points 44517

Je crois que le problème est l'utilisation de window.onload dans la réponse AJAX. window.onload a déjà tiré pour la fenêtre. Vous ne chargez pas une nouvelle fenêtre, donc cela ne se déclenchera pas. Essayez de le supprimer et voyez si cela fonctionne.

0voto

3nigma Points 21164

D'après ce que j'ai compris, vous devez utiliser live avec les éléments ajoutés dynamiquement comme

$("#click2").live("click",function(){

//do ajax here

});

ou vous pouvez utiliser delegate

$("#result").delegate("#click2","click",function(){

// do the ajax here

});

jquery live

jquery delegate

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X