Probleme avec ASP

Résolu/Fermé
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 - 29 juil. 2009 à 11:59
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 30 juil. 2009 à 17:17
Bonjour,

j'ai un code en asp qui génère un select en remplissant les option grace au resultat d'une requete.
le probleme c'est que pour executer cette requete je dois envoyer un nom de pays a une procedure stockée.
or ce pays est selectionné dans un select juste au dessus.

voila une version résumée du select (pour choisir un pays) :
========================================================
<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1">
<option>France</option> <!-- ici les options sont introduites en dur -->
<option>Italie</option>
<option>Argentine</option>
<option>Chine</option>
</select>
========================================================

et en dessous on a le code asp qui recupère les regions selon le pays pour les placer dans un select:
========================================================
<%
dim pays
pays = "France"
sql = "EXEC reg_aff @pays = '"&pays&"';"
RS.Open sql, conn
Response.Write("<select name='region' class='hideComboBoxList2' size='6' id='comboBoxList2'>")
do while not rs.eof
Response.Write("<option>")
response.write(RS("region"))
Response.Write("</option>")
RS.movenext
loop
Response.Write("</select>")
%>
========================================================

ce code fonctionne excepté pour un petit détail... ou plutot un gros... -_-'
dans la partie asp, j'entre le nom du pays en dur (c'était pour les tests).
mais maintenant il faut que le nom du pays selectionné dans la 1ere partie (javascript, pour le choix du pays) soit récupéré pour que sa valeur soit envoyé dans la partie asp ou j'execute la requete sql (procedure stockée qui renvoit les regions correspondant au pays.), à la place de ma variable pays, qui est entrée en dur...

en gros, quand je selectionne un pays en haut, il faut que ses regions apparaissent en bas. j'espère que c'est possible a realiser en asp... sinon je suis dans la m****.

je vous remercie d'avance pour votre aide.

_________________________
descendez les 42 marches...
A voir également:

18 réponses

Bonjour,

Alors 2 choses pour ce problème.

l'ASP est du code serveur. donc il faut envoyer la modification du champ au serveur pour pouvoir exécuter la procédure stockée, en validant le formulaire ou en rechargeant la page.

Une solution "simple" serait de mettre un "Onchange" javascript sur le SELECT des pays, afin de lancer une fonction javascript qui recharge la page sous la forme "page.asp?pays=paysselectioné".

Ainsi, on reste sur la page du formulaire, et il suffit de modifier ton code comme suit:
<%
if not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<>"" then
dim pays
pays = Request.QueryString("pays")
sql = "EXEC reg_aff @pays = '"&pays&"';"
RS.Open sql, conn
Response.Write("<select name='region' class='hideComboBoxList2' size='6' id='comboBoxList2'>")
do while not rs.eof
Response.Write("<option>")
response.write(RS("region"))
Response.Write("</option>")
RS.movenext
loop
Response.Write("</select>")
end if
%> 


Je pense que tout n'est pas complet dans mon exemple, et je n'ai pas le temps de tester.
Si quelqu'un voit quelque chose à redire, qu'il n'hésite pas =)

Bon courage.
2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 12:07
Houlà!!!

ce code n'est pas si hasardeux que ça. il redéfinit les comboBox, c'est original et un peu bourrin...

Mais dans notre cas il n'est pas utile de les lier. ça le serait s'il n'y avait pas de rechargement de page. donc comme on en fait un ça ne marcherait pas.
Il faudrait donc mettre à jour le champ par ASP lors du chargement de la page:
<input type="text" name="pays" class="displayEditField1" id="comboBoxEditField1" value="<% 
If Not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<> "" Then
response.write(Request.QueryString("pays")) 
else 
response.write("Pays") 
end if
%>"/> 


croisons les doigts...
2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
29 juil. 2009 à 17:23
On reprend.

Pour que ma méthode fonctionne (et elle fonctionne, je l'ai déjà implémentée), il faut que le formulaire soit en méthode POST.

ainsi on a le code HTML suivant:
<form method="POST" action="page2.asp">
<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" Onchange="Update_Reg();">
<option>France</option> <!-- ici les options sont introduites en dur -->
<option>Italie</option>
<option>Argentine</option>
<option>Chine</option>
</select> 

<%
if not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<>"" then
dim pays
pays = Request.QueryString("pays")
sql = "EXEC reg_aff @pays = '"&pays&"';"
RS.Open sql, conn
Response.Write("<select name='region' class='hideComboBoxList2' size='6' id='comboBoxList2'>")
do while not rs.eof
Response.Write("<option>")
response.write(RS("region"))
Response.Write("</option>")
RS.movenext
loop
Response.Write("</select>")
end if
%> 
</form>

et le code javascript à mettre dans le header:
<script langage="javascript">
function Update_Reg()
{
  document.location="page.asp?pays=" + document.getElementById('comboBoxList1').value;
}
</script>

avec ça ça devrait marcher, j'espère.
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 08:53
Pas forcément. dans ce cas, ne mets pas la fonction javascript dans le header, mais directement dans le select, comme suit:

<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" Onchange="document.location='page.asp?pays=' + document.getElementById('comboBoxList1').value;">
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 11:08
OK, le soucis est que ta page est déjà en méthode get. Essaye de changer le onchange comme ça:
<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" onchange="document.location='./index.asp?page=page_form.asp&pays=' + document.getElementById('comboBoxList1').value;">


Comme tu le dis, l'asp n'est exécuté qu'au chargement de la page (comme le php). c'est pour ça que j'utilise le "document.location" qui recharge la page avec javascript.
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 15:28
Tu as vu juste, le soucis de compatibilité vient du fait que le code javascript redéfinit le "Onchange" du combobox.

Essaye en mettant la ligne this.list.onchange = function(){return this.comboBox.updateList2EditField();}; en commentaire, et rajoute la ligne this.list.onkeyup = function(){return this.comboBox.updateList2EditField();}; juste après.

Puis rajoute ton script
<script>
new ComboBox(document.getElementById('comboBoxEditField1'),document.getElementById('comboBoxList1'));
</script> 

Je pense que ça pourrait suffire à régler le problème. Car pour les combobox on ne peut les modifier qu'en cliquant ou en utilisant le clavier. le onchange devient donc inutile.

croisons les mains ^^
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 16:55
Hum.
Je n'ai pas le temps tout de suite pour tester tout ça, surtout que sans avoir la page complète c'est difficile voir. Jusque là j'ai tout fait de tête sans tester mais sans connaître le véritable comportement je peux pas vraiment t'aider.

Ca serait possible de faire tout une flopée de tests pour vraiment cerner ses réactions? en informatique rien n'est aléatoire...
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
30 juil. 2009 à 17:17
Bon courage à toi alors =)
1
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
29 juil. 2009 à 17:03
exactement, mais c'est la que réside mon problème...
voici le code de la liste déroulante du choix des pays:

===================

<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" OnClick="Update_Reg()">
<option>France</option> <!-- ici les options sont introduites en dur -->
<option>Italie</option>
<option>Argentine</option>
<option>Chine</option>
</select>

===================

j'ai modifié le code ASP, jusque la ça tient la route.
mais comment envoyer précisément le nom du pays sélectionné dans ce select à la fonction javascript qui va appeler le code ASP...

lorsqu'on selectionne le pays, son nom est envoyé via le formulaire, or la liste des regions doit etre mise à jour automatiquement avant de cliquer sur 'valider'. comment faire ? (si au moins c'est possible...)

c'est la dessus que je bloque.
j'avais même codé cette partie en javascript. ça effectuait , "presque" la meme chose (juste l'affichage des valeurs d'un tableau dans un select, car je ne savais pas comment récupérer le contenu du resultat de la requete.)

===================

<script type="text/javascript">
function aff_region(IdTab) // la fonction reçoit en parametre l'id du tableau dans lequel on place la liste affichant les régions
{
var table = document.getElementById(IdTab); //le tableau dans lequel on a placé la combobox est appellé. on le trouve grace a son Id (<table id='TableRow'>, voir plus haut)
var tab_region = new Array('r1','r2','r3'); //on déclare un nouveau tableau qui récupèrera le nom des regions à placer dans les options

var buffer = ''; // on declare un buffer qui va stocker le code html à placer dans la cellule du tableau sur laquelle nous travaillons
buffer = '<input name="region" type="text" class="displayEditField2" id="comboBoxEditField2" value="region"/>';
buffer = buffer + '<select name="region" class="hideComboBoxList2" size="6" id="comboBoxList2">';
var i = 0; // on declare une variable pour se deplacer entre les differentes lignes du tableau dans la boucle qui suit
while (i < tab_region.length) // cette boucle permet de remplir les options du select avec les données récupérées, c'est l'objectif de cette partie javascript
{
if (tab_region[i] != '')
buffer = buffer + '<option>'+tab_region[i]+'</option>';
i++;
}
buffer = buffer + '</select>'; // on ferme la balise select
table.rows[3].cells[1].innerHTML = buffer; // et on affiche le buffer dans la cellule correspondante du tableau
return true; // on met fin à la fonction
}
aff_region('TableRow'); // cette ligne appelle la fonction qui se chargera de remplir les options du 'select' avec le nom des regions récupérées par la requete SQL
new ComboBox(document.getElementById('comboBoxEditField2'),document.getElementById('comboBoxList2')); // lance les fonctions permettant de faire fonctionner cette partie de la combobox
</script>

===================

c'est galère... et je travail sur cette page depuis 9h30...
__________________________
descendez les 42 marches...
0
je viens de rentrer et je n'ai pas accès aux pages du site depuis chez moi.
mais je testerai ça demain.

en tout cas merci pour ton aide.
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
29 juil. 2009 à 18:48
je viens de tilter...

le code javascript en fin de message est a placer dans le header, or je n'y ai pas accès.

la page sur laquelle je travaille ne contient pas les balises <head>, <title> et <body>. Elles se trouvent sur une autre page appellée en include, et je ne peux pas la modifier car elle est utilisée par presque toutes les pages du site. Il y en a une bonne cinquantaine donc on a préferé éviter de faire un header pour chaque page, d'autant plus que cette include comporte la bannière et le menu gauche de la page.

à croire qu'on me demande l'impossible ^^'
________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 09:06
je suis au taff, je vais essayer d'appliquer tout ça.
si ça marche je posterai un message au cas ou d'autres developpeurs auraient le même probleme.

________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 10:51
ça ne marche pas, mais c'est peut être moi qui m'y prend mal.
voici le formulaire incluant les modifications:

=====================================================================

<form onsubmit="return check_form_validity_consult_client();" method="post" action="./index.asp?page=page_form.asp">
<div class="FormAcces">
<h3>FORMULAIRE</h3>
<table id="TableRow">
<tr>
<!-- ... -->
</tr>
<tr>
<!-- ... -->
</tr>
<tr>
<th>Pays :</th>
<td>
<div id="comboBox" class="displayComboBox">
<input type="text" name="pays" class="displayEditField1" id="comboBoxEditField1" value="pays"/>
<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" onchange="document.location='./index.asp?page=page_form.asp?pays=' + document.getElementById('comboBoxList1').value;">
<option>France</option>
<option>Italie</option>
<option>Argentine</option>
<option>Chine</option>
<option>Etats-Unis</option>
</select>
<script>new ComboBox(document.getElementById('comboBoxEditField1'),document.getElementById('comboBoxList1'));</script>
</div>
</td>
</tr>
<tr>
<th>Region :</th>
<td>
<div id="comboBox" class="displayComboBox">
<input name="region" type="text" class="displayEditField2" id="comboBoxEditField2" value="region"/>
<%
If Not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<> "" Then
dim pays
pays = Request.QueryString("pays")
sql = "EXEC reg_aff @pays = '"&pays&"';"
RS.Open sql, conn
Response.Write("<select name='region' class='hideComboBoxList2' size='6' id='comboBoxList2'>")
do while not rs.eof
Response.Write("<option>")
response.write(RS("region"))
Response.Write("</option>")
RS.movenext
loop
Response.Write("</select>")
End If
%>
<script>
new ComboBox(document.getElementById('comboBoxEditField2'),document.getElementById('comboBoxList2'));
</script>
</div>
</td>
</tr>
</tr>
<tr>
<!-- ... -->
</tr>
<tr>
<!-- ... -->
</tr>
</table>
</div>
<div class="FormAccesSubmit">
<p>
<input type="submit" value="Valider" /></p>
</div>
</form>

=====================================================================

j'ai retiré certaines partie pour résumer (sinon c'est trop long...)

si je comprend bien, le 'onchange' sur le premier select est sensé mettre a jour la liste des regions dès qu'on modifie la selection (du pays) ?
car quand je modifie la selection rien ne change.

et j'ai vu que ta technique envoit des données via l'url:

(onchange="document.location='./index.asp?page=page_form.asp?pays=' + document.getElementById('comboBoxList1').value;")

mais comment cette technique peut fonctionner sans rafraichissement de page ? oO'
je dois avouer que je suis perdu la ^^'
de plus on m'a dit que l'ASP s'execute uniquement au chargement de la page, il faut donc bel et bien recharger la page pour executer la modification de la liste des regions... non ?

ça devient de plus en plus compliqué (or je suis en stage depuis une semaine et j'avais jamais touché au javascript ni à l'asp avant...)


je resume ce qu'on doit pouvoir faire au cas ou: (histoire de voir si c'est possible, pour commencer)

un petit screen (ça peut aider):
http://img90.imageshack.us/img90/1329/screen1zkm.jpg

1) à la base, on voit:
- en 1 la liste des pays
- en 2 la liste de toutes les regions

2) ce que je dois pouvoir faire:
- en 1, je selectionne un pays
- en 2, la liste des regions de ce pays s'affiche (resultat de la requete de la partie asp)
- en 2 je selectionne une region
- en 3 je clique sur valider et ça m'affiche un tableau correspondant à ma requete.
(je précise que ce formulaire fait appel à la meme page)

voila un screen montrant ce que ça donne si je selectionne comme pays la france et comme region l'alsace:
(on m'a demandé de cacher la plupart des champs mais on voit toujours l'essentiel)

http://img53.imageshack.us/img53/6123/screen2v.jpg

est il possible de faire ça en javascript et asp ? car je commence à en douter...
si non, s'il y a une solution de contournement, je suis preneur.

merci d'avance.

________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 11:33
miracle ^^' ça marche !!!

mais y a un autre soucis... -_-'
désolé d'en demander autant, j'espère que ça te dérange pas trop.

pour que le onchange fonctionne (et c'est le cas ^^) j'ai du supprimer le script qui appelle la fonction qui place la selection du select (pays) dans l'input juste au dessus.

ce script appelle une fonction qui lie les select et les input, un bordel incroyable qui a été codé par un autre stagiaire, enfin, il disait l'avoir codé lui même quand il était encore la.
===========
<script>
new ComboBox(document.getElementById('comboBoxEditField1'),document.getElementById('comboBoxList1'));
</script>
===========
je posterai en dessous la partie javascript qui contient les fonctions appellées

ce que je peux désormais faire: (voir screen n°1 pour comprendre le probleme)
- en 1, je selectionne un pays
(je clic dessus dans le select mais l'input au dessus n'affiche plus son nom car j'ai retiré le script qui le faisait)
- en 2, ses regions apparaissent dans le select.
- en 3, je valide et la requete est effectuée.

voila le code hasardeux qui comporte les fonctions.
je n'osais pas le poster mais bon... le voila:
=====================
<script type="text/javascript" src="../ressources/js/check_form.js"></script>
<script type="text/javascript">

function ComboBoxCore(e, l)
{
var editField = e;
var list = l;
var closeList;
var completionActive = false;
var previousLength = 0;
var lastLength = 0;
var textList;

var closeComboBoxList = function()
{
list.style.visibility = "hidden";
list.style.display = "none";
list.disabled = true;
}

this.openComboBoxList = function()
{
if (closeList) window.clearTimeout(closeList);
list.style.visibility = "visible";
list.style.display = "block";
list.disabled = false;
return false;
}

this.initCloseComboBoxList = function()
{
closeList = window.setTimeout(closeComboBoxList,1200);
return false;
}

this.onfocusComboBoxList = function()
{
if (closeList) window.clearTimeout(closeList);
return false;
}

this.updateList2EditField = function()
{
if(list.selectedIndex>=0)
editField.value = list[list.selectedIndex].text;
editField.focus();
editField.select();
return false;
}

var completionComboBox = function(prefix, completion)
{
editField.value = prefix;
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
range.text = completion;
range.moveStart('character', -completion.length);
range.select();
}
else if(typeof editField.selectionStart != 'undefined')
{
var i = editField.value.length;
editField.value += completion;
editField.selectionStart = i;
}
}

var convert = function(w)
{
var word = w.toUpperCase();
word=word.replace(/[\u00C0\u00C1\u00C2\u00C3\u00C4\u00C5\u00C6]/gi,'A');
word=word.replace(/[\u00C7]/gi,'C');
word=word.replace(/[\u00C8\u00C9\u00CA\u00CB]/gi,'E');
word=word.replace(/[\u00CC\u00CD\u00CE\u00CF]/gi,'I');
word=word.replace(/[\u00D1]/gi,'N');
word=word.replace(/[\u00D2\u00D3\u00D4\u00D5\u00D6]/gi,'O');
word=word.replace(/[\u00D9\u00DA\u00DB\u00DC]/gi,'U');
return word;
}

this.searchEditFieldIn2List = function()
{
var i = 0;
var value = editField.value;
var listValue;
var prefix;

if (lastLength == value.length)
{
completionActive = false;
previousLength = 0;
return false;
}

if ((completionActive == true)&&(value.length == previousLength))
editField.value = value.substr(0, value.length-1);

if (editField.value == 0)
{
completionActive = false;
previousLength = 0;
lastLength = 0;
list.selectedIndex = -1;
return false;
}

value = convert(editField.value);
while (value > textList[i])++i;
list[i].selected = true;

listValue = list[i].text;
prefix = listValue.substr(0, value.length);
if (convert(prefix) == value)
{
completionActive = true;
previousLength = value.length;
completionComboBox(prefix, listValue.slice(value.length));
}
else
{
completionActive = false;
previousLength = 0;
}
lastLength = editField.value.length;
editField.focus();
return false;
}

this.init = function()
{
textList = new Array(list.options.length);

for (var i=0; i < list.options.length; ++i)
{
textList[i] = convert(list[i].text);
}
}
}

function ComboBox(e, l)
{
this.editField = e;
this.list = l;
var combo = new ComboBoxCore(this.editField, this.list);

combo.init();

this.list.comboBox = combo;
this.editField.comboBox = combo;


this.list.onclick = function(){return this.comboBox.updateList2EditField();};
this.list.onchange = function(){return this.comboBox.updateList2EditField();};
this.list.onblur = function(){return this.comboBox.initCloseComboBoxList();};
this.list.onfocus = function(){return this.comboBox.onfocusComboBoxList();};

this.editField.onfocus = function(){return this.comboBox.openComboBoxList();};
this.editField.onblur = function(){return this.comboBox.initCloseComboBoxList();};
this.editField.onkeyup = function(){return this.comboBox.searchEditFieldIn2List();};
}
</script>
=====================


je pense qu'on touche au but...


_________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 12:33
ça marche, impeccable ! ^^

je n'avais pas pensé a remplacer le javascript par de l'ASP.
j'ai encore un souci a régler mais je le posterai d'ici une heure car je vais en pause.

en tout cas merci

_________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 14:55
voila ou est le souci.

pour que le onchange du premier select fonctionne, j'ai supprimé le script qui appellait les fonctions de la combobox. ça concerne l'input et le select du haut (pour le choix du pays)

======
<script>
new ComboBox(document.getElementById('comboBoxEditField1'),document.getElementById('comboBoxList1'));
</script>
======

du coup, grace aux ajouts ASP, le formulaire est fonctionnel mais les fonctionnalités de la combobox ne sont plus appellées (apparition/disparition des select lorsque l'input gagne/perd le focus, saisie semi automatique des noms de pays et regions, ...)

j'ai posté plus haut le code du formulaire, idem pour la partie javascript avec les fonctions de la combobox.
comment faire pour pouvoir replacer le script sans creer de problèmes ?
est ce a cause de la partie à la fin du code javascript (fonctions combobox) ? celle avec les onchange, onfocus, onblur configurés ?

un problème disparait et un autre apparait, on dirait qu'il y a un probleme d'incompatibilité quelque part.
_________________________
descendez les 42 marches...
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 16:26
lol, c'est en mode random on dirait.
pendant 10 secondes j'ai cru que ça marchait pas mais en effectuant l'un de mes tests j'ai vu le select (des pays) disparaitre en perdant le focus, comme je le lui demandais.

je ne sais pas d'ou ça vient mais le code javascript contenant les fonctions de la combobox n'est jamais lu comme il le devrait j'ai l'impression.

----------------------------------
lorsque j'ouvre la page:
-> les listes doivent etre visibles, avec leur input au dessus, et leur contenu doit etre grisé (disabled).

Lorsqu'on clique sur un input:
-> la liste correspondante doit se dégriser afin de nous permettre de choisir l'une des options (l'option choisie est envoyée dans l'input correspondant)

Si l'utilisateur refuse de chercher:
-> il peut... il est sensé pouvoir entrer le debut du nom du pays ou de la region recherché et des choix lui sont proposés (dans l'input même), une sorte de saisie semi automatique.

lorsqu'un input perd le focus:
-> la liste qui lui correspond doit disparaitre

lorsque l'on clique sur valider:
-> un tableau s'affiche avec le resultat de la recherche dont nous avons entré les critères de tri.
------------------------------------

un formulaire parfait (ou presque ^^')...
car ces fonctionnalités s'activent un peu quand elles veulent.
tu penses être assez motivé pour m'aider a remettre ces hérétiques dans le droit chemin ?

si oui, voici le code de la partie javascript concernée:

	
function ComboBoxCore(e, l)
	{
        var editField = e;
        var list = l;
        var closeList;
        var completionActive = false;
        var previousLength = 0;
        var lastLength = 0;
        var textList;
		
        var closeComboBoxList = function()
		{
          list.style.visibility = "visible";
          list.style.display = "none";
          list.disabled = true;
        }
      
        this.openComboBoxList = function()
		{
          if (closeList) window.clearTimeout(closeList);
          list.style.visibility = "visible";
          list.style.display = "block";
          list.disabled = false;
          return false;
        }
      
        this.initCloseComboBoxList = function()
		{
          closeList = window.setTimeout(closeComboBoxList, 0);
          return false;
        }
      
        this.onfocusComboBoxList = function()
		{
          if (closeList) window.clearTimeout(closeList);
          return false;
        }
        
        this.updateList2EditField = function()
		{
          if(list.selectedIndex>=0)
            editField.value = list[list.selectedIndex].text;
          editField.focus();
          editField.select();
          return false;
        }
        
        var completionComboBox = function(prefix, completion)
		{
          editField.value = prefix;
          if(typeof document.selection != 'undefined')
			{
				var range = document.selection.createRange();
				range.text = completion;
				range.moveStart('character', -completion.length);
				range.select();
			}
			else if(typeof editField.selectionStart != 'undefined')
			{
			var i = editField.value.length;
            editField.value += completion;
            editField.selectionStart = i;
			}
        }
        
        var convert = function(w)
		{
           var word = w.toUpperCase();
           word=word.replace(/[\u00C0\u00C1\u00C2\u00C3\u00C4\u00C5\u00C6]/gi,'A');
           word=word.replace(/[\u00C7]/gi,'C');
           word=word.replace(/[\u00C8\u00C9\u00CA\u00CB]/gi,'E');
           word=word.replace(/[\u00CC\u00CD\u00CE\u00CF]/gi,'I');
           word=word.replace(/[\u00D1]/gi,'N');
           word=word.replace(/[\u00D2\u00D3\u00D4\u00D5\u00D6]/gi,'O');
           word=word.replace(/[\u00D9\u00DA\u00DB\u00DC]/gi,'U');
           return word;
        }
        
        this.searchEditFieldIn2List = function()
		{
          var i = 0;
          var value = editField.value;
          var listValue;
          var prefix;
          
          if (lastLength == value.length)
		  {
            completionActive = false;
            previousLength = 0;
            return false;
          }
          
          if ((completionActive == true)&&(value.length == previousLength))
            editField.value = value.substr(0, value.length-1);
          
          if (editField.value == 0)
		  { 
            completionActive = false;
            previousLength = 0;
            lastLength = 0;
            list.selectedIndex = -1;
            return false;
          }
          
          value = convert(editField.value);
          while (value > textList[i])++i;
          list[i].selected = true;
          
          listValue = list[i].text;
          prefix = listValue.substr(0, value.length);
          if (convert(prefix) == value)
		  {
            completionActive = true;
            previousLength = value.length;
            completionComboBox(prefix, listValue.slice(value.length));
          }
		  else
		  {
            completionActive = false;
            previousLength = 0;
          }
          lastLength = editField.value.length;
          editField.focus();
          return false;
        }
        
        this.init = function()
		{
          textList = new Array(list.options.length);
          
          for (var i=0; i < list.options.length; ++i)
		  {
            textList[i] = convert(list[i].text);
          }
        }
      }
      
      function ComboBox(e, l)
	  {
        this.editField = e;
        this.list = l;
        var combo = new ComboBoxCore(this.editField, this.list);
        
        combo.init();
        
        this.list.comboBox = combo;
        this.editField.comboBox = combo;
        
		<!-- pour les select -->
		this.list.onclick = function(){return this.comboBox.updateList2EditField();};
		<!--this.list.onchange = function(){return this.comboBox.updateList2EditField();};-->
		this.list.onkeyup = function(){return this.comboBox.updateList2EditField();};
		this.list.onblur = function(){return this.comboBox.initCloseComboBoxList();};
		this.list.onfocus = function(){return this.comboBox.onfocusComboBoxList();};
		
        <!-- pour les input -->
        this.editField.onfocus = function(){return this.comboBox.openComboBoxList();};
        this.editField.onblur = function(){return this.comboBox.initCloseComboBoxList();};
        this.editField.onkeyup = function(){return this.comboBox.searchEditFieldIn2List();};
       }


input (pays):
<input type="text" name="pays" class="displayEditField1" id="comboBoxEditField1" value="
<%
If Not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<> "" Then
response.write(Request.QueryString("pays")) 
else 
response.write("Pays") 
end if
%>
"/>


select (pays): et son script d'appel de fonction
<select name="Pays" class="hideComboBoxList1" size="6" id="comboBoxList1" onchange="document.location='./index.asp?page=vins_consultation.asp&pays=' + document.getElementById('comboBoxList1').value;">
								<option>France</option>
								<option>Italie</option>
								<option>Argentine</option>
							</select>
<script>
new ComboBox(document.getElementById('comboBoxEditField1'),document.getElementById('comboBoxList1'));
</script>


input (region):
<input name="region" type="text" class="displayEditField2" id="comboBoxEditField2"/>


select (region): et son script d'appel de fonction
<%
	If Not isnull(Request.QueryString("pays")) or Request.QueryString("pays")<> "" Then
	dim pays
	pays = Request.QueryString("pays")
	sql = "EXEC region_consultation @pays = '"&pays&"';"
	RS.Open sql, conn
	Response.Write("<select name='region' class='hideComboBoxList2' size='6' id='comboBoxList2'>")
	do while not rs.eof
	Response.Write("<option>")
	response.write(RS("region"))
	Response.Write("</option>")
	RS.movenext
	loop
	Response.Write("</select>")
	End If
%>
<script>
	new ComboBox(document.getElementById('comboBoxEditField2'),document.getElementById('comboBoxList2'));
</script>


edit: je viens de voir la taille du message... j'espère que ça va pas te faire peur ^^'
0
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
30 juil. 2009 à 17:14
je vais essayer de régler ces soucis de javascript au cas par cas.

les problèmes de sélection de pays et régions ont été corrigés je vais donc clôturer ce post et en ouvrir un autre pour mes problèmes de javascript (après tout ce sujet se nomme "probleme avec asp" ^^)

donc merci beaucoup pour ton aide. j'ouvrirai un autre post intitulé "Problèmes de Javascript" d'ici peu.

à bientôt peut être,
et si on a pas l'occasion de se recroiser eh bien bonne continuation à toi ^^
0