CodeIgniter AJAX加载和保存表单模态引导程序

时间:2016-09-02 08:55:58

标签: javascript php jquery ajax codeigniter

我正在使用Ajax和CodeIgniter处理简单的插入和更新数据表单。一直在努力解决这个问题,因为我是阿贾克斯的新人。插入方法已经有效,但是当我想通过id获取数据并从同一模态更新它时,它就不会加载。

这是我的代码:

用户控制器:

/* Location: ./application/controllers/master/user.php */

function insert() {
   $id_user            = addslashes($this->input->post('id_user'));
   $username           = addslashes($this->input->post('username'));
   $password           = addslashes($this->input->post('password'));
   $email              = addslashes($this->input->post('email'));

   $data = array(
      'username'     => $username,
      'password'     => $password,
      'email'        => $email
   );

   $this->M_user->set_insert($data);
   redirect('master/user');
}

function update() {
   $id_user            = addslashes($this->input->post('id_user'));
   $username           = addslashes($this->input->post('username'));
   $password           = addslashes($this->input->post('password'));
   $email              = addslashes($this->input->post('email'));

   $data = array(
     'username'     => $username,
     'password'     => $password,
     'email'        => $email
   );

   $this->M_user->set_update($id_user,$data);
   redirect('master/user');
}

用户模型:

function set_insert($data){
    $this->db->insert($this->table, $data);
    return TRUE;
}

function set_update($id_user,$data) {     
    $this->db->where('id_user', $id_user);
    $this->db->update($this->table, $data);     
    return TRUE;
}

在这里我的观点:

<!-- Main content -->
<section class="content">

    <!-- /.box-header -->
    <div class="box-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#btnModalForm">Add User</button><br><br>
        [.....]

    <!-- modal data -->
    <div class="row">
    <div class="col-lg-12">
        <!-- Modal -->
        <div class="modal draggable fade" id="btnModalForm" tabindex="-1" role="dialog" aria-labelledby="btnModalFormLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="btnModalFormLabel"> Data User</h4>
                    </div>

                    <form id="addForm" method="post" action="<?php echo site_url('master/user/insert') ?>" class="form-horizontal"> 
                        <table class="display table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                            <tr>
                                <td class="col-sm-2 control-label">Username</td>
                                <td>
                                    <div class="col-sm-4">
                                        <input type="text" name="username" class="form-control" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-sm-2 control-label">Password</td>
                                <td>
                                    <div class="col-sm-4">
                                        <input type="text" name="password" class="form-control" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-sm-2 control-label">Email</td>
                                <td>
                                    <div class="col-sm-6">
                                        <input type="text" name="email" class="form-control" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" id="btnSaveData" class="btn btn-primary">Save</button>
                                </td>
                            </tr>
                        </table>
                    </form>    
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- modal  data -->

    </div>
    <!-- /.box-body -->

</section>

<script type="text/javascript">
    $(document).ready(function() {

        $('#btnModalForm').on('shown.bs.modal')
            $('#btnModalForm, #btnUpdate').draggable({
                cursor: 'move',
                handle: '.modal-header'
        });  

        $('#btnSaveData').bind('click', function(event) {

            var v_username = $('input:text[name-username]').val();
            var v_password = $('input:text[name-password]').val();
            var v_email    = $('input:text[name-email]').val();

            $.ajax({
                type: "POST",
                data: {username: v_username, password:v_password, email:v_email},
                dataType: 'json',
                success: function() {
                    location.reload(true);
                },
                error: function(xhr, textStatus, errorThrown){
                    location.reload();
                }
            })
        })  

        $('#btnUpdate').on('shown.bs.modal', function () {

            var v_username = $('input:text[name-username]').val();
            var v_password = $('input:text[name-password]').val();
            var v_email    = $('input:text[name-email]').val();

            $.ajax({
                url: "<?php echo site_url('master/user/detail') ?>",
                type: "get",
                data: {username: v_username, password:v_password, email:v_email},
                dataType: 'json',
                success: function(data) {
                    console.log(data);

                },
                error: function(xhr, textStatus, errorThrown){
                    // location.reload();
                }
            })
        });
    })
</script>

也许我的代码错了,任何帮助都会受到赞赏。 感谢。

0 个答案:

没有答案