Quick links: Content - sections - sub sections
EN FR
Quick Search Advanced search
 
Page

  [Opened] [[résolu]]Impossible de faire de l'autocomplete avec jQuery

Posted by Dunbo on 07/16/2012 17:30

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

  [Opened] Impossible de faire de l'autocomplete avec jQuery

Reply #1 Posted by foxmask on 07/16/2012 19:31

bonsoir

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

cdt.


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] Impossible de faire de l'autocomplete avec jQuery

Reply #2 Posted by dlalleme on 07/24/2012 12:25

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

  [Opened] Impossible de faire de l'autocomplete avec jQuery

Reply #3 Posted by EricD on 07/28/2012 12:24

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

  [Opened] Impossible de faire de l'autocomplete avec jQuery

Reply #4 Posted by Dunbo on 08/14/2012 16:50

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

  [Opened] [RESOLU]Impossible de faire de l'autocomplete avec jQuery

Reply #5 Posted by Dunbo on 08/22/2012 15:45

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

  [Opened] [[résolu]]Impossible de faire de l'autocomplete avec jQuery

Reply #6 Posted by laurentj on 08/22/2012 17:27

		$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é...

  [Opened] [[résolu]]Impossible de faire de l'autocomplete avec jQuery

Reply #7 Posted by Dunbo on 08/28/2012 16:43

Salut,

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

Bonne journée

  [Opened] [[résolu]]Impossible de faire de l'autocomplete avec jQuery

Reply #8 Posted by Henri.d on 02/26/2013 14:42

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.

  [Opened] [RESOLU]Impossible de faire de l'autocomplete avec jQuery

Reply #9 Posted by Dunbo on 05/31/2013 17:22

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

 
Page
  1. Impossible de faire de l'autocomplete avec jQuery