Boîte de recherche dans une page jQuery ajax success - problèmes dans la boucle

Question

Tout d'abord, il y a des liens vers des tags sur ma page d'accueil. Cliquez sur chacun d'entre eux, affichez la valeur dans b.php con jquery.ajax et retourner la valeur en div#result .

b.php dispose d'une boîte de recherche. Lorsque l'on y effectue une recherche, les résultats s'affichent toujours dans la page d'accueil. div#result .

mon problème est le suivant : je sais si je vais faire de l'ajax jQuery dans l'application b.php J'écrirai le code jQuery dans la première section. success part . mais cela ne peut contrôler qu'une seule fois, lorsque je poursuis la recherche dans la boîte de recherche, le jQuery ne fonctionne pas. Je pense avoir rencontré un problème de boucle. Comment le résoudre ?

a.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">    
 $(document).ready(function(){
    $('.click').click(function(){
    var value1 = $(this).text();
        $.ajax({
            url: "b.php", 
            dataType: "html",
            type: 'POST', 
            data: "data=" + value1, 
            success: function(data){
            $("#result").html(data);
            $('#search').click(function(){
            var value = $('#search1').val();
                $.ajax({
                    url: "b.php", 
                    dataType: "html",
                    type: 'POST', 
                    data: "data=" + value, 
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            });
            }
        });
      });
    });
</script>
<a rel="aa" class="click">aa</a>
<a rel="aa" class="click">bb</a>
<div id="result"></div>

b.php

<?php
echo $_POST['data'];
?>
<form name="form">
<input type="text" value="" id="search1">
<a name="nfSearch" id="search">search</a>
</form>

Answer 1

Lorsqu'un nouvel élément est introduit dans la page, la méthode jQuery .click() devient inutile car elle ne peut voir que les éléments qui faisaient partie du DOM d'origine. Vous devez utiliser la méthode jQuery .live() qui vous permet de lier des événements à des éléments qui ont été créés après le chargement du DOM. Vous pouvez en savoir plus sur la façon de l'utiliser en cliquant sur le lien ci-dessous.

.live() - API jQuery

$('#search').live('click', function(e) {
    // Prevent the default action
    e.preventDefault();

    // Your code here....
});

Answer 2

Tout d'abord, je pense que vous devriez attacher l'appel ajax au clic sur le lien : comme vous le faites actuellement, il suffit d'exécuter un appel ajax dès que la page est chargée.

    $(document).ready(function(){
//when you click a link call b.php
    $('a.yourclass').click(function(){
        $.ajax({
            url: "b.php", 
            dataType: "html",
            type: 'POST', 
            data: "data = something", 
            success: function(data){
            $("#result").html(data);
            var value = $('#search').val();
                $.ajax({
                    url: "b.php", 
                    dataType: "html",
                    type: 'POST', 
                    data: "data =" + value, 
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            }
        });
      });
    });

De cette manière, à chaque fois qu'un lien avec la classe "yourclass" est cliqué, un appel ajax à b.php est envoyé et s'il réussit, un autre appel est fait (toujours à b.php). Je ne comprends pas si c'est ce que vous cherchez, si vous postez votre html ma réponse pourra être meilleure.

Dans le fichier b.php, il faut bien sûr ajouter du code html qui pourra être utilisé dans le callback.

Answer 3

Il est étrange que vous essayiez de faire deux requêtes ajax comme cela, une seule devrait suffire. Si vous avez besoin de plusieurs boîtes de texte, il vous suffit d'ajuster vos sélecteurs.

L'ensemble de votre code peut se résumer à quelque chose comme ceci :

$(document).ready(function() {
    $('#result').load('b.php', { data: $('#search').val() });
});

Ainsi, si vous souhaitez rechercher la valeur lorsque vous cliquez sur un lien (pour les liens à l'intérieur de #container ):

$('#container').delegate('a', 'click', function() {
   // .text() will get what's inside the <a> tag
   $('#result').load('b.php', { data: $(this).text() });
});