Ajax modal form validation and submit

Question

Я новичок в MVC и в настоящее время работает над базовой настройкой веб-сайта. Я пытаюсь открыть модальное окно, где можно ввести некоторые данные, а затем нажать кнопку «Отправить», чтобы отправить его обратно в базу данных.

Использование CodeIgniter и this Jquery Modal (необязательно, должно быть, это одно). Снова я очень новичок в MVC, поэтому у меня возникли проблемы с визуализацией потока данных.

Модаль открывается правильно, но я пытаюсь отобразить валидацию/ошибки в том же модальном состоянии, не открывая новое окно. Что бы я разместил около echo("error-ajax");, открытие окна, похоже, приведет к открытию нового окна.

View - открывает модальный:
...
<a href="<?php echo site_url("bondform/view_form"); ?>" rel="modal:open" class="fa fa-plus"></a>
...

View - Actual форма:

<?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 из e modal view к виду, которое его открывает, тогда вы можете управлять содержимым модального без потери формы.

открывает модальный:

<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> 

Если вы начали в правильном направлении.