Question

我在我的网站上使用Js帮助程序有一个基本的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中。但是你永远不会删除页面上已有的表单。您可以做的是更新包含您的第一个表单的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

我遇到了同样的问题。虽然nIcO似乎正在提供解决方案，但在我的情况下它并没有帮助，因为Drawrdesign想要的成功消息仍未被渲染。

所以，我查看了你的zip文件并找到了解决方案。定义了两个ajax调用：1）.blur和2）.bind。 1）用于验证字段并通过AJAX将数据提交到PostsController的validate_form（）函数。 2）用于观察提交按钮的click事件，并将数据发送到PostsController的add（）函数。

此问题发生在2），因为您单击“提交”按钮。所以，你应该看看PostsController的add（）函数。在1）函数的validate_form（）中添加了以下行：

$this->autoRender = FALSE;

这就是解决方案。因为CakePHP自动呈现视图，所以你不希望它发生，因为AJAX。因此，如果1）已完成，则应将其添加到案例2）中的add（）函数中，如下所示：

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

所以，停止（自动）渲染div =“＃success”中的add.ctp，你的其他消息“发送..”和“succes.ctp”仍然会开始显示。

PS。 @Drawrdesign，你有没有机会听过andrewperk的教学视频？

Answer 3

在Ajax请求处理中将布局设置为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 4

确保你是：

使用RequestHandler组件（首选）：

class AppController {

    var $compontents = array('RequestHandler');

}

或在操作中手动将布局设置为“ajax”：

$this->layout = "ajax"

请求处理程序在检测到Ajax请求时会自动将布局设置为ajax。

ajax布局除了渲染视图外不会返回任何内容。

Answer 5

你好，首先看来你正在使用cake 2 lib并使用1.3代码，这些代码可能会有效，但部分已弃用可能会检查migration guide。控制台工具还可以将代码升级到2.0 / 2.1。

其次你肯定想渲染一个视图和一个空的布局？ $ errors在Views / Posts / validate_form.ctp中定义。您正在设置$ errors，然后不渲染视图。删除将自动渲染设置为false并将其置于控制器操作的顶部。

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

有什么好处吗？

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);
    }
}

CakePHP ajax表单更新复制页面

6 个答案: