reload javascript code on every 10 sec

Question

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.

    <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 javascript plugin

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

Now problem is when i add progress bar from load_more button(Which get data by load_more.php file and it insert it on index.php file). i can see the value but progress bar is not creating because code given above not loading after clicking on load_more. So, i want to know is there any way i can reload that code only. So, wherever there is a progress bar control placed it get the display the bar.

no. Everything is fine. I am not using above code in load_more.php. It is on index.php. Don't know what would be the best way. — Roxx
– Roxx, Commented Jun 29, 2015 at 5:10
after clicking on load_more button can you debug output with firebug or similar? — Droid
– Droid, Commented Jun 29, 2015 at 5:17
load_more only passing value to progress bar. on index.php there are php and js code(given above) which are not gettting trigger during load more — Roxx
– Roxx, Commented Jun 29, 2015 at 5:21

Droid · Accepted Answer · 2015-06-29 17:25:12Z

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

edited Jun 29, 2015 at 17:25

answered Jun 29, 2015 at 11:49

Droid

5694 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Roxx Over a year ago

SyntaxError: missing ; after for-loop initializer got an error in javascript. Any comment on this.for(i = 0, i < html.progress_bar.length, i++) {

Droid Over a year ago

change for(i = 0, i < html.progress_bar.length, i++) to for(i = 0; i < html.progress_bar.length; i++)

Roxx Over a year ago

javascript error fixed but progress bar not showing percentage line.

Roxx Over a year ago

Let us continue this discussion in chat.

Roxx Over a year ago

stackoverflow.com/questions/31123618/… have a look.

Collectives™ on Stack Overflow

reload javascript code on every 10 sec

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related