Question

我在网页上有3个进度条来自数据库数据。当用户点击加载时，还会从数据库数据中添加3个进度条。

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

以下是javascript插件

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

现在问题是我从load_more按钮添加进度条（通过load_more.php文件获取数据并将其插入index.php文件）。我可以看到值，但进度条没有创建，因为上面给出的代码在点击load_more后没有加载。所以，我想知道是否有任何方法我只能重新加载该代码。因此，无论何处放置了进度条控件，都会显示条形图。

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

每10秒重新加载一次javascript代码

1 个答案: