jquery - 在引导模式中加载视图时处理 CodeIgniter 错误

Question

我有一个 CodeIgniter 应用程序。在一个模块中，设置是一个显示所有当前记录的列表页面，带有一个添加新记录的按钮和一个编辑现有记录的按钮。

添加和编辑操作都有不同的视图。

我有一个空白的 Bootstrap-3 模态保存为单独的视图（modal.php）。单击添加或编辑按钮时，模式会在列表页面上作为叠加层弹出。我已经为添加和编辑按钮的链接添加了数据属性，这些按钮有助于构建模态标题和内容。

示例：单击“添加”按钮时，从数据属性中挖掘模态的标题和按钮文本，并将添加操作的视图文件作为模态体加载。

列表页面上的“添加”按钮链接：

<a href="<?php echo site_url('client/add'); ?>" class="btn btn-success ls-modal" data-title="Add New Client" data-btn_txt="Add" data-mode="add">Add</a>

将 views/client/add.php 文件加载到模式中的 Jquery：

$('.ls-modal').on('click', function(e){
e.preventDefault();
var title = $(this).data('title');
var btn_txt = $(this).data('btn_txt');
var mode = $(this).data('mode');

$('#modal_title').html(title);
$("#client-sbmt").html(btn_txt);
$('#client_form_mode').val(mode);

$('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));

});

这一切都很好。然而，问题是当我在表单中遇到错误时。我在表单助手中使用 CodeIgniter 的 set_rules() 来设置一些验证规则。如果验证失败，那么我将丢失覆盖列表页面的模式窗口。相反，实际视图加载到选项卡中并显示表单错误。

控制器中的 add 方法如下所示：

public function add()
{   
    //If form submitted
    if ($this->input->server('REQUEST_METHOD') === 'POST')
    {
        $this->load->library('form_validation');

    //Form validation
    $this->form_validation->set_rules('client_name','Client Name','required');
    $this->form_validation->set_rules('email','Email','valid_email');
    $this->form_validation->set_rules('phone','phone','min_length[7]');

    //if validated
    if($this->form_validation->run() == TRUE)     
    {   
        $phone = $this->input->post('phone1');
        $phone .= $this->input->post('phone2');
        $phone .= $this->input->post('phone3');

        $params = array(
            'client_name' => $this->input->post('client_name'),
            'client_code' => $this->input->post('client_code'),
            'address1' => $this->input->post('address1'),
            'address2' => $this->input->post('address2'),
            'city' => $this->input->post('city'),
            'postal' => $this->input->post('postal'),
            'state' => $this->input->post('state'),
            'country' => strtoupper($this->input->post('country')),
            'email' => $this->input->post('email'),
            'phone_cc' => $this->input->post('phone_cc'),
            'phone' => $phone,
            'phone_ext' => $this->input->post('phone_ext'),
            'po_prefix' => $this->input->post('po_prefix'),
            'logo' => $this->input->post('logo')
        );

        $client_id = $this->Client_model->add_client($params);
        //redirect('client/index');
    }

}

//Load View            
$data['_view'] = 'client/modal_add';
$this->load->view('layouts/main',$data);

}

如何确保即使存在验证错误，表单仍保留在列表页面上的模式中？

标签： jquerytwitter-bootstrap-3codeigniter-3