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

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

希望这会对您有所帮助：

您的模型方法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>

在 ajax url 中将 Controller_name 替换为控制器名称

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

Answer 2

您可以在提交模态弹出表单时尝试 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(){}
    });
});