| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| slam4:php:phalcon:jquery:usage [2015/03/23 02:55] – [2.1- Requêtes immédiates] jcheron | slam4:php:phalcon:jquery:usage [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |
| Principales fonctionnalités de la librairie Phalcon-JQuery (hors JQuery UI et Twitter Bootstrap) | Principales fonctionnalités de la librairie Phalcon-JQuery (hors JQuery UI et Twitter Bootstrap) |
| | |
| | Pour Bootsrap, voir [[slam4:php:phalcon:jquery:bootstrap]] |
| |
| ===== -- Association d'évènements ===== | ===== -- Association d'évènements ===== |
| |
| === -- Utilisation du paramètre event du callback === | === -- Utilisation du paramètre event du callback === |
| | <html><div class="note">Le paramètre <b>callback</b> ne doit pas passer une fonction javascript, mais une suite d'instructions js.</div></html> |
| Le code passé au callback peut utiliser le paramètre **event** passé par JQuery, et **$(this)**, la cible de l'évènement (target) : | Le code passé au callback peut utiliser le paramètre **event** passé par JQuery ou **$(this)**, cible de l'évènement (target) : |
| |
| __**Exemple :**__ appui sur une touche, récupération du code de la touche frappée et de l'id de l'élément ayant généré l'évènement. | __**Exemple :**__ appui sur une touche, récupération du code de la touche frappée et de l'id de l'élément ayant généré l'évènement. |
| |
| Pour les évènements inconnus de JQuery ou ne disposant pas de méthode associée dans la librairie phalcon-jquery, on utilise les méthodes : | Pour les évènements inconnus de JQuery ou ne disposant pas de méthode associée dans la librairie phalcon-jquery, on utilise les méthodes : |
| * <html><span class="method">execAndBindTo(selector,event,callback)</span></html> permettant d'exécuter le **callback** sur le déclenchement de **event** sur l'élément désigné par **selector**. | * <html><span class="method">execOn(event,selector,callback)</span></html> permettant d'exécuter le **callback** sur le déclenchement de **event** sur l'élément désigné par **selector**. |
| |
| == Exemple == | == Exemple == |
| public function dropdownAction(){ | public function dropdownAction(){ |
| ... | ... |
| $this->jquery->execAndBindTo("#btnDropdown","show.bs.dropdown","console.log('Dropdown is visible');"); | $this->jquery->execOn("show.bs.dropdown","#btnDropdown","console.log('Dropdown is visible');"); |
| ... | ... |
| } | } |
| === Exécuter du JQuery === | === Exécuter du JQuery === |
| |
| * <html><span class="method">doJqueryAndBindTo($element,$event,$elementToModify,$jqueryCall,$param="",$function="")</span></html> permettant d'exécuter la méthode jquery **jqueryCall** sur **elementToModify**, en lui passant **param** sur le déclenchement de **event** sur l'élément désigné par **element**. | * <html><span class="method">doJqueryOn($event,$element,$elementToModify,$jqueryCall,$param="",$function="")</span></html> permettant d'exécuter la méthode jquery **jqueryCall** sur **elementToModify**, en lui passant **param** sur le déclenchement de **event** sur l'élément désigné par **element**. |
| == Exemple == | == Exemple == |
| |
| public function dropdownAction(){ | public function dropdownAction(){ |
| ... | ... |
| $this->jquery->doJqueryAndBindTo("#btnDropdown","show.bs.dropdown","#divMessage","html","Dropdown is visible"); | $this->jquery->doJqueryOn("show.bs.dropdown","#btnDropdown","#divMessage","html","Dropdown is visible"); |
| ... | ... |
| } | } |
| Pour faire plus court, les exemples suivants ne comportent pas de vues, et les éléments HTML sont directement produits dans le contrôleur (à éviter...) | Pour faire plus court, les exemples suivants ne comportent pas de vues, et les éléments HTML sont directement produits dans le contrôleur (à éviter...) |
| |
| === -- getAndBindTo === | === -- getOn === |
| |
| Permet d'associer l'exécution d'un Get à un évènement déclenché sur un élément : | Permet d'associer l'exécution d'un Get à un évènement déclenché sur un élément : |
| <sxh php;title:controllers/exempleController.php> | <sxh php;title:controllers/exempleController.php> |
| public function getAction(){ | public function getAction(){ |
| $this->jquery->getAndBindTo("#btn","click","testsbs/getResponse","#divResponse"); | $this->jquery->getOn("click","#btn","testsbs/getResponse","#divResponse"); |
| echo "<input type='button' id='btn' value='doGet'>"; | echo "<input type='button' id='btn' value='doGet'>"; |
| echo "<div id='divResponse'>En attente de click...</div>"; | echo "<div id='divResponse'>En attente de click...</div>"; |
| </sxh> | </sxh> |
| |
| === -- postFormAndBindTo === | === -- postFormOn === |
| |
| Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément : | Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément : |
| |
| public function postFormAction(){ | public function postFormAction(){ |
| $this->jquery->postFormAndBindTo("#btn","click","testsbs/postResponse","frmLogin","#divPostResponse"); | $this->jquery->postForOn("click","#btn","testsbs/postResponse","frmLogin","#divPostResponse"); |
| echo "<form id='frmLogin' name='frmLogin' onsubmit='return false;'><input type='text' name='login' placeholder='Login...'> | echo "<form id='frmLogin' name='frmLogin' onsubmit='return false;'><input type='text' name='login' placeholder='Login...'> |
| <input type='password' name='password' placeholder='password...'></form>"; | <input type='password' name='password' placeholder='password...'></form>"; |
| |< 100% >| | |< 100% >| |
| ^Méthode ^Rôle^ | ^Méthode ^Rôle^ |
| |<html><span class="method">postAndBindTo(element,event,url[,params,responseElement])</span></html> | Post les paramètres **params** vers url sur l'**event** produit sur **element** | | |<html><span class="method">postOn(event,element,url[,params,responseElement])</span></html> | Post les paramètres **params** vers url sur l'**event** produit sur **element** | |
| |
| Ou de combiner les méthodes différées avec les méthodes évènementielles : | Ou de combiner les méthodes différées avec les méthodes évènementielles : |