Question

我是MVC的新手，目前正致力于基本的网站设置。我试图打开一个模态窗口，可以输入一些数据，然后按提交将其提交回数据库。

使用CodeIgniter和this Jquery Modal（不一定必须是这一个）。我再次对MVC很陌生，因此在查看数据流时遇到一些麻烦。

模态打开正确，但我试图在不打开新窗口的情况下在同一模态中显示验证/错误。我会在echo("error-ajax");附近放置什么，打开一个视图似乎会打开一个新窗口。

查看 - 打开模态：
... <a href="<?php echo site_url("bondform/view_form"); ?>" rel="modal:open" class="fa fa-plus"></a> ...

查看 - 实际表格：

<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
    <h3>New</h3>
    <p>
        <label>ID: <input class="pull-right" type="text" name="idnumber" value="<?php echo set_value('idnumber'); ?>" size="9"/></label>
    </p>
    <div><input type="submit" value="Submit" /></div>
</form>

<script>
    $(function(){
        $('form').submit(function(e){
           e.preventDefault();

            $.ajax({
                type: "POST", 
                async: false,
                url: "<?php echo site_url("bondform/save_form"); ?>",
                success: function(){alert('Succes');},
                error: function(){alert('Error');}
            });     
        });
    });
</script>

控制器：

<?php
class Bondform extends CI_Controller {

    public function __construct()
    {
        parent::__construct();

        $this->load->helper(array('form', 'url'));
        $this->load->library('form_validation');

        $config = array(
               array(
                     'field'   => 'idnumber',
                     'label'   => 'Id Number',
                     'rules'   => 'trim|required|min_length[9]|max_length[9]|xss_clean'
                  )
            );

        $this->form_validation->set_rules($config); 
    }


    public function view_form()
    {
        $this->load->view('bond/form');
    }

    public function save_form()
    {       
        if ($this->form_validation->run() == FALSE)
        {
            if ($this->input->is_ajax_request()) 
            {
            echo("error-ajax"); //placeholder, debug
            }
            else
            {
            echo("error-noajax"); //placeholder, debug
            }
        }
        else
        {
        echo("succes-close"); //placeholder, debug
        }
    }
}

非常感谢，

Answer 1

首先，将ajax函数从模态视图移动到打开它的视图，然后就可以控制模态的内容而不会丢失表单视图。

打开模态：

<a href="<?php echo site_url("bondform/view_form"); ?>" rel="modal:open" class="fa fa-plus"></a>
<script>
    $(function(){
        $('body').on('submit', 'form', function(e){
           e.preventDefault();

            $.ajax({
                type: "POST",
                url: "<?php echo site_url("bondform/save_form"); ?>",
                data: $(this).serialize();
                success: function(response){ $('#form_container').html(response); alert('Succes');},
                error: function(){alert('Error');}
            });     
        });
    });
</script>

实际表格：

<div id="form_container">
<?php echo validation_errors(); ?>
<?php echo form_open('bondform/save_form'); ?>
    <h3>New</h3>
    <p>
        <label>ID: <input class="pull-right" type="text" name="idnumber" value="<?php echo set_value('idnumber'); ?>" size="9"/></label>
    </p>
    <div><input type="submit" value="Submit" /></div>
</form>
</div>

应该让你开始朝着正确的方向前进。

Ajax模态表单验证和提交

1 个答案: