javascriptjqueryajaxjquery-countdown

run javascript after loading data from ajax


index.php

<script type="text/javascript">
$( document ).ready(function() {
   $('[data-countdown]').each(function() {

      var $this = $(this), finalDate = $(this).data('countdown');

      $this.countdown(finalDate, function(event) {

         $this.html('Time Left : '+ event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() {

            $this.html('This campaignn has expired!');

          });
     });
 });

</script>

This is javascript used to display countdown timer. I am using jquery.countdown.min.js plugin.

<div class="counter-inner"> <div id="example<?php echo $rec['cid'];?>" data-countdown="<?php echo date("m/d/Y h:i:s", strtotime($rec['Closing_Date']));?>"></div></div><p>

Closing_Date and cid comes from database. When i access it is working fine.

But when i insert data by ajax to index.php. it doesn't do anything. It seems like javascript code is not executed.

I checked in firebug and found date is coming to index.php file but it is not showing countdown timer.

Please advise

Ajax

$(document).ready(function() {
    $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id');

        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html) {

                $('#main-div').append(html);
                $('#more').text('Load More Post'); //add text "Load More Post" to button again
            } else {
                $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    });
});

Solution

  • move $('[data-countdown]').each(function() to ajax js, like this:

    $(document).ready(function() {
      $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id');
    
        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html) {
                $('#main-div').append(html);
                $('#more').text('Load More Post'); //add text "Load More Post" to button again
                $('[data-countdown]').each(function() {
                    var $this = $(this), finalDate = $(this).data('countdown');
                    $this.countdown(finalDate, function(event) {
                    $this.html('Time Left : '+ event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() {
                        $this.html('This campaignn has expired!');
                    });
                });
            } else {
                $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
      });
    });