Question

伙计们，我正在尝试从模式弹出窗口中获取值并在不刷新页面的情况下更新这些值，而无需在CodeIgniter中刷新页面

这是我的模式弹出窗口：

 <td class='text-center'>
    <form method="post" action="" id="emp-update">
        <input type="hidden" name="emp_id" value="<?php echo $emp->id; ?>">
        <button type="button" href="#updateEmp" onclick="getSummary(36)" class="btn btn-info btn-xs" data-toggle="modal"><i class='fas fa-edit'></i></button>
    </form>
</td>

<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content">
           <form action="" id="emp-create" class="form-horizontal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Update Employee</h4>
                </div>
                <div class="modal-body" id="modal-body">                                   
                    <div class="form-group">
                        <label for="emp_name" class="col-sm-4 control-label">Name : </label>
                        <div class="col-md-8">
                            <input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" />
                        </div>
                    </div>
                     <div class="form-group">
                        <label for="salary" class="col-sm-4 control-label">Salary: </label>
                        <div class="col-md-8">
                            <input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" />
                        </div>
                    </div>

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

这是我的控制人：

 public function editEmp() {
    if ($this->input->post('emp_id')) {
        $id = $this->input->post('emp_id');
        $data['empName'] = $this->Emp_model->getEmpName($id);
        $this->load->view('template/header');
        $this->load->view("employee/createemployee", $data);
        $this->load->view('template/footer');
    } 
}

这是我的模特：

function getEmpName($id) {
    $this->db->select('*');
    $this->db->from('employees');
    $this->db->where('id', $id);

    if ($query = $this->db->get()) {
        return $query->result_array();
    } else {
        return false;
    }
}

有人可以帮我怎么做吗？

Answer 1

您可以尝试Ajax提交模式弹出窗口

$("#emp-create").on("submit",function(){
    var emp_data = $(this).serialize();
    $.ajax({
        url: 'your controller url to update the popup details',
        data: emp_data,
        type: 'POST',
        success: function(){}
    });
});

Answer 2

希望这对您有帮助：

您的模型方法getEmpName方法应如下所示：

function getEmpName($id) {
    $this->db->select('*');
    $this->db->from('employees');
    $this->db->where('id', $id);
    if ($query->num_rows() > 0 ) {
        return $this->db->get()->row();
    } else {
        return false;
    }
}

您的mdoel html应该是这样的：

<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content" id="modal-content">
       <form action="" id="emp-update-form" class="form-horizontal">
        <input type="hidden" name="emp_id" value="<?=$empName->id;?>">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Update Employee</h4>
            </div>
            <div class="modal-body" id="modal-body">                                   
                <div class="form-group">
                    <label for="emp_name" class="col-sm-4 control-label">Name : </label>
                    <div class="col-md-8">
                        <input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" value="<?=$empName->emp_name;?>" />
                    </div>
                </div>
                 <div class="form-group">
                    <label for="salary" class="col-sm-4 control-label">Salary: </label>
                    <div class="col-md-8">
                        <input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" value="<?=$empName->salary;?>" />
                    </div>
                </div>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
            </div>
        </form>
    </div>
</div>
</div>

用您的控制器名称将Controller_name替换为ajax url

$(function() {
  $('#emp-update-form').on('submit',function(e){
    var formdata = $(this).serialize();
    alert('submit is working');
    $.ajax({
      type: "POST",
      url: "<?=site_url('Controller_name/getEmployeeDetails');?>",
      dataType: 'json',
      data: formdata,
      success: function(res) {
        if (res)
        {
          alert(res.status);
        }
      },
    });
  e.preventDefault();
  });
});

您的控制器方法getEmployeeDetails应该是这样的：

public function getEmployeeDetails() 
{
    //print_r($this->input->post());
    $response['status'] = 'success';
    echo json_encode($response);
    exit;
}

获取值并在模式弹出窗口中更新，而无需在codeigntier中刷新页面

2 个答案: