Reload Javascript Code On Every 10 Sec

I have 3 progress bar on webpage from database data . When user click on load more 3 more progress bar get added from database data.

Solution 1:

update with some modifications, hope it will help you

$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');
    });
});

Share