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.

Sur dropdown (event bootstrap) du bouton, un message est affiché dans les logs de la console

    public function dropdownAction(){
        ...
        $this->jquery->execAndBindTo("#btnDropdown","show.bs.dropdown","console.log('Dropdown is visible');");
        ...
}

• 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.

Sur dropdown (event bootstrap) du bouton, un message est affiché dans l'élément #divMessage

    public function dropdownAction(){
        ...
        $this->jquery->doJqueryAndBindTo("#btnDropdown","show.bs.dropdown","#divMessage","html","Dropdown is visible");
        ...
}

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();
	}

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

	public function jsonArrayAction(){
		$this->jquery->jsonArray("#mask","testsbs/jsonArrayResponse");
		echo $this->jquery->compile();
	}

La vue contenant le mask :
Les éléments à remplacer dans le mask doivent comporter l'attribut data-id

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

Une réponse JSON pour tester :

	public function jsonArrayResponseAction(){
		echo '[{"nom":"DOE","prenom":"John"},{"nom":"SMITH","prenom":"Robert"},{"nom":"GATES","prenom":"Bill"}]';
		$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->getDeferred("testsbs/getResponse","#divResponse"));
		echo "<input type='button' id='btn' value='doGet'>";
		echo "<div id='divResponse'>En attente de click...</div>";
		echo $this->jquery->compile();
	}