CODEWITHSUNDEEP
javascriptjqueryajax
stacky
stacky

Reputation: 311

Ajax script loading/Displaying only once

This script displaying the dynamic content for once thereafter its not working

Here is the code:

        $(document).ready(function(){
            $('.getmore').on('click',function(){
                var last_id = $(this).attr('id');   
                $.ajax({
                    type: 'POST',
                    url : 'http://localhost/tech1/services/getmore.php',    
                    data: 'last_id='+last_id,
                    beforeSend: function(){
                        $('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');  
                    },
                    success: function(data){
                        $('.getmore').remove();
                        $('#comments').append(data);
                    }
                });
            }); 
        });

Here is the complete php code:

        <?php

    mysql_connect('localhost','root','') or die('Error... Couldnt connect..');
    mysql_select_db('mydb') or die('Error... Couldnt select the Db..');

        $records = mysql_query(' SELECT * FROM `compare_post_comments` WHERE `post_id`=37 limit 5 ');
         if(mysql_num_rows($records)){
             echo '<div id="ajax_comment">';
            echo '<ul id="comments">';
            while($data = @mysql_fetch_array($records) ){
                echo '<li>'.$data['comments'].'</li>';
                $last_record = $data['sno'];
            }
            echo '<li class="getmore" id="'.$last_record.'">Get More</li>';
            echo '</ul>';
            echo "<span id='cmmnts'></span>";
            echo '</div>';
         }
    ?>

getmore.php code

    <?php

if( ( isset($_POST['last_id'])!=null ) && $_POST['last_id']!="" ){
    $last_id = $_POST['last_id'];
    //echo "::".$last_id;
    $qry = " SELECT * FROM `compare_post_comments` WHERE `post_id`=37 and sno > ".$last_id." limit 5 ";
    //echo "::".$qry;
    $comments = mysql_query($qry) or die('Error..');
    if( mysql_num_rows($comments) ){
        while( $data = mysql_fetch_array($comments) ){
            echo "<li>".$data['comments']."</li>";
            $last_id=$data['sno'];
        }
        echo "<li class='getmore' id='".$last_id."'>Get More</li>";
    }else{
        echo "<li class='nomore'>No More</li>";
    }
}else{
    echo "<li class='nomore'>No More</li>";
}

?>

ajax call working for once, thereafter its not clickable. I dont have much knowledge about ajax and javascript, explanation is appreciated.

Upvotes: 1

Views: 135

Answers (4)

Vivek Doshi
Vivek Doshi

Reputation: 58543

Just try live or bind in-place of "on" :

$('.getmore').live('click',function(){
}

or

$('.getmore').bind('click',function(){
}

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Try the deferred syntax of on instead:

$(document).on('click', '.getmore', function...

This will survive DOM changes. This answer presumes that your loaded data contains an object with class="getmore", as you are removing it from the DOM on success. If not you need to remove the remove as suggested by NewInTheBusiness, but probably replace it with empty() instead to remove the loading progress.

Note I have recently found problems with the version of on that only takes the event and function. In jQuery 1.10.3 it seems to not be firing when it should.

Upvotes: 1

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18651

  • Check your firebug console for any error
  • Remove this line $('.getmore').remove();
  • Delegate the click event to the element's static parent or to the document.

Try,

$(document).on("click",'.getmore', function( event ) {

});

Upvotes: 1

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

It's because you remove the getmore class after success.

Remove this line of code:

$('.getmore').remove();

Upvotes: 1

Related Questions