4

我在我的网站上有一个使用 Js 助手的基本 ajax 表单，它工作正常，但是当出现验证错误时，更新回调会在我的成功 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]);  
        }
    }
}

我不知道这些信息是否足够继续，如果我需要发布更多代码，请告诉我。

谢谢。

4

6 回答 6

4

我刚刚使用您的 zip 文件测试了您的应用程序。

我观察到的是，这不是放在#successdiv 中的整个页面，而只是Posts/add.ctp视图的内容。所以基本上这意味着 RequestHandler 正确地完成了它的工作，这意味着使用的布局是“ ajax”布局。为了摆脱表单之外的任何其他内容，add.ctp 页面不应包含表单之外的任何其他内容。在您的情况下Posts/add.ctp包含导航链接，这就是它们被重复的原因。

也就是说，提交按钮当前所做的是获取Posts/add.ctp视图内容并将其插入到您的空#successdiv 中。但是您永远不会删除页面上已经存在的表单。您可以做的是更新包含您的第一个表单的 div 的内容，甚至是整个Posts/add.ctp视图的内容。

在您的情况下，只需更新div#content而不是#successdiv 可能会满足您的需求：

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'
));
于 2012-05-04T13:30:03.600 回答
1

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

因此，我查看了您的 zip 文件并找到了解决方案。定义了两个 ajax 调用：1) .blur 和 2) .bind。1) 用于字段的验证，并通过 AJAX 向 PostsController 的 validate_form() 函数提交数据。而2）用于观察提交按钮的点击事件，并将数据发送给PostsController的add()函数。

此问题出现在 2)，因为您单击了提交按钮。因此，您应该查看 PostsController 的 add() 函数。在 validate_form() of 1) 函数中，您添加了以下行：

$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，并且您的“sending..”和“succes.ctp”的其他消息仍然开始显示。

PS。@Drawrdesign，你有没有看过 andrewperk 的指导视频？

于 2012-07-10T15:49:14.680 回答
0

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

}

于 2012-04-28T07:20:51.593 回答
0

确保您是：

使用 RequestHandler 组件（首选）：

class AppController {

    var $compontents = array('RequestHandler');

}

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

$this->layout = "ajax"

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

ajax 布局不返回渲染视图以外的任何内容。

于 2012-05-02T15:26:31.760 回答
0

您好，首先，您似乎正在使用 cake 2 lib 并使用 1.3 代码，这可能会起作用，但部分已弃用，可能正在检查迁移指南。控制台工具还可以将您的代码升级到 2.0/2.1 。

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

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

有什么好处吗？

于 2012-05-04T13:33:21.023 回答
0 
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);
    }
}
于 2015-03-09T09:14:56.450 回答