Bonjour à tous,

Je souhaite utiliser jquery pour aller chercher les données d'un input dynamiquement sur le serveur. Voilà ce que j'ai fait dans mon contrôleur :

//Dans le contrôleur booking.classic.php
$rep->addHeadContent('<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	
	</script>');

//Dans le template
<div class="demo">
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />
</div>

</div>

J'ai essayé sans insérer les librairies et aussi en les insérant de la façon suivante

$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery-ui.min.js');
$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery.min.js');
$rep->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jquery-ui.css');

Impossible de comprendre ce qui ne fonctionne pas.

Par la suite je vais me servir de JSON pour envoyer les donnés au client. Je pense que je ferai un petit tutoriel la dessus.

Dans l'attente de vous lire

Cordialement

bonsoir

je n'ai pas regardé votre vode mais pour autant si ca peut vous aider sachez que le forum utilse l'autocomplete

cdt.

Dunbo a dit :
Bonjour à tous,

J'ai essayé sans insérer les librairies et aussi en les insérant de la façon suivante
<code>
$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery-ui.min.js');
$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery.min.js');
$rep->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jquery-ui.css');
</code>

Bonjour à tous,

Peut être qu'il manque des modules jquery-ui (autocomplete) pour continuer ?

Consulte la doc jquery-ui pour les dépendances. Pour ma part, je l'utilise et cela fonctionne.

Pourrais-tu envoyer une log ou expliquer ce qui te fait dire que cela ne fonctionne pas ? log apache, error.log, etc ...

Cordialement Denis

Pour être sure que Jquery soit bien chargé en premier il existe une méthode intégrer a Jelix. Et tu peux choisir quels modules charger (ui,....).

http://docs.jelix.org/fr/manuel-1.3/ref-plugins/tplplugins/metas

Sinon essaye de charger les modules dans l'ordre Jquery et après les modules :)

$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery.min.js');
$rep->addJSLink($gJConfig->urlengine['jelixWWWPath'].'js/jquery-ui.min.js');
$rep->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jquery-ui.css');

Bonne journée

Bonjour,

Désolé mais pour cause de vacances je n'ai pas lu vos réponses. Je me remets là dessus dès demain je vous tiens au courant merci pour cette aide précieuse

Bonne journée à tous

De mes déboires je propose la solution suivante pour faire fonctionner jQuery je laisse le soin a celui qui est plus doué d'en faire un tuto. Merci à tous pour votre aide.

Passons au vif du sujet

0. Propos Faire un autocomplete en jquery et stocker dans un champ caché l'id d'un compte tout en affichant dans le input champ texte lisible par l'humain

1. Il faut importer correctement et dans le bon ordre les module/librairy jquery. Par défaut je ne modifie rien sauf dans le template ce qui me donne comme première ligne de mon template bookingedit.tpl

{meta_html jquery}
{meta_html jquery_ui 'components',array('widget','position','autocomplete')}

2. On créé les deux input nécessaires dans le fichier xml du formulaire et du tpl et on récupère précieusement le nom résultat qui sera en l'occurence pour moi : "jforms_accounting_booking_help" soit l'id de l'input qui va servir de champ de recherche et "jforms_accounting_booking_id_account" soit l'id de l'input qui va recevoir l'id_account soit la clef que je veux enregistrer.

3. Dans le fichier controleur on fait sa petite fonction qui renvoie au format json les données soit :

	Public function autoComplete(){
		$this->initList();
		$nsw = $_GET['name_startsWith'];
		$mr =$_GET['maxRows'];
		$rep = $this->getResponse('json');
		foreach ($this->liste as $key=>$element) {
			if ($i<$mr && stristr($element,$nsw)) {
				$rep->data[] = array( 'label'=>$element, 'value'=>$key);
	            $i++;
	        }
		}
		return $rep;
	 }

4. et là on passe à la partie jquery avec un soupçon d'Ajax, dans le tpl on ajoute en fin de page :

<script type="text/javascript">
{literal}
//<![CDATA[
$(document).ready(function() {
    $('#jforms_accounting_booking_help').autocomplete({
		source: function( request, response ) {
				$.ajax({
					url: "{/literal}{jurl 'accounting~booking:autoComplete',array()}{literal}",
					dataType: "json",
					data: {
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.label,
								value: item.label,
								option: item.value
							}
						}));
					}
				});
			},
		menLength: 2,
		select : function(event,ui){
			$('#jforms_accounting_booking_id_account').val(ui.item.option);
		}
	});
	
});
//]]>
{/literal}
</script>

5. la touche finale dans le contrôleur pour avoir un joli comportement :

$rep->addCSSLink($gJConfig->urlengine['basePath'].'css/jquery.autocomplete.css');
$rep->addCSSLink($gJConfig->urlengine['basePath'].'css/jquery-ui.css');

Voilà je sais que je ne suis pas très didactique mais je suis sur que vous vous en sortirez. Si vous cherchez des tutos qui expliquent bien : http://www.grafikart.fr/tutoriels/jquery

Et surtout regardez la console, elle est indipensable.

Bonne chance

		$nsw = $_GET['name_startsWith'];
		$mr =$_GET['maxRows'];

Il vaut mieux rester dans l'esprit du framework en utilisant la méthode param. Si l'url change (en particulier si on utilise le moteur significant), par exemple en url plus sympa comme index.php/autocomplete/foo_/3 (pathinfo="autocomplete/:name_startsWith/:maxRows), alors ton code ne fonctionnera plus.

Autre cas aussi, genre un plugin pour le coordinateur est ajouté pour par exemple vérifier/filtrer tous les paramètres GET, avec ton code, tu récupérera la version non filtrée, ce qui peut alors poser problème pour ton appli.

Mais ces lignes suivantes fonctionneront en toute circonstance :

		$nsw = $this->param('name_startsWith');
		$mr = $this->param('maxRows');

Et avec param(), tu peux indiquer aussi des valeurs par défaut.

		$nsw = $this->param('name_startsWith', '');
		$mr = $this->param('maxRows', 10);

Ce qui évite que le code te gènère des warnings et notice dans tout les sens quand les paramètres ne sont pas fournis. Ton url peut être appelé par autre chose que ton script js, ne l'oublie pas, et donc si tu ne blindes pas la vérification des paramètres, ça peut conduire à des disfonctionnements, voir des trous de sécurité...

Salut,

Merci pour l'info. Je vais corriger cela tout de suite.

Bonne journée

Bonjour,

Je sais que je déterre un peu le sujet mais il concerne exactement mon problème. Malheureusement, je ne comprends pas l'étape 2 dans votre explication. Pourriez vous expliciter ce que vous voulez dire par "deux champs input"? Peut-être que fournir le morceau de code serait plus clair?

Merci d'avance, Henri D.

Bonjour Henri,

Désolé j'avais finit mes devs et je n'étais pas revenu sur le site depuis plusieurs mois.

Je me site moi-même donc

2. On créé les deux input nécessaires dans le fichier xml du formulaire et du tpl et on récupère >précieusement le nom résultat qui sera en l'occurence pour moi : "jforms_accounting_booking_help" >soit l'id de l'input qui va servir de champ de recherche et >"jforms_accounting_booking_id_account" soit l'id de l'input qui va recevoir l'id_account soit la
clef que je veux enregistrer.

Dans le fichier XML vous allez avoir deux champs de type input en l'occurence

<hidden ref="id_acc_to_be_booked"/>
<input ref="help" type="string" size="50">
<label>Find tenant contract</label>
</input>

que vous allez afficher au moyen de votre template au moyen de (je vous laisse les décorations):

{ctrl_control 'help'}

Le champs hidden s'insérant automatiquement.

Vous avez besoins des deux champs car il vous faut non seulement le texte pour la lecture mais aussi la valeur de l'id qui est retournée par Json.

J'espère être suffisamment clair

Cordialement