11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Problème pour changer un input en listbox avec Prototype

Bonjour,

Je tente de gérer 2 cas de figure dans un formulaire d'inscription :
1) le visiteur est résident US (par défaut) et il entre son Zipcode dans un inputbox
2) le visiteur ne réside pas aux US et je dois lui proposer la liste des pays

Ca revient donc à changer l'inputbox en listbox. Pourquoi? parce que cet inputbox est généré par un autre script (php) auquel je ne peux pas toucher car il est utilisé pour d'autres fonctions... Smiley decu . Mais je dois rendre ce champ modifiable par son "propriétaire" !
Autre soucis, ce champ ne possède pas d'ID mais un seulement "name" et une classe commune à d'autres champs :

<tr>
	<td class="titleCell">State:</td>
	<td colspan="1" class="fieldCell"><input class="inputbox"  mosLabel="State"   type="text" name="v_state" value="" /></td>
	<td colspan='2'></td>
</tr>
<tr>
	<td class="titleCell">Country:</td>
	<td colspan="1" class="fieldCell"><input class="inputbox"  mosLabel="Country"   type="text" name="v_country" value="FRA" /></td>
	<td colspan='2'></td>
</tr>

Heureusement, j'ai prototype.js à ma disposition (version 1.5.0_rc0) qui ne m'est malheureusement pas familier.
voici donc la fonction getCountries appelée au chargement:

function getCountries(){
         thisform= document.adminForm;
         var colFields = thisform.elements;
         fldState = colFields["vital_state"]; //adminForm
         fldCountry = colFields["vital_country"]; //adminForm
         obj  = $F(fldCountry);
         objCountry = $F(fldCountry);
         if (fldState.value == "")
         {
               
               alert ("no state, country = " + objCountry );
          	ajax =  new Ajax.Updater(
          					objCountry,
          					'get_countries.php',
          					{method:'get'}
          		); // does not work, update objCountry parent
              
         } else {
            alert ("state = "+ fldState.value);
            fldCountry.value = 'USA';
         }
}


Extrait de getCountries.php (qui fonctionne bien):
...
$html .= "<div id='selectCountry'>";
$html .= "<label>Country </label>";
$html .= "<select name='country' id='country'>";
while($array = mysql_fetch_array($result)) {
	$html .= "<option value=" . $array['code'] . ">" . $array['name'] . "</option>";	
}
$html .= "</select>";
$html .= "</div>";
echo $html;

Vu le code retourné par cette fonction, ça ne colle pas avec mon objCountry, il faut que j'applique ce flux html à son objet parent.

Et c'est là mon problème : comment je déclare le parent de objCountry?
Modifié par globule (18 Jan 2007 - 18:31)
A force de fouiner, j'ai trouvé ça :
function hasClassName(element,className) {
    if (element.className.indexOf(className) > -1) {
        return true;
    }
    return false;
}
Element.prototype.getFirstAncestorByClassName = function (className) {
    var parent = this;
    while (parent = parent.parentNode) {
        if (hasClassName(parent,className)) {
            return parent;
        }
    }
    return null;
};

et ça me le donne comme ça:
var objParent = fldCountry.getFirstAncestorByClassName('fieldCell');

Voilà, je le passe en premier paramètre à mon Ajax.updater et hop, j'ai ma belle listbox!
Si ça peut aider du monde, ça fera plaisir... Smiley biggrin
J'ai eefectivement vu ce problème sur un blog. Voici donc la fonction corrigée :
function hasClassName(element,className) {
    if (new RegExp("(^| )" + className + "( |$)").test(element.className)) {
        return true;
    }
    return false;
}

Par contre là je galère pour trouver le premier TD d'une TR à partir de n'importe que TD de la TR Smiley eek ... oui, moi aussi je préfèrerais des DIV mais bon, c'est comme ça!
J'ai réussi à récupérer l'objet ayant pour tagName "TR" mais je cherche la première TD pour en changer le texte...
Smiley decu
Si c'était que du DOM encore ça irait, mais il faut aussi supporter IE6 (pas 5 heureusement)
Modifié par globule (18 Jan 2007 - 15:09)
globule a écrit :
function hasClassName(element,className) {
    if (new RegExp("(^| )" + className + "( |$)").test(element.className)) {
        return true;
    }
    return false;
}
Question bête : pourquoi n'utilises-tu pas la version plus concise donnée dans le sujet dont j'ai donné le lien ?
function belongsToClass(node, className) {
	return new RegExp("(^| )" + className + "( |$)").test(node.className);
}
globule a écrit :
Si c'était que du DOM encore ça irait, mais il faut aussi supporter IE6 (pas 5 heureusement)
D'après ce que tu décris, je ne vois pas pourquoi ça poserait problème avec IE 6 (et 5 non plus d'ailleurs). Il s'agit de navigation plutôt classique dans l'arbre DOM (parentNode, childNodes, ...).
Modifié par Julien Royer (18 Jan 2007 - 15:19)
Merci pour les infos.

Pour la navigation dans le DOM, c'est la première fois que je le fais. Je ne connais que PHP (entre autres) mais JS vraiment pas bien. Mais ça vient.

ex:
         objParentRow = objCountry.parentNode.parentNode;
         firstCell = objParentRow.firstChild;

la ligne 1 fonctionne, mais je bloc sur la 2 dont je ne sais que faire...
Julien Royer a écrit :
Il s'agit de navigation plutôt classique dans l'arbre DOM (parentNode, childNodes, ...).

Ah bon, pourtant il semble qu'il faille faire comme ceci:
function getFirstRowCell(objRow){
         thisnode = objRow.firstChild;
         while (thisnode.nodeType == 3){
               thisnode = thisnode.nextSibling;
         }
         return thisnode;
}
car il parait que FF et IE ne parcourent pas les éléments HTML de la même façon Smiley murf
Enfin j'y suis arrivé et c'est l'essentiel Smiley biggrin

Merci pour ta regexp qui garanti la recherche Smiley cligne

Je retourne à mon projet Smiley sweatdrop mais je pense que je reviendrai bientôt vous embêter sur ce forum qui est vraiment le meilleur en France (et en plus il est bô!)
C'est fait, oh grand modo!
Je commence à m'éclater avec JS, c'est vraiment trop fort maintenant qu'on utilise vraiment toutes les possibiltés. En plus, ça soulage les serveurs Smiley biggrin !!!
Sujet clos
Aller à