（codeigniter）使用jquery調用控制器以將視圖加載到視圖中

Question

情況就是這樣。 添加新評論后。 它將在之前的評論之后添加。

到目前為止，這是理論的步驟。 這些代碼尚未嘗試。 這是添加新評論后頁面刷新的地方。

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

到目前為止我的代碼

jQuery的：

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

控制器：

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>

一行注釋html

<div class="form-group prevcomments">
    <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 New</span> &nbsp; <span class="todo-comment-date">Jan 1, 1970 at 9:00am</span>
                    </p>
                    <p class="todo-text-color content">
                        <?php echo "new comment is here"?>  
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>

我知道如何在視圖中調用視圖。 但是我只是不知道是否可以使用jquery調用控制器以將視圖加載到視圖中。

Answer 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

    }

});