функция успеха Ajax не работает на второй раз

Question

Aim: Продолжать показывать любые ошибки проверки формы через JSon обратного вызов

Проблема: Когда я представить в форме с недопустимым вводом он показывает сообщение об ошибке в div. Если все входы действительны, он обработает запрос ajax и покажет сообщение успеха в элементе div. После этого форма сбрасывается, но модальные остаются открытыми. Когда я пытаюсь снова проверить вход, не отображается сообщение об ошибке. Когда я пытаюсь проверить действительный ввод, все равно не отображается такое же сообщение.

Короткий: Функция успеха Ajax не работает во второй раз.

Вот мой код:

Bootstrap Модальные (где размещены мои формы входа)

<div class="modal fade" id='frmModal'> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class='close' data-dismiss='modal'>&times;</button> 
       <h4 class='title'>Add new data</h4> 
      </div> 
      <div class="modal-body"> 
       <?php echo form_open('Employee/save',array('id'=>'frm', 'class'=>'form-horizontal')); ?> 
       <div id="message"></div> 
        <div class="form-group"> 
         <label for='fname' class='col-md-3 control-label'>First Name:</label> 
         <div class="col-md-9"> 
         <input type="text" name="fname" id='fname' class='form-control' placeholder='First Name...'> 
         </div> 
         </div> 
         <div class='form-group'> 
         <label for='lname' class='col-md-3 control-label'>Last Name:</label> 
         <div class="col-md-9"> 
         <input type="text" name="lname" id='lname' class='form-control' placeholder='Last Name...'> 
         </div> 
         </div> 
         <div class='form-group'> 
         <label for='age' class='col-md-3 control-label'>Age:</label> 
         <div class="col-md-9"> 
         <input type="text" name="age" id='age' class='form-control' placeholder='Age...'> 
         </div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-primary action" type='submit'><i class='glyphicon glyphicon-floppy-disk'></i> Save Data</button> 
        </div> 
       <?php echo form_close(); ?> 
      </div> 
     </div> 
    </div> 
</div> 

Jquery код:

$(document).on('submit','#frm',function(e){ 
    e.preventDefault(); 
    var form = $('#frm'); 
    $.ajax({ 
     url: form.attr('action'), 
     type: 'POST', 
     dataType: 'json', 
     encode: true, 
     data: form.serialize(), 
     success: function(data) { 
      if (!data.success) { 
       if (data.errors) { 
        $('#message').html(data.errors).addClass('alert alert-danger'); 
       } 
      } else { 
       reloadData(); 

       $('#message').html("<span class='glyphicon glyphicon-ok'></span> " + data.message).removeClass('alert alert-danger').addClass('alert alert-success'); 
       setTimeout(function() { 
        $("#message").fadeTo(500, 0).slideUp(500, function() { 
         $(this).remove(); 
        }); 
       }, 3000); 
       $('#frm')[0].reset(); 
      } 
     } 
    }); 
}); 

CodeIgniter Контроллер:

$this->form_validation->set_rules('fname','First Name', 'required|trim'); 
    $this->form_validation->set_rules('lname','Last Name', 'trim|required'); 
    $this->form_validation->set_rules('age','Age', 'trim|numeric|required'); 

    if($this->form_validation->run()===FALSE) 
    { 
     $info['success'] = false; 
     $info['errors'] = validation_errors(); 
    } 
    else 
    { 
     $info['success'] = true; 
     $data = array(
        "firstname" => $this->input->post('fname'), 
        "lastname" => $this->input->post('lname'), 
        "age" => $this->input->post('age'), 
        ); 
     $this->Employee_model->save('ci_table', $data); 
     $info['message'] = 'Successfully saved data'; 
    } 
    $this->output->set_content_type('application/json')->set_output(json_encode($info)); 
} 

Answer 1

Я думаю, Я erstand ... Форма все еще работает, но сообщения не появляются? Если да, то попробуйте ниже ...

Вы удаляете элемент #message вместо очистки его ... попробовать:

$("#message").fadeTo(500, 0).slideUp(500, function() { 
        $(this).empty(); 

Таким образом, вы опорожнение элемент #message вместо удаления его полностью ..