Reload javascript code every 10 seconds

Question

I have 3 progress bars on a webpage from database data. When the user clicks on the download, 3 more progress indicators are added from the database.

    <div id="progressBar<?php echo $rec['cid'];?>" class="tiny-green"><div></div></div>
<!-- Some codes are here --->
...
....
.....


<?php
                    $prj= mysql_query("select * from campaign where uid=$uid");
                        $record = array();
                        while($row = mysql_fetch_assoc($prj)){
                            $record[] = $row;
                        }

                    ?>
<script type="text/javascript">     
        <?php foreach($record as $rec){?>

        progressBar(<?php  $perc= $rec['value']*100/$rec['value1']; echo $perc;?>, $('#progressBar<?php echo $rec['cid'];?>'));

        <?php } ?>
</script>

Below is the javascript plugin

<script type="text/javascript" src="js/jquery.countdown.min.js"></script>

Now the problem is that I add a progress bar from the load_more button (which receive data from the load_more.php file and paste it into the index.php file). I see the value, but the progress bar is not created because the above code does not load after clicking load_more. So, I want to know if there is a way that I can only reload this code. Thus, wherever there is a progress bar control, it displays a panel.

Answer 1

, ,

$prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = array('data' => '', 'progress_bar' => array());
while($row = mysql_fetch_assoc($prj)) {
    $result['data'] .= '<div class="col-sm-1 col-md-4 unique" id="'.$rec['cid'].'">
        <div class="well">
            <div class="media services-wrap55 wow fadeInDown">
                <a href="view_project/'.$rec['cid'].'/'.$rec['slug'].'"><img class="img-responsive" src="'.$rec['poster'].'"></a><br>
                <a href="view_project/'.$rec['cid'].'/'.$rec['slug'].'"> <h4 class="media-heading">'.$rec['project_Name'].'</h4></a>
                <p> by <i>'.$rec['user_name'].'</i></p>
                <p> '.$rec['short_dis'].'</p>
                <a class="" href="view_project/'.$rec['cid'].'/'.$rec['slug'].'">More ... </a>
                <p>
                    <div id="progressBar'.$rec['cid'].'" class="tiny-green"><div></div></div>
                    <h6>'.($rec['view']*100/$rec['view2']).'% ( <i class="fa fa-user"></i>'.$rec['view']. ') '.$rec['view2'].' views.</h6>
                </p> 
                <div class="counter-inner"> <div id="example1" data-countdown="'.date("m/d/Y h:i:s", strtotime($rec['Closing_Date'])).'"></div></div><p> <!-- Work on this -->
                <div class="col-sm-11">
                    <div class="entry-meta">
                        <span><font color="#339933"><i class="fa fa-comment"></i> </font> '.$rec['comment'].' Comments </a></span><!-- Work on this -->
                        <span><font color="#339933"><i class="fa fa-thumbs-up"></i></font> '.$rec['up_count'].' </a></span>
                        <span><font color="#339933"><i class="fa fa-thumbs-down"></i></font> '.$rec['down_count'].' </a></span>
                        <span><font color="#339933"><i class="fa fa-star"></i> </font> '.$rec['fav_count'].' Fav </a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>';
    $result['progress_bar'][] = array('cid' => $rec['cid'], 'perc' => $rec['value'] * 100 / $rec['value1']);
}


$(document).ready(function() {
    $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html.data) {
                $('div').append(html.data);//$('.main-div') ?
                $('#more').text('Load More Project'); //add text "Load More Post" to button again
                for(i = 0; i < html.progress_bar.length; i++) {
                    progressBar(html.progress_bar[i]['perc'], $('#progressBar' + html.progress_bar[i]['cid']));
                }
            } else {
                $('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    });
});