添加帖子并显示它而不刷新页面Codeigniter?

时间:2015-12-28 19:47:06

标签: javascript php jquery codeigniter

大家好我正在使用Codeigniter 3.0.3

在我的项目中有一个墙可以通过json jquery数据分享帖子我看到很多网站当有人在同一页面上发布新帖子时没有刷新页面我通过jquery成功发布的数据我使用{ {1}}我需要jquery在成功发布数据时添加一个新的foreach循环我搜索越来越多,但我没有帮助回答

这是我的代码

控制器:

window.location.reload(true);

型号:

    function AddPost()
    {

        $this->load->helper('string');
        $this->load->helper('date');
        $this->load->model('users_model');
        $query = $this->users_model->addnewpost();

        if($query == TRUE)
        {
            echo 'true';
        }
        else
        {
            echo 'false';
        }

    }

查看:

function addnewpost () {

    $data = array (
        'pid'           =>      random_string('numeric', 16),
        'post_author'   =>      $this->session->userdata('username'),
        'post_date'     =>      gmt_to_local(),
        'post_text'     =>      $this->input->post('post_text'),
        'author_id'     =>      $this->session->userdata('id'),
        'author_ip'     =>      $this->input->ip_address()
    );

    $query = $this->db->insert('users_posts', $data);

    if($query == true) {

        $this->db->set('u_posts', 'u_posts+1', FALSE);
        $this->db->where('uid', $this->session->userdata('id'));
        $this->db->update('confirmed_users');

        return true;
    } else {
        return false;
    }

}

最后这是我的javascript代码:

<!-- post status panel -->

<div class="panel panel-default">
    <div class="panel-body">
        <form name="addnewpostajax" class="addnewpostajax" method="post" role="form">
            <label for="StatusText"><strong>Update status</strong></label>
            <textarea class="form-control StatusText" name="StatusText"></textarea>
            <hr class="myown">
            <div class="btn-group">
                <a class="btn btn-default btn-sm"><span class="fa fa-image fa-lg"></span></a>
                <a class="btn btn-default btn-sm"><span class="fa fa-link fa-lg"></span></a>
                <a class="btn btn-default btn-sm"><span class="fa fa-video-camera fa-lg"></span></a>
            </div>
            <div class="pull-right">
                <button type="submit" name="postnewstatus" class="btn btn-default btn-sm">Post</button>
            </div>
        </form>
        <div class="clear"></div>
    </div>
</div>

<!-- / post status panel -->

<!-- status panel -->


<?php if($allposts): ?>
    <?php foreach ($allposts as $post): ?>
        <div class="panel panel-default" style="border-radius:0;">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0;">
                    <img class="img-rounded pull-left" src="<? echo base_url($post->image) ?>" width=30px height=30px>
                    <div style="margin-top: 5px;">
                        <a href="<? echo base_url('home?p=Profile&u='.$post->post_author) ?>"><small style="margin-left: 5px;"><?=$post->post_author?></small></a>
                        <span style="font-size: 75%;" class="text-muted pull-right"><span class="fa fa-clock-o"></span>
                        <?php $post_date = $post->post_date; $now = time(); $units = 1; ?>
                            <? echo timespan($post_date, $now, $units) ?>
                                ago</span>
                    </div>
                </div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="col-md-12 text-muted"><small><?=$post->post_text?></small></div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="btn-group">
                    <?php if($this->users_model->liked($post->pid)): ?>
                        <a class="btn btn-default btn-sm disabled"><span class="fa fa-check"></span> Liked</a>
                        <?php else: ?>
                            <a class="btn btn-default btn-sm like-btn" post-id="<?=$post->pid?>"><span data-toggle-tooltip="tooltip" data-placement="top" title="Like" class="fa fa-thumbs-up fa-lg"></span></a>
                            <?php endif; ?>
                                <a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#<?=$post->pid?>Comment"><span data-toggle-tooltip="tooltip" data-placement="top" title="Comment" class="fa fa-comment fa-lg"></span></a>
                                <a class="btn btn-default btn-sm"><span data-toggle-tooltip="tooltip" data-placement="top" title="Share" class="fa fa-share fa-lg"></span></a>
                </div>
                <div class="pull-right-custom text-muted"><small><?=$post->post_likes?> Like - <?=$post->post_comments?> Comment</small></div>
                <div class="clear"></div>
                <div id="<?=$post->pid?>Comment" class="collapse">
                    <br>
                    <form name="addcommentajax" post-id="<?=$post->pid?>" class="form-horizontal addcommentajax" role="form" method="POST">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm comment-<?=$post->pid?>" post-id="<?=$post->pid?>" placeholder="Add Comment">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-default">Publish</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <?Php if (!empty($postcomments)):?>
                <?php foreach ($postcomments as $comment): ?>
                    <?php if (!empty($comment->post_id == $post->pid)): ?>
                        <? echo '<img class="img-rounded pull-left" src="'.base_url($comment->image).'" width="35px" height="35px" style="margin:3px 5px 3px 5px;">'; ?>
                            <? echo '<div class="panel-footer">'; ?>
                                <? echo '<small class="text-muted"><a href="'.base_url('home?p=Profile&u=').$comment->username.'">'.$comment->username.'</a> '.$comment->comment_text.'</small>'; ?>
                                    <? echo '<small style="margin-top: 2.5px;" class="pull-right text-muted">' . timespan($comment->comment_date, time(), 1) . '</small>'; ?>
                                        <? echo '</div>'; ?>
                                            <?php endif; ?>
                                                <?php endforeach; ?>
                                                    <?php endif; ?>
        </div>
        <?php endforeach; ?>
            <?php endif; ?>

                <!-- / status panel -->

全部谢谢

1 个答案:

答案 0 :(得分:3)

基本上你需要添加刚添加的新帖子。

创建一个单一帖子块的视图,它似乎在你的foreach中:

//single-post-block.php

<div class="panel panel-default post-block" style="border-radius:0;">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0;">
                    <img class="img-rounded pull-left" src="<? echo base_url($post->image) ?>" width=30px height=30px>
                    <div style="margin-top: 5px;">
                        <a href="<? echo base_url('home?p=Profile&u='.$post->post_author) ?>"><small style="margin-left: 5px;"><?=$post->post_author?></small></a>
                        <span style="font-size: 75%;" class="text-muted pull-right"><span class="fa fa-clock-o"></span>
                        <?php $post_date = $post->post_date; $now = time(); $units = 1; ?>
                            <? echo timespan($post_date, $now, $units) ?>
                                ago</span>
                    </div>
                </div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="col-md-12 text-muted"><small><?=$post->post_text?></small></div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="btn-group">
                    <?php if($this->users_model->liked($post->pid)): ?>
                        <a class="btn btn-default btn-sm disabled"><span class="fa fa-check"></span> Liked</a>
                        <?php else: ?>
                            <a class="btn btn-default btn-sm like-btn" post-id="<?=$post->pid?>"><span data-toggle-tooltip="tooltip" data-placement="top" title="Like" class="fa fa-thumbs-up fa-lg"></span></a>
                            <?php endif; ?>
                                <a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#<?=$post->pid?>Comment"><span data-toggle-tooltip="tooltip" data-placement="top" title="Comment" class="fa fa-comment fa-lg"></span></a>
                                <a class="btn btn-default btn-sm"><span data-toggle-tooltip="tooltip" data-placement="top" title="Share" class="fa fa-share fa-lg"></span></a>
                </div>
                <div class="pull-right-custom text-muted"><small><?=$post->post_likes?> Like - <?=$post->post_comments?> Comment</small></div>
                <div class="clear"></div>
                <div id="<?=$post->pid?>Comment" class="collapse">
                    <br>
                    <form name="addcommentajax" post-id="<?=$post->pid?>" class="form-horizontal addcommentajax" role="form" method="POST">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm comment-<?=$post->pid?>" post-id="<?=$post->pid?>" placeholder="Add Comment">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-default">Publish</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <?Php if (!empty($postcomments)):?>
                <?php foreach ($postcomments as $comment): ?>
                    <?php if (!empty($comment->post_id == $post->pid)): ?>
                        <? echo '<img class="img-rounded pull-left" src="'.base_url($comment->image).'" width="35px" height="35px" style="margin:3px 5px 3px 5px;">'; ?>
                            <? echo '<div class="panel-footer">'; ?>
                                <? echo '<small class="text-muted"><a href="'.base_url('home?p=Profile&u=').$comment->username.'">'.$comment->username.'</a> '.$comment->comment_text.'</small>'; ?>
                                    <? echo '<small style="margin-top: 2.5px;" class="pull-right text-muted">' . timespan($comment->comment_date, time(), 1) . '</small>'; ?>
                                        <? echo '</div>'; ?>
                                            <?php endif; ?>
                                                <?php endforeach; ?>
                                                    <?php endif; ?>
        </div>

您可以通过控制器的ajax渲染视图:

function AddPost()
    {

        $this->load->helper('string');
        $this->load->helper('date');
        $this->load->model('users_model');
        $query = $this->users_model->addnewpost();
        // here you need to get post details to pass in view
        $data = $this->users_model->postDetails();
        if($query == TRUE)
        {
            echo $this->load->view('signle-post-block',$data,TRUE);
        }
        else
        {
            echo 'false';
        }

    }

您的javascript函数应如下所示:

<script type="text/javascript">
$(document).ready(function() {
    $('.addnewpostajax').submit(function() {
        var post_text = $('.StatusText').val();
            jQuery.ajax({
                type: "POST",
                url: "<?php echo base_url('home/AddPost'); ?>",
                dataType: "html",
                data: {post_text},
                success: function(posted) {
                    if(posted != false) {
                        $('.post-block').last().after(posted);
                    } else {
                        alert('Faild');
                    }
                }
            });
           e.preventDefault();
    });
});
</script>

我刚刚复制了您的代码,以便您可以根据自己的需要减少工作量。