Différences

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

--- slam4:php:phalcon:jquery:usage [2015/03/22 03:07] – [1.2- Evènements non listés] 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 80: / Ligne 82: @@
 ==== -- Evènements non listés ====
+=== Exécuter du Javascript ===
 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 ==
-Sur **dropdown (event bootstrap)** du bouton, un message est affiché dans l'élément **#divMessage**
+Sur **dropdown (event bootstrap)** du bouton, un message est affiché dans les logs de la console
 <sxh php;Exemple>
     public function dropdownAction(){
         ...
-        $this->jquery->execAndBindTo("#btnDropdown","show.bs.dropdown","$('#divMessage').html('Dropdown is visible')");
+        $this->jquery->execOn("show.bs.dropdown","#btnDropdown","console.log('Dropdown is visible');");
         ...
 }
 </sxh>
-  * <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**.
+=== Exécuter du JQuery ===
-=== Exemple ===
+  * <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 ==
 Sur **dropdown (event bootstrap)** du bouton, un message est affiché dans l'élément **#divMessage**
@@ Ligne 101: / 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 133: / Ligne 139: @@
 <sxh php;title:controllers/exempleController.php>
 	public function postAction(){
-		$this->jquery->post("testsbs/postResponse","#divPostResponse","{nom:'DOE',prenom:'John'}");
+		$this->jquery->post("exemple/postResponse","#divPostResponse","{nom:'DOE',prenom:'John'}");
 		echo "<div id='divPostResponse'>Chargement...</div>";
 		echo $this->jquery->compile();
@@ Ligne 151: / Ligne 157: @@
 <sxh php;title:controllers/exempleController.php>
 	public function jsonAction(){
-		$this->jquery->json("testsbs/jsonResponse");
+		$this->jquery->json("exemple/jsonResponse");
 		echo "<div id='nom'>Chargement...</div>";
 		echo "<input type='text' id='prenom' value='chargement...'>";
@@ Ligne 161: / Ligne 167: @@
 	}
 </sxh>
+=== -- 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) :
+<sxh php;title:controllers/exempleController.php>
+	public function jsonArrayAction(){
+		$this->jquery->jsonArray("#mask","exemple/jsonArrayResponse");
+		echo $this->jquery->compile();
+	}
+</sxh>
+La vue contenant le mask :\\
+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>
+	<div id='mask' 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>
+</sxh>
+Une réponse JSON pour tester :
+<sxh php;title:controllers/exempleController.php>
+	public function jsonArrayResponseAction(){
+		echo '[{"nom":"DOE","prenom":"John"},{"nom":"SMITH","prenom":"Robert"},{"nom":"GATES","prenom":"Bill"}]';
+		$this->view->disable();
+	}
+</sxh>
+Le résultat :
+{{: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 173: / 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 184: / Ligne 315: @@
 </sxh>
-=== -- postFormAndBindTo ===
+=== -- postFormOn ===
 Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément :
@@ Ligne 197: / 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 210: / 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 :