(codeigniter)使用jquery调用控制器来加载视图内的视图

时间:2015-09-23 09:43:08

标签: javascript php jquery codeigniter

场景是这样的。添加新评论后。它将在上一个评论之后附加。

这是我到目前为止理论的步骤。 这些代码尚无任何尝试。这是在添加新评论后页面将刷新的位置。

imageView = UIImageView(image: UIImage(named: "background")!)
imageView!.contentMode = .ScaleAspectFill
view.insertSubview(imageView!, atIndex: 0)

我的代码到目前为止

jquery的:

1. type comment then press comment button
2. button will trigger ajax and get the values from the view
3. ajax will call controller and pass the values
4. controller will pass the values to the model and then store
5. controller will call a view and pass the newly added comment to this view 
note: this view only holds the css of a comment line
6. display this view after the previous comment

控制器:

$('.comments').on('click','.btn', function(event){
        event.preventDefault(); 
        var post_id = $(this).prev('.targetpost').val().trim();
        var comment = $(this).closest('.comments').find('textarea').val();
        if($(this).closest('.comments').find('textarea').val() == ''){
            alert("Comment cannot be blank");
        } 
        else 
        {
            $.ajax({
                type: "POST",
                url: BASE_URL+'classes/addcomment',
                dataType: 'json',
                data: {post_id: post_id, comment: comment},
                async: false
        }); 
        //i'm planning to call the controller here then load the view after the previous comment so no more refreshing of page
        location.reload();
    }   
    });

评论部分html

public function addcomment(){
    $data = array(
        'user_id' => $this->user_id,
        'post_id' => $this->input->post('post_id'),
        'content' => $this->input->post('comment')
    );
    $this->Comment_model->addcomment($data);
    //load a view and pass the values of the new comment then load this view inside the view using jquery
}

一行评论html

<div class="panel-body"><!-- the whole comment section -->
    <div class="tabbable-line">
        <ul class="nav nav-tabs ">
            <li class="active">
                <a href="#tab_1" data-toggle="tab">
                Comments </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
                <!-- POST COMMENTS -->
                <div class="form-group prevcomments"><!-- comments are looped using php and are displayed here -->
                    <div class="col-md-12">
                        <ul class="media-list">
                            <li class="media">
                                <a class="pull-left" href="javascript:;">
                                <img class="todo-userpic" src="../../assets/admin/layout2/img/avatar8.jpg" width="27px" height="27px">
                                </a>
                                <div class="media-body todo-comment">
                                    <p class="todo-comment-head">
                                        <span class="todo-comment-username">John Doe</span> &nbsp; <span class="todo-comment-date">Jan 1, 1970 at 9:00am</span>
                                    </p>
                                    <p class="todo-text-color content">
                                        <?php echo nl2br($comment->content);?>  
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <?php }}} 
                    $this->load->view('pages/new_comment'); // where new comment will appear
                ?>                                                              
                <!-- END POST COMMENTS -->
                <!-- POST COMMENT FORM -->
                <form method="post" class="comments"><!-- where user types new comment -->
                <div class="form-group">
                    <div class="col-md-12">
                        <ul class="media-list">
                            <li class="media">
                                <img class="todo-userpic pull-left" src="../../assets/admin/layout2/img/avatar4.jpg" width="27px" height="27px">
                                <div class="media-body">
                                    <textarea></textarea>
                                </div>
                            </li>
                        </ul>
                        <input type="hidden" value="<?php echo $post->post_id;?>" class="targetpost">
                        <button type="submit" class="pull-right btn btn-sm btn-circle green-haze">Comment</button>
                    </div>
                </div>
                </form>
                <!-- END POST COMMENT FORM -->
            </div>
        </div>
    </div>
</div>

我知道如何在视图中调用视图。但我只是不知道是否可以使用jquery来调用控制器来加载视图中的视图。

1 个答案:

答案 0 :(得分:1)

你快到了。你唯一遗漏的是ajax中的success()。 在控制器中,echo要在主视图中加载的内容。然后使用.html()在视图中插入数据。

$.ajax({
    type: "POST",
    url: BASE_URL+'classes/addcomment',
    dataType: 'json',
    data: {post_id: post_id, comment: comment},
    async: false,
    success: function(data) {//data will have what ever you echo'ed in controller
       alert(data)                
       $("#innerView").html(data);// you can add that html to your inner view

    }

});