0

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');
    });
});
6
  • 1
    Re-run the .each() in your AJAX callback. Commented Jun 29, 2015 at 19:10
  • Can you show your AJAX call code? Commented Jun 29, 2015 at 19:10
  • move $('[data-countdown]').each(function() { code block after $('#main-div').append(html); Commented Jun 30, 2015 at 2:49
  • @droid i will update the above code in ajax. is there anything else to change? Commented Jun 30, 2015 at 3:40
  • It worked. Could you please paste it in answer? Thanks Commented Jun 30, 2015 at 3:50

1 Answer 1

1

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');
  });
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.