Phalcon-jquery : JQuery

Principales fonctionnalités de la librairie Phalcon-JQuery (hors JQuery UI et Twitter Bootstrap)

Click sur un bouton d'id #btn :

	public function clickAction(){
		$this->click("#btn","console.log('click sur #btn');");
		$this->query->compile($this->view);
	}

Vue associée :

<input type="button" value="Test click" id="btn">
{{script_foot}}

Le code passé au callback peut utiliser le paramètre event passé par JQuery, et $(this), la 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.

	public function clickAction(){
		$this->jquery->keydown("#btn","console.log('code de touche appuyée :' + event.which + ' sur #' + $(this).attr('id'));");
		$this->jquery->compile($this->view);
	}

Exemple : affichage/masquage d'un élément sur changement de la valeur d'une checkbox :

	public function checkedAction(){
		$this->jquery->change("#ck",$this->jquery->toggle("#fs","$(this).checked()"));
		$this->jquery->compile($this->view);
	}

Vue associée :

<input type="checkbox" id="ck" checked>
<fieldset id="fs">
<legend>Elément à afficher/masquer</legend>
</fieldset>
{{script_foot}}

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 :

• execAndBindTo(selector,event,callback) permettant d'exécuter le callback sur le déclenchement de event sur l'élément désigné par selector.
• doJqueryAndBindTo($element,$event,$elementToModify,$jqueryCall,$param="",$function="") 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.

Il s'agit des requêtes dont l'exécution n'est pas différée (non associée à un évènement par exemple).
Les requêtes immédiates peuvent permettre le chargement d'une page en cascade : élément par élément.

Exemple : Chargement de exemple/getResponse dans la div #divResponse

	public function getAction(){
		$this->jquery->get("exemple/getResponse","#divResponse");
		echo "<div id='divResponse'>Chargement...</div>";
		echo $this->jquery->compile();
	}
	public function getResponseAction(){
		echo "Chargement terminé";
		$this->view->disable();
	}

Exemple : Post de valeurs vers exemple/postResponse dans la div #divPostResponse

	public function postAction(){
		$this->jquery->post("testsbs/postResponse","#divPostResponse","{nom:'DOE',prenom:'John'}");
		echo "<div id='divPostResponse'>Chargement...</div>";
		echo $this->jquery->compile();
	}
	public function postResponseAction(){
		var_dump($_POST);
		$this->view->disable();
	}

Les requêtes JSON permettent d'alimenter en données une vue, à partir d'un retour d'objet JSON par le serveur.

Exemple : Le get JSON vers la page exemple/jsonResponse alimente tous les éléments DOM nom et prenom avec l'élément JSON retourné.

	public function jsonAction(){
		$this->jquery->json("testsbs/jsonResponse");
		echo "<div id='nom'>Chargement...</div>";
		echo "<input type='text' id='prenom' value='chargement...'>";
		echo $this->jquery->compile();
	}
	public function jsonResponseAction(){
		echo '{"nom":"DOE","prenom":"John"}';
		$this->view->disable();
	}

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…)

Permet d'associer l'exécution d'un Get à un évènement déclenché sur un élément :

Exemple : Sur click du bouton #btnGet, on veut effectuer un get vers exemple/getResponse, et afficher le résultat dans la div #divResponse.

	public function getAction(){
		$this->jquery->getAndBindTo("#btn","click","testsbs/getResponse","#divResponse");
		echo "<input type='button' id='btn' value='doGet'>";
		echo "<div id='divResponse'>En attente de click...</div>";
		echo $this->jquery->compile();
	}
	public function getResponseAction(){
		echo "Chargement terminé";
		$this->view->disable();
	}

Permet d'associer le post d'un formulaire à un évènement déclenché sur un élément :

Exemple : Sur click du bouton #btnPost, on veut poster le formulaire frmLogin vers exemple/postResponse, et afficher le résultat dans la div #divResponse.

	public function postResponseAction(){
		var_dump($_POST);
		$this->view->disable();
	}

	public function postFormAction(){
		$this->jquery->postFormAndBindTo("#btn","click","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>";
		echo "<input type='button' id='btnPost' value='doPost'>";
		echo "<div id='divPostResponse'>Avant validation</div>";
		echo $this->jquery->compile();
	}

Il est également possible d'utiliser :

Ou de combiner les méthodes différées avec les méthodes évènementielles :

	public function getAction(){
		$this->jquery->click("#btn",$this->jquery->getDefered("testsbs/getResponse","#divResponse"));
		echo "<input type='button' id='btn' value='doGet'>";
		echo "<div id='divResponse'>En attente de click...</div>";
		echo $this->jquery->compile();
	}