Différences

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

--- slam4:php:phalcon:jquery:usage [2015/03/23 00:28] – [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 245: / Ligne 249: @@
 Soit le masque suivant, défini dans la vue :\\
-Nous souhaitons modifier les valeurs des progressbars Bootstrap avec la valeur **pb** de notre JSON : il faut dans ce cas préciser le **data-id="pb"** et inclure dans le masque le membre **[[pb]]** aux endroits souhaités.
+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>
@@ Ligne 255: / Ligne 259: @@
 <input type='text' data-id='prenom' value='chargement...' class='form-control'>
 <div class="progress">
-	<div data-id="pb" class="progress-bar" role="progressbar" aria-valuenow="[[pb]]" aria-valuemin="0" aria-valuemax="100" style="width: [[pb]]%;">
+	<div class="progress-bar progress-bar[[style]]" role="progressbar" aria-valuenow="[[pb]]" aria-valuemin="0" aria-valuemax="100" style="width: [[pb]]%;">
 		[[pb]]%
 	</div>
@@ Ligne 268: / Ligne 272: @@
 <sxh php;title:controllers/exempleController.php>
 	public function jsonArrayResponseAction(){
-		echo '[{"nom":"DOE","prenom":"John","pb":40},{"nom":"SMITH","prenom":"Robert","pb":10},{"nom":"GATES","prenom":"Bill","pb":98}]';
+		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();
 	}
@@ Ligne 285: / Ligne 291: @@
 __**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 297: / 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 308: / Ligne 315: @@
 </sxh>
-=== -- postFormAndBindTo ===
+=== -- postFormOn ===
 Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément :
@@ Ligne 321: / 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 334: / 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 :