模式內插入一個模式的AJAX在CodeIgniter中插入一個表格

Question

一直在掙扎約4個小時，我試圖有一個模式下拉（Twitter引導模式），其中包含一個表單來創建一個公司。這是在CodeIgniter中構建的。

我遇到了輸入類型=「提交」和輸入類型=「按鈕」的問題。

我只有1個必填字段，即公司名稱。如果我使用input type =「button」，驗證將在模態內正確觸發，但是表單只會插入companyname，user_id，active和cdate。

現在，如果我使用輸入類型=「提交」，所有的數據插入罰款。但是，驗證中斷後，我點擊「創建公司」後出現「無法找到頁面」，但數據仍在插入。

任何想法？謝謝！新來的AJAX ...

我AJAX功能：

function add_client() 
{ 

    $this->form_validation->set_rules('name', 'Company Name', 'trim|required|xss_clean'); 

    load_model('client_model', 'clients'); 
    load_model('industry_model'); 

    $user_id = get_user_id(); 
    $company_id = get_company_id(); 

    if (!$user_id || !$company_id) redirect('home'); 

    if ($_POST) 
    { 

     if ($this->form_validation->run() == TRUE) 
     { 

     $fields = $this->input->post(null , TRUE); 


     $fields['user_id'] = $user_id; 
     $fields['company_id'] = $company_id; 
     $fields['active'] = 1; 
     $fields['cdate'] = time(); 


     $insert = $this->clients->insert($fields); 

      if ($insert) 
      { 
       $this->message->set('alert alert-success', '<h4>Company has been added</h4>'); 
       header('location:'.$_SERVER['HTTP_REFERER']); 
      } 
      else 
      { 
       $this->message->set('alert alert-error', '<h4>There was an issue adding this Company, please try again</h4>'); 
      }     


     } 


     else 
     { 
      $err_msg = validation_errors('<div class="alert alert-error">', '</div>'); 
      $retval = array('err_msg'=>$err_msg); 
      $this->ajax_output($retval, false); 
     } 

    } 

    $this->data['industries'] = array(0=>'Select Industry...') + $this->industry_model->dropdown('industry'); 

    $this->insertMethodJS(); 
    $this->template->write_view('content',$this->base_path.'/'.build_view_path(__METHOD__), $this->data);   
    $this->template->render(); 
} 

最後，我的觀點：

<div class="modal hide fade" id="milestone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 600px !important;"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Add a Company</h3> 
    </div> 

    <div class="modal-body"> 

    <?php echo form_open_multipart(base_url().'members/proposals/add_client', array('class' => '', 'id' => 'client_form'));?> 

    <div id="error_message2"></div> 

    <div class="row-fluid"> 
     <div class="span5"> 

      <input type="hidden" name="cdate" id="cdate" value="" /> 

      <div class="control-group"> 
      <label class="control-label">Company Name: <span style="color: red;">*</span></label> 
       <div class="controls"> 
        <input type="text" id="name" name="name" value=""/> 
       </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label">Company Abbreviation:<span style="color: red;">*</span></label> 
       <div class="controls"> 
        <input type="text" id="abbreviation" name="abbreviation" value=""/> 
       </div> 
      </div>  


      <div class="control-group"> 
      <label class="control-label">Company Image: </label> 
       <div class="controls"> 
         <input type="file" name="client_image" size="20" /> 
       </div> 
      </div> 

      </div> 

      <div class="span5"> 

      <div class="control-group"> 
      <label class="control-label">Website:</label> 
       <div class="controls"> 
        <input type="text" id="website" name="website" value=""/> 
       </div> 
      </div> 

     </div> 

    </div> 



<div class="row-fluid"> 
    <div class="span5" style="margin-top: 25px;"> 

    <div class="control-group"> 
      <div class="controls"> 
       <p><strong>Client</strong></p> 
      </div> 
    </div> 


    <div class="control-group"> 
     <label class="control-label">Address 1:</label> 
      <div class="controls"> 
       <input type="text" id="address1" name="address1" value=""/> 
      </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label">Address 2:</label> 
      <div class="controls"> 
       <input type="text" id="address2" name="address2" value=""/> 
      </div> 
    </div>  

    <div class="control-group"> 
     <label class="control-label">City:</label> 
      <div class="controls"> 
       <input type="text" name="city" id="city" value=""/> 
      </div> 
    </div> 


    <div class="control-group"> 
     <label class="control-label">State:</label> 
      <div class="controls"> 
       <?= form_dropdown('state', usa_state_list(), set_value('state'), 'id=state'); ?>  
      </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label">Zip:</label> 
      <div class="controls"> 
       <input type="text" id="zip" name="zip" value=""/> 
      </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label">Country:</label> 
      <div class="controls"> 
       <?= form_dropdown('country', country_list(), set_value('country'), 'id=country'); ?>  
      </div> 
    </div> 

    </div> 
</div> 
</div> 

    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button type="submit" class="btn btn-primary" id="create_btn">Create Company</button> 
    </div> 
</form> 
</div> 

所以

$(document).ready(function(){ 

    $('#create_btn').live('click', function(){ 
     //we'll want to move to page specific files later 

    var name = $('#name').val(); 

    $.ajax({ 
     url: CI_ROOT + "members/proposals/add_client", 
     type: 'post', 
     data: {'name': name }, 
     complete: function(r){ 
      var response_obj = jQuery.parseJSON(r.responseText); 

      if (response_obj.status == 'SUCCESS') 
      { 
       window.location = CI_ROOT + response_obj.data.redirect; 
      } 
      else 
      {  
      $('#error_message2').html(response_obj.data.err_msg); 
      } 
     }, 
    });  


    }); 

}); 

它處理插入我的控制器功能再次總結一下。當輸入類型=「按鈕」時，我的驗證在模式中很有效，只有公司名稱與company_id，user_id，active和cdate一起插入到數據庫中。

現在，輸入類型=「提交」，所有數據插入很好，但驗證失敗，我得到一個重定向到頁面找不到。

再次，謝謝！

Answer 1

問題出在你的ajax函數調用。

您需要防止的形式從發射（從而通過後提交給工作中的網址）：

變化：

$('#create_btn').live('click', function(){ 

要：

$('#create_btn').live('click', function(e){ 
    e.preventDefault(); 

這應解決了這個問題。如果沒有，讓我知道，我會做更多的挖掘。我還建議將live改爲on，這樣您就可以面向未來。 on以更高的效率處理與單個函數中的live，bind等相同的內容。

編輯：爲了解釋發生了什麼（爲什麼你必須使用e.preventDefault();），這是因爲<input type="submit">實際上將提交表單在<form>標籤的action屬性指定的URL。因此，你的代碼發生了什麼事情，就是當你點擊按鈕時，你的javascript正在運行，然後本機瀏覽器提交事件在之後立即發生。