Question

我有一个部分视图，其中包含＆＃34;注释＆＃34;。当我提交一个新笔记时，我想重新加载部分视图并显示我的新笔记，所以我不必刷新整个页面。

我已将笔记插入数据库，并且ajax调用正常工作，但在.ajax成功时我正在调用location.reload（）。相反，我想调用我的局部视图并替换之前调用的视图生成的html＆＃34;查看edit_employee＆＃34;。

非常感谢您对此问题的任何帮助，感谢您抽出时间查看我的代码。

查看

＆＃13;

       <div class="col-md-6 col-lg-6">
            <div class="panel panel-default">

                <div class="panel-title">
                    Notes
                </div>
                
                
                <div class="panel-body">
                    <div id="notesList">
                        <?php $this->load->view("partial_views/note_list"); ?>
                    </div>
                    <form id="noteForm" class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <textarea class="form-control" rows="3" id="noteText" placeholder="Write a new note here..." required></textarea>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-sm-12">
                                <button type="submit" name="addNoteSubmit" id="addNoteBtn" class="btn btn-primary" style="width:100%;">Add Note</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#noteForm").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>",
                type: "post",
                data: "noteText="+$("#noteText").val(),
                dataType: "text",
                success: function (data) {
                    alert(data);              
                    location.reload();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });
</script>

＆＃13;

部分视图

＆＃13;

<?php if($notes != null): ?>
    <a href="#" id="deleteCheckedBtn" class="btn btn-danger float-r"><i class="fa fa-check"></i>Delete Checked</a>
    <table class="table table-hover">
        <thead>
            <tr>
                <td class="text-center"><i class="fa fa-trash"></i></td>
                <td>ID</td>
                <td>Note</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            <?php foreach($notes as $note): ?>
                <tr>
                    <td class="text-center"><div class="checkbox margin-t-0"><input id="<?php echo "note".$note['note_id'] ?>" type="checkbox" name="noteItem" value="<?php echo $note['note_id'] ?>"><label for="<?php echo "note".$note['note_id'] ?>"></label></div></td>
                    <td>#<b><?php echo $note['note_id']; ?></b></td>
                    <td width="70%"><?php echo $note['note']; ?></td>
                    <td width="20%"><?php echo date("m/d/Y", strtotime($note['created_date'])); ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php endif; ?>

＆＃13;

控制器

＆＃13;

public function add_note($contact_id) {
    $this->Note_model->create($contact_id);
        
    $data['notes'] = $this->Note_model->read($contact_id);
    $view = $this->load->view('partial_views/note_list', $data, TRUE);
    return "{hello: world}";
}

＆＃13;

模型

＆＃13;

<?php

class Note_model extends CI_Model {
    
    public $note_id;
    public $contact_id;
    public $note;
    public $created_date;
    
    public function __construct() {
        // Call the CI_Model constructor
        parent::__construct();
    }
    
    public function create($id = null) {
        if($id != null) {
            $data = array(
                'note_id' => null,
                'contact_id' => $id,
                'note' => $this->input->post("noteText"),
                'created_date' => date("Y-m-d")
            );
            $this->db->insert('note', $data);
        }
    }
    
    public function read($id = null) {
        if($id != null) {
            $query = $this->db->get_where('note', array('contact_id' => $id));
            return $query->result_array();
        }
    }
    
    public function update() {
        
    }
    
    public function delete() {
        $checkbox_list = $this->input->post("checkboxs");
        foreach($checkbox_list as $checkbox_id) {
            $this->db->delete('note', array('note_id' => $checkbox_id));
        }
        
    }
}

＆＃13;

Answer 1

你快到了。正如您所说，您需要使用某些来替换成功函数中的 location.reload（），该部分加载某些html 的一部分。那个“东西”是jQuery .load（）方法。它的工作原理如下：

$( "#container_to_load" ).load( "/url_to_get #fragment_of_url_to_get" );

您可能希望在HTML上添加几个ID，以便更好地控制要加载的页面片段。此外，如果您需要对加载的片段进行一些交互，请记住使用jQuery“click”无法访问已加载的元素。您需要使用.on（）访问它们，并通过加载的片段的祖先访问它。

有关此方法的更多信息，请查看jQuery .load()。

Answer 2

试试这个

<script>
    $(document).ready(function() {
        $("#noteForm").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>",
                type: "post",
                data: "noteText="+$("#noteText").val(),
                dataType: "text",
                success: function (data) {
                    alert(data);              
                    window.location.href = 'url';
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });
</script>

如何使用jQuery重新加载局部视图.Ajax和Codeigniter 3

2 个答案: