Ajax formulaire soumettre

Question

Je suis nouveau à Ajax. Je veux soumettre un formulaire via Ajax et enregistrer les données envoyées à la base de données. Quelque chose comme la mise à jour de statut de Facebook - où la zone de texte est désactivée, puis soumise. Une fois enregistré dans la base de données, il revient et met à jour le message d'état en haut. et encore une fois la zone de texte est activée.

ceci est ma forme

<?php echo $form->create('StatusMessage', array('type' => 'post', 'url' => '/account/updateStatus', 'id' => 'updateStatus')); ?> 
    <?php echo $this->Form->input('id', array('value' => $user['User']['id'],'type' => 'hidden')); ?> 
    <?php echo $this->Form->textarea('message', array('value' => 'What have you been eating ?')); ?> 

Modifié: Modifié comme suggéré par 0 RioTera

CakePHP action

function updateStatus() { 

    $this->autoRender = false; 
    if($this->RequestHandler->isAjax()) { 
     $this->layout = 'ajax'; //THIS LINE NEWLY ADDED 

     $this->data['StatusMessage']['pid'] = 0; 
     $this->data['StatusMessage']['commenters_item_id'] = $this->data['StatusMessage']['item_id'] = $this->User->Item->itemId('1', $this->data['StatusMessage']['id']); 
     unset($this->data['StatusMessage']['id']); 
     //debug($this->data); 

     if($this->User->Item->StatusMessage->save($this->data)) { 
     return true; 
     } else { 
      echo 'not saved'; 
     } 
    } else { 
     echo 'no'; 
    } 

} 

code Javascript

$(document).ready(function() { 
    var options = { 
     target: '#output2', 
     // target element(s) to be updated with server response 
     beforeSubmit: showRequest, 
     // pre-submit callback 
     success: showResponse, // post-submit callback 
     // other available options: 
     //url:  url   // override for form's 'action' attribute 
     //type:  type  // 'get' or 'post', override for form's 'method' attribute 
     //dataType: null  // 'xml', 'script', or 'json' (expected server response type) 
     clearForm: true  // clear all form fields after successful submit 
     //resetForm: true  // reset the form after successful submit 
     // $.ajax options can be used here too, for example: 
     //timeout: 3000 
    }; 

    $('#updateStatus').submit(function() { 
     // make your ajax call 
     $(this).ajaxSubmit(options); 
     return false; // prevent a new request 
    }); 

    function showRequest(formData, jqForm, options) { 
     $('#StatusMessageMessage').attr('disabled', true); 
    } 

    function showResponse(responseText, statusText, xhr, $form) { 
     $('#StatusMessageMessage').attr('disabled', false); 
     alert('shdsd'); 
    } 
}); 

Answer 1

En utilisant jquery et http://jquery.malsup.com/form/ plugin:

$(document).ready(function() { 
    var options = { 
     target:  '#message', // target element(s) to be updated with server response 
     beforeSubmit: showRequest, // pre-submit callback 
     success:  showResponse // post-submit callback 
    }; 
    $('#updateStatus').ajaxForm(options); 
}); 

function showRequest(formData, jqForm, options) { 
    $('#StatusMessageMessage').attr('disabled', true); 
} 

function showResponse(responseText, statusText, xhr, $form) { 
    $('#StatusMessageMessage').attr('disabled', false); 
} 

Je n'y suis pas allé, mais je l'espère, il vous aide à

Answer 2

j'espère que ce tutoriel va aider

http://mohammed-magdy.blogspot.com/2010/10/ajaxformsubmitter.html

Answer 3

C'est fonction que j'utilise pour soumettre des formulaires dans cakephp 3.x il utilise des alertes douces mais cela peut être changé en une alerte normale. Il est très variable il suffit de mettre une action dans votre contrôleur pour attraper la soumission de formulaire. Le rechargement de l'emplacement rechargera également les données pour donner à l'utilisateur un retour immédiat. Cela peut être retiré.

$('#myForm').submit(function(e) { 
    // Catch form submit 
    e.preventDefault(); 

    $form = $(this); 
    // console.log($form); 
    // Get form data 
    $form_data = $form.serialize(); 
    $form_action = $form.attr('action') + '.json'; 
    // Do ajax post to cake add function instead 
    $.ajax({ 
     type : "PUT", 
     url : $form_action, 
     data : $form_data, 
     success: function(data) { 
      swal({ 
       title: "Updated!", 
       text: "Your entity was updated successfully", 
       type: "success" 
      }, 
      function(){ 
        location.reload(true); 
      }); 
     } 
    }); 
}); 

Voici à quoi ressemblerait une action simple dans le contrôleur;

public function updateEntity($id = null){ 
    $entity = $this->EntityName->get($id); 
    $entity = json_encode($this->request->data); 
    $this->EntityName->save($entity); 
}