Un exemple concret pour l’inscription via AJAX d’utilisateurs à un évènements. Le modèle est défini comme suit :
User Subscriptions Event
Création du Controller
Dans le controlleur SubscriptionsController.php, 2 fonctions sont nécessaires:
- Le controlleur de la page appellante : index()
- Le controlleur appelé en Ajax : subscribe()
SubscriptionsController.php
class SubscriptionsController extends AppController{
/**
* helper jQuery pour les requêtes Ajax
*/public $helpers = array('Js' => array('Jquery'));
/**
* Fonction pour l'affichage des inscriptions à un évènement avec formulaire d'ajout
*/
public function index($eventId){
$subscriptions = $this->Subscription->find('all',
array(
'conditions' => array('event_id' => $eventId)
)
);
$this->set('participants', $subscriptions);}
/**
* Fonction devant ajouter une inscription, puis retourner un tableau d'inscription mis-à-jour
*/
public function subscribe(){
if(!empty($this->request->data)){
// On retourne la réponse ajax créé par la vue 'subscribe.ctp'
$this->render('subscribe');
} else {
$this->redirect('index');
}
}
// Si c'est une requête Ajax qui a inscrit un utilisateur, on met à jour le contenu de la page, sinon on rafraichit la page entière
if($this->RequestHandler->isAjax()) {
// On transmet les inscrits à la vue
$this->set('participants',$subscriptions);
// On récupère les inscrits directement dans la DB
$subscriptions = $this->Subscription->find('all',
array(
'conditions' => array('event_id' => $posted['Subscriptions']['event']
)
);
// On vérifie que des données on bien été envoyées
if(!empty($this->request->data)){
$posted = $this->request->data;
// On sauve les données envoyée
Création des vues
2 vues devront être créées également. Il s’agit à nouveau de la vue appelante et de la vue appelée pour la mise à jour du contenu
index.ctp
contient la liste des inscrits à l’événement ainsi qu’un formulaire d’ajout
// filename : /App/View/Subscriptions/index.ctp
<?= $this->Form->create('Subscriptions', array(
'type' => 'post',
'onSubmit' => 'return false;',
'inputDefaults' => array('div' => false),
'action'=>'add',
'class' => 'one-line')
); ?>
<input type="number" name="Subscriptions[User][id]" placeholder="id du membre" required="required"
class="datepicker"/>
<?= $this->Form->checkbox('has_paid',
array(
'label'=>'a payé',
'pattern'=>'^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?\.[0-9]{1,2}$'
)
); ?>
<input type="hidden" name="Subscriptions[Event][id]" value="<?= $event['id'] ?>">
<?= $this->Js->submit('Inscrire', array(
'url' => array('controller'=>'subscriptions','action' => 'subscribe'),
'update' => '#inscriptionsList',
'id' => 'subscribeMember',
'div' => false,
'async' => true)
);?>
<?= $this->Form->end(); ?></br>
<table>
<thead>
<tr>
<th>Nom</th>
<th colspan="2">Prénom</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"><?= count($participants); ?></td>
</tr>
</tfoot>
<tbody id="inscriptionsList">
<?php foreach ($participants as $member):?>
<tr>
<td><?=$member['User']['last_name']?></td>
<td><?=$member['User']['first_name']?></td>
</tr>
<?php endforeach; ?>
</tbody></table>
subscribe.ctp
contient le contenu qui mettra à jour le tableau de la page appelante :
// filename : /App/View/Subscriptions/subscribe.ctp
<?php foreach($participants as $participant):?>
<tr>
<td><?= $participant['User']['last_name'];?></td>
<td><?= $participant['User']['first_name'];?></td>
<td><i class="fa fa-trash-o action-fa" data-user-id="<?= $participant['User']['id']?>"></i></td>
</tr>
<?php endforeach;?>