Ajax et Modal Boostrap

Ilan
CakePHP

Bonjour à tous,

J'ai une petite demande de script qui va vous paraître peut-être simple mais qui me fait galérer.
J'utilise Cakephp 2.1 couplé au dernier Bootstrap de Twitter, utilisé avec Less.js.

J'ai donc une action Liste() qui me sorte la liste de mes Users. Fonction très simple :

function Liste() {
    $this->set('users', $this->paginate('User'));
}

Dans ma vue, j'affiche un tableau simple avec Username | Email | Actions.
Dans ma colonne action, j'aimerai un bouton "Voir" qui ouvrirait un "Modal" inclus dans le framework Boostrap avec une sorte de "résumé du profil" avec quelques champs supplémentaire du type "Nom, Prénom, date d'inscription" etc...

Je pense que je dois utiliser Ajax mais je ne m'y connais pas du tout...

Merci d'avance pour votre aide!

Bon dimanche.
Ilan

1 réponse

Maenhyr

Salut, voici comment j'ai fait :

    1. Ajout du markup dans la page concernée ou dans le layout (il ne va y avoir qu'un modal affiché à chaque fois donc on n'en crée qu'un)
    1. Ajout d'un layout ajax.ctp dans lequel on n'affiche que le content et les scripts chargés sur la vue (si tu charges d'autres scripts pour une validation de formulaire, par exemple).
    1. On indique au controller de charger la vue ajax.ctp si la requête est faite en AJAX :

    if(isset($_SERVER 'HTTP_X_REQUESTED_WITH' ]) && $_SERVER 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest'){
    $this->layout = 'ajax';
    }

    1. On code le script jQuery

Voici le principe du code jQuery

    1. On place un listener sur le bouton choisi
    1. au clic, on charge la vue associée et on place nos informations dans le markup du modal (c'est ce qui demande le plus de code)
    1. on affiche le modal

Le layout ajax.ctp est important car si tu charges un layout complet, tu risques de recharger toutes les libraires comme jQuery ou bien bootstrap.js, ce qui inclut des erreurs d'affichages et un temps de chargement plus important.

Tu dois quand même prévoir une vue sans JS au cas où l'utilisateur ne peut l'activer.

En espérant que cela t'a aidé!