slam4:php:phalcon:jquery:usage

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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/22 16:25] – [2.1- Requêtes immédiates] jcheronslam4:php:phalcon:jquery:usage [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 2: Ligne 2:
  
 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 =====
Ligne 25: Ligne 27:
  
 === -- 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.
Ligne 84: Ligne 86:
  
 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 ==
Ligne 92: Ligne 94:
     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');");
         ...         ...
 } }
Ligne 98: Ligne 100:
 === 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 ==
  
Ligne 105: Ligne 107:
     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");
         ...         ...
 } }
Ligne 168: Ligne 170:
  
 === -- JSON Array === === -- JSON Array ===
 +
 +A partir de la version : [[https://github.com/jcheron/phalcon-jquery/commit/7706abfc56a2f15b685d506139f7e2d6c0a4c437|commit du 23-03-2015]]
  
 Il peut être également intéressant de réceptionner des données JSON sous forme de tableau, et d'afficher ces données dans une vue, en utilisant un mask (présent dans la page) : Il peut être également intéressant de réceptionner des données JSON sous forme de tableau, et d'afficher ces données dans une vue, en utilisant un mask (présent dans la page) :
Ligne 181: Ligne 185:
  
 La vue contenant le mask :\\ La vue contenant le mask :\\
-Les éléments à remplacer dans le mask doivent comporter l'attribut **data-id**+Les éléments à remplacer dans le mask doivent comporter l'attribut **data-id**, dont le contenu doit correpondre aux données du tableau JSON. 
  
 <sxh html;title:views/exemple/jsonArray.volt> <sxh html;title:views/exemple/jsonArray.volt>
Ligne 202: Ligne 206:
  
  
-Le même exemple, en mettant le chargement JSON sur le click d'un bouton :\\+== Le même exemple, en mettant le chargement JSON sur le click d'un bouton : == 
 + 
 +on utilise **jsonArrayDeferred**, puisque la requête doit attendre le click du bouton\\
  
 <sxh php;title:controllers/exempleController.php> <sxh php;title:controllers/exempleController.php>
Ligne 213: Ligne 219:
  }  }
 </sxh> </sxh>
 +
 +
 +== Même exemple, mais avec séparation contrôleur/vue :==
 +
 +Le contrôleur :
 +<sxh php;title:controllers/exempleController.php>
 + public function jsonArray3Action(){
 + $btn=$this->jquery->bootstrap()->htmlButton("bt1","Get JsonArray",CssRef::CSS_PRIMARY);
 + $btn->onClick($this->jquery->jsonArrayDeferred("#my","exemple/jsonArrayResponse"));
 + $this->jquery->compile($this->view);
 + }
 +</sxh>
 +
 +La vue associée :
 +
 +<sxh html;title:views/exemple/jsonArray3.volt>
 +{{q["bt1"]}}
 +<fieldset>
 +<legend>Résultat du JsonArray</legend>
 +<div id='my' style='display:none'><button data-id='nom' class='btn btn-primary'>Chargement...</button>&nbsp;
 +<input type='text' data-id='prenom' value='chargement...' class='form-control'></div>
 +</fieldset>
 +{{script_foot}}
 +</sxh>
 +
 +== Exemple avec affectation plus complexe ==
 +
 +On souhaite maintenant que le retour JSON puisse modifier de multiples valeurs présentes dans le mask html :
 +
 +Soit le masque suivant, défini dans la vue :\\
 +Nous souhaitons modifier les valeurs des progressbars Bootstrap avec les valeurs **pb** et **style** de notre JSON : il faut dans ce cas préciser inclure dans le masque les membres **<nowiki>[[pb]]</nowiki>** et **<nowiki>[[style]]</nowiki>** aux endroits souhaités.
 +
 +<sxh html;title:views/exemple/jsonArray3.volt>
 +{{q["bt1"]}}
 +{{q["bt1"]}}
 +<fieldset>
 +<legend>Résultat du JsonArray</legend>
 +<div id='my' style='display:none'><button data-id='nom' class='btn btn-primary'>Chargement...</button>&nbsp;
 +<input type='text' data-id='prenom' value='chargement...' class='form-control'>
 +<div class="progress">
 + <div class="progress-bar progress-bar[[style]]" role="progressbar" aria-valuenow="[[pb]]" aria-valuemin="0" aria-valuemax="100" style="width: [[pb]]%;">
 + [[pb]]%
 + </div>
 +</div>
 +</div>
 +</fieldset>
 +{{script_foot}}
 +</sxh>
 +
 +__**Retour JSON :**__
 +
 +<sxh php;title:controllers/exempleController.php>
 + public function jsonArrayResponseAction(){
 + echo '[{"nom":"DOE","prenom":"John","pb":40,"style":"success"},
 + {"nom":"SMITH","prenom":"Robert","pb":10,"style":"info"},
 + {"nom":"GATES","prenom":"Bill","pb":98,"style":"danger"}]';
 + $this->view->disable();
 + }
 +</sxh>
 +
 +__**Le Contrôleur ne change pas :**__
 +
 +<sxh php;title:controllers/exempleController.php>
 + public function jsonArray2Action(){
 + $btn=$this->jquery->bootstrap()->htmlButton("bt1","Get JsonArray",CssRef::CSS_PRIMARY);
 + $btn->onClick($this->jquery->jsonArrayDeferred("#my","exemple/jsonArrayResponse"));
 + $this->jquery->compile($this->view);
 + }
 +</sxh>
 +
 +__**Résultat**__
 +
 +{{:slam4:php:phalcon:jquery:jsonarraycomplexe.png?nolink|}}
  
 ==== -- Association de requêtes à des évènements ==== ==== -- Association de requêtes à des évènements ====
 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 :
Ligne 225: Ligne 304:
 <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>";
Ligne 236: Ligne 315:
 </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 :
Ligne 249: Ligne 328:
  
  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>";
Ligne 262: Ligne 341:
 |< 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 :
  • slam4/php/phalcon/jquery/usage.1427037955.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)