javascript - 当我使用 ajax 时重复表单

Question

我正在使用 ajax 进行验证，我现在开始使用 ajax 有什么问题:

1. 当我使用这样的 div 时 <div id="success"></div> ，我的屏幕复制了我的原始表单，但使用的是 ajax 表单...当我“成功”删除此 div 时，一切正常。

2. 当我需要在我的表单中进行一些验证时，我在 ajax 中调用了我的函数，但它没有显示任何消息。

这是我的表格

添加.ctp

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

<div class="form" >
<h3>Registro de Compra de Grano </h3>
<?php echo $this->Form->create('SoyaProductorCompra');?>
    <fieldset>
        <?php 

        echo $this->Form->input('proveedor_carnet', array('label' => 'Cantidad en tonelada(s) métrica(s) del producto  (TM)', 'id'=>'proveedor_carnet'));

        echo $this->Form->input('producto', array(
            'options' => array( 
                'GRANO DE SOYA' => 'Grano de Soya',
                'GRANO DE GIRASOL' => 'Grano de Girasol'
                ), 'label'=>'Tipo de Grano'
        ));

        echo $this->Form->input('toneladas', array('label' => 'Cantidad en tonelada(s) métrica(s) del producto  (TM)', 'id'=>'toneladas'));
        echo $this->Form->input('preciodolar', array(
            'label' => 'Precio en Dolares Americanos por tonelada métrica (TM / $us)',
            'style'=>'width:500px; height:30px;',
            'default'=>0));
        echo $this->Form->input('total', array('label' => 'Total en Dolares Americanos ($us)', 'default'=>0));
        echo $this->Form->input('nrofactura', array('label' => 'Numero Factura', 'style'=>'width:500px; height:30px;','id'=>'total'));        
    ?>

    <div id="sending" style="display:none;">
        <?php echo $this->html->image('ajax-loader.gif', array('alt' => 'Cargando...')); ?>
    </div>

    <?php
        echo $this->Js->submit('Agregar Existencia', array(
          'before'=>$this->Js->get('#sending')->effect('fadeIn'),
          'success'=>$this->Js->get('#sending')->effect('fadeOut'),
          'update'=>'#success'
          )); 
    ?>              
    </fieldset>
<?php echo $this->Form->end(); ?>
</div>

验证.js

这是我的第二个问题，我正在尝试让我的函数在此之后显示一条消息错误

echo $this->Form->input('proveedor_carnet', array('label' => 'Cantidad en tonelada(s) métrica(s) del producto  (TM)', 'id'=>'proveedor_carnet'));

但是我的函数没有显示任何消息

$(document).ready(function(){

    $('#proveedor_carnet').blur(function(){
        $.post(
            '/cake/soyaproductorcompras/validate_form',
            { field: $('#proveedor_carnet').attr('id'), value: $('#proveedor_carnet').val() },
            handleNmeValidation
            );
    });

    function handleNmeValidation(error){
        if(error.length > 0){
            if($('#proveedor_carnet-notempty').length == 0){
            $('proveedor_carnet').after('<div id="proveedor_carnet-notEmpty" class="error-message">' + error + '</div>');

            }
        }else{
            $('#proveedor_carnet-notEmpty').remove();
        }
    }
});

SoyaProductorComprasController.php

   public $helpers = array('Html', 'Form', 'Js');
    public function add()
    {
        $this->loadModel('SoyaProductorCompra');
        $this->loadModel('SoyaProveedor');
        $this->loadModel('Productora');
        $this->set('productores', $this->Productora->find('first', array('conditions' => array('user_id' =>  $this->Auth->user('id')))));
        $this->set('soyaproveedores', $this->SoyaProveedor->find('list', array(
            'fields' => array('id', 'nombre')
            )));
        if ($this->request->is('post')) {
        $this->request->data['SoyaProductorCompra']['user_id'] = $this->Auth->user('id');
        $this->request->data['SoyaProductorCompra']['soya_proveedor_id'] = $this->request->data['SoyaProductorCompra']['proveedor_carnet'];
            if ($this->SoyaProductorCompra->save($this->request->data)) {
                if($this->RequestHandler->isAjax()){
                    $this->render('success', 'ajax');
                }else{
                    $this->Session->setFlash(__('La Información no fue Guardada.'));  
                    return $this->redirect(array('action' => 'index'));
                }
            }
        }
    public function validate_form(){
    $this->loadModel('SoyaProductorCompra');
    if ($this->RequestHandler->isAjax()) {
        debug($this->data['SoyaProductorCompra'][$this->params['form']['field']]);
        $this->data['SoyaProductorCompra'][$this->params['form']['field']]=$this->params['form']['value'];
        $this->SoyaProductorCompra->set($this->data);
        if($this->SoyaProductorCompra->validate()){
            $this->autoRender = FALSE;
        }else{
            $error=$this->validateErrors($this->SoyaProductorCompra);
            $this->set('error', $error[$this->params['form']['field']]);
        }
    }
}

成功.ctp

<p> Guardado </p>

验证表.ctp

<?php echo $error; ?>

错误:

POST http://localhost:8080/cake/soyaproductorcompras/validate_form 500 (Internal Server Error) jquery2.1.js:4
n.ajaxTransport.k.cors.a.crossDomain.send jquery2.1.js:4
n.extend.ajax jquery2.1.js:4
n.each.n.(anonymous function) jquery2.1.js:4
(anonymous function) validation.js:4
n.event.dispatch jquery2.1.js:3
n.event.add.r.handle

Answer 1

AD7six 简要解释了他评论中的问题所在，让我展开。

在你的 HTML 中你有

<div id="success"></div>
<div class="form" >[...]</div>

然后创建 JS 代码，告诉浏览器在发布表单后将收到的任何回复附加到 #success 中。

当您通过 ajax 发布表单时， Controller 最终会尝试用此保存

if ($this->SoyaProductorCompra->save($this->request->data)) {
    [...]
}

您的代码 ($this->render('success', 'ajax');) 尝试显示 success.ctp 或稍后显示失败的代码 session 消息，嵌套在此 if 中，这意味着它仅在 Controller 能够毫无问题地保存数据时才适用。如果没有(比如保存数据时出现问题)，它不会进入 if 并且除了退出之外什么都不做，呈现典型的 add.ctp 每次没有其他指示时它通常都会这样做。

回到你的浏览器，它会收到一些 html 并按照你的指示放入你的 #success div，但它又会是整个页面 (add.ctp )，留给你的结构如下:

<div id="success">
    <div id="success"></div>
    <div class="form" >[...]</div>
</div>
<div class="form" >[...]</div>

后续帖子会使事情变得更糟，因为现在有重复的 html id(如 #success)，这很糟糕。

假设您现在了解出了什么问题，您的下一个问题是您的 ajax 验证尝试。这是相当奇怪的路由，我在你的代码中没有看到任何 #name 元素会首先触发你的验证(这就是为什么你永远不会看到验证错误 - 假设其他一切都会起作用).最后，您的验证方法中有一个 debug()，这会使事情更加困惑。