Différences

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

--- slam4:php:phalcon:jquery:usage [2015/03/22 16:22] – [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
@@ Ligne 2: / Ligne 2: @@
 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 =====
@@ Ligne 25: / Ligne 27: @@
 === -- 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.
@@ 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 :
-  * <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 ==
@@ Ligne 92: / Ligne 94: @@
     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 ===
-  * <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 ==
@@ Ligne 105: / Ligne 107: @@
     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 ===
+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) :
@@ Ligne 181: / Ligne 185: @@
 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>
@@ Ligne 200: / Ligne 204: @@
 {{:slam4:php:phalcon:jquery:jsonarray.png?nolink|}}
+== 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>
+	public function jsonArray2Action(){
+		$btn=$this->jquery->bootstrap()->htmlButton("bt1","Get JsonArray",CssRef::CSS_PRIMARY,$this->jquery->jsonArrayDeferred("#mask","exemple/jsonArrayResponse"));
+		echo $btn->compile($this->jquery);
+		echo "<div id='mask' style='display:none'><button data-id='nom' class='btn btn-primary'>Chargement...</button>&nbsp;";
+		echo "<input type='text' data-id='prenom' value='chargement...' class='form-control'></div>";
+		echo $this->jquery->compile();
+	}
+</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 ====
 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 :
@@ Ligne 211: / Ligne 304: @@
 <sxh php;title:controllers/exempleController.php>
 	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 "<div id='divResponse'>En attente de click...</div>";
@@ Ligne 222: / Ligne 315: @@
 </sxh>
-=== -- postFormAndBindTo ===
+=== -- postFormOn ===
 Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément :
@@ Ligne 235: / Ligne 328: @@
 	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...'>
 			<input type='password' name='password' placeholder='password...'></form>";
@@ Ligne 248: / Ligne 341: @@
 |< 100% >|
 ^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 :