Ajax helper with CakePHP and jQuery

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;?>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code