SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery ajax loop problem

    I'd like make this effection.

    Firstly, there have some tag links in my main page. click each one, post value to 2.php with jquery.ajax and turn back value in div#result.

    2.php have a search box. when search something in it. the result data will still show in the div#result.

    my problem is: I know if I will do jqeury ajax in the b.php, I shall write the jqeury code in the first success part. but this only can control one time, when I continue search in the search box, the jquery not work. I think I met a loop problem. How to solve it?


    1.php

    HTML Code:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">    
     $(document).ready(function(){
        $('.click').click(function(){
        var value1 = $(this).text();
            $.ajax({
                url: "2.php", 
                dataType: "html",
                type: 'POST', 
                data: "data=" + value1, 
                success: function(data){
                $("#result").html(data);
                $('#search').click(function(){
                var value = $('#search1').val();
                    $.ajax({
                        url: "2.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>

    2.php

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

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    When a new element is introduced to the page the jQuery .click() method becomes useless because it can only see elements that were part of the original DOM. What you need to use instead is the jQuery .live() method which allows you to bind events to elements that were created after the DOM was loaded. You can read more about how to use it at the below link.

    .live() jQuery API

    More or less a simple example below should help.

    Code JavaScript:
    $('#search').live('click', function(e) {
        // Prevent the default action
        e.preventDefault();
     
        // Your code here....
    });

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SgtLegend, great! This works well.

    I also asked in

    http://stackoverflow.com/questions/6...roblem-in-loop

    If u have an account in there, and paster your answer, I will give u the accepted mark. Thanks again

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome and i posted the answer on Stack overflow so users can reference it.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •