Ingénieur IT, photographe amateur, musicien du dimanche
Ajax helper with CakePHP and jQuery
Ajax helper with CakePHP and jQuery

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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code