CakePHP ajax表單更新重複頁面

Question

我在我的網站上使用Js helper的基本ajax表單，它工作正常，但當有驗證錯誤更新回調重複我的成功div內的整個頁面。

成功的div：

<div id="success"></div> 

提交按鈕：

echo $this->Js->submit('Send', array(
    'before'=>$this->Js->get('#sending')->effect('fadeIn'), 
    'success'=>$this->Js->get('#sending')->effect('fadeOut'), 
    'update'=>'#success', 
    'class'=>'btn btn-primary' 
)); 

的Javascript：在我的控制器

$(document).ready(function(){ 

    $('#postkey, #gender, #hair, #location, #message').blur(function(){ 
     $.post(
      '/Cake_ajax/Posts/validate_form', 
      { field: $(this).attr('id'), value: $(this).val() } 
      //handleNameValidation 
     ); 
    }); 

}); 

驗證表單功能：

public function validate_form(){ 
    if($this->RequestHandler->isAjax()){ 
     $this->request->data['Post'][$this->request['data']['field']] = $this->request['data']['value']; 
     $this->Post->set($this->request->data); 
     if($this->Post->validates()){ 
      $this->autorender = FALSE; // don't render a view 
      $this->set('error',''); 
     }else{ 
      $this->layout ="ajax"; 
      $this->autoRender = FALSE; 
      $error = $this->validateErrors($this->Post); 
      $this->set('error',$this->Post->validationErrors[$this->request['data']['field']][0]); 
     } 
    } 
} 

我不知道這是否足夠的信息繼續下去，如果我需要發佈更多的代碼，請讓我知道。

謝謝。

Answer 1

我剛剛使用您的zip文件測試了您的應用程序。

我觀察到的是，這不是放在您的#success div內的整個頁面，而只是Posts/add.ctp視圖的內容。 所以基本上這意味着RequestHandler正確地完成了它的工作，這意味着使用的佈局是'ajax'佈局的。 爲了擺脫其他任何形式，add.ctp頁面不應該包含任何其他形式。在你的情況下，Posts/add.ctp包含導航鏈接，這就是它們重複的原因。

也就是說，提交按鈕目前所做的是獲取Posts/add.ctp視圖的內容並將其插入空的#success格。但是你永遠不會刪除頁面上已有的表單。 您可以做的是更新包含您的第一個表單的div的內容，甚至更新整個Posts/add.ctp視圖的內容。

在你的情況下，簡單地更新#content代替#success DIV也許可以根據您的需要：

echo $this->Js->submit('Send', array(
    'before'=>$this->Js->get('#sending')->effect('fadeIn'), 
    'success'=>$this->Js->get('#sending')->effect('fadeOut'), 
    'update'=>'#content', 
    'class'=>'btn btn-primary', 
    'controller'=>'posts', 
    'action'=>'add' 
)); 

Answer 2

在Ajax Request處理中將佈局設置爲ajax。所以這個錯誤信息將會用ajax佈局而不是默認佈局來呈現。

修訂

public function validate_form(){ 
if($this->RequestHandler->isAjax()){ 
    $this->request->data['Post'][$this->request['data']['field']] = $this->request['data']['value']; 
    $this->Post->set($this->request->data); 
    if($this->Post->validates()){    
     $this->autoRender = FALSE; // don't render a view 
     $this->set('error',''); 
    }else{ 
     $this->layout ="ajax"; 
     $this->autoRender = FALSE; 
     $error = $this->validateErrors($this->Post); 
     $this->set('error',$this->Post->validationErrors[$this->request['data']['field']][0]); 
    } 
} 

}

Answer 3

確保你要麼：

使用RequestHandler組分（優選的）：

class AppController { 

    var $compontents = array('RequestHandler'); 

} 

或手動設定的佈局來'ajax'在你的動作中：

$this->layout = "ajax" 

當處理器檢測到Ajax請求時，會自動將佈局設置爲ajax。

ajax佈局不會返回除渲染視圖以外的任何內容。

Answer 4

你好，首先它似乎使用的是蛋糕2 lib和使用1.3代碼可能會工作，但在部分棄用可能是工作檢查migration guide。控制檯工具也可以將您的代碼升級到2.0/2.1。

其次你確實想渲染一個視圖和一個空的佈局？ $ errors在Views/Posts/validate_form.ctp中定義。您正在設置$錯誤，然後不渲染視圖。刪除將自動渲染設置爲false並放置在控制器動作的頂部。

$this->layout = 'ajax'; 
Configure::write("debug",0); 

還好嗎？

Answer 5

我遇到了同樣的問題。儘管ncco似乎給出瞭解決方案，但在我的情況下，它並沒有幫助，因爲Drawrdesign想要的成功信息仍然沒有被呈現。

所以，我看着你的zip文件並找到了解決方案。有兩個定義的ajax調用：1）.blur和2）.bind。 1）用於驗證字段並通過AJAX將數據提交給PostsController的validate_form（）函數。 2）用於觀察提交按鈕的點擊事件並將數據發送到PostsController的add（）函數。

因爲您單擊提交按鈕，所以出現此問題在2）。所以，你應該看看PostsController的add（）函數。在1）函數的validate_form（）函數中，添加了以下行：

$this->autoRender = FALSE; 

這就是解決方案。由於CakePHP自動呈現視圖，因此您不希望它發生，因爲AJAX。因此，在情況1）它的完成，它應該被添加到add（）函數的情況下2）所示：

public function add() { 
// Ajax post 
if(!empty($this->request->data)) { 
    // ... 
    $this->autoRender = FALSE; // ** NEW LINE ** 
     if($this->Post->save($this->request->data)) { 
      // ...  
     } 
     // ... 
    } 
    // ... 
} 

所以，這是（自動停止）渲染add.ctp在div =「＃成功」，你的其他消息「發送..」和「succes.ctp」仍然開始顯示。

PS。 @Drawrdesign，你有沒有機會跟着andrewperk的指導視頻？

Answer 6

public function admin_edit_comment() { 
    $this->layout = 'ajax'; 
    $this->autoRender = false; 
    if ($this->request->is('ajax')) { 
     if ($this->FaComment->save($this->request->data, false)) { 
      $response['status'] = 'success'; 
      $response['action'] = 'edit_comment'; 
      $response['data'] = $this->request->data['FaComment']; 
      $response['message'] = __d('vanderdeals', 'Comment saved successfully'); 


    } else { 
      $response['status'] = 'error'; 
      $response['model'] = 'FaComment'; 
      $response['message'] = __d('vanderdeals', 'Internal server error occurred. Please try again later.'); 
     } 

     echo json_encode($response); 
    } 
}