interaction JavaScript PHP
Le
unbewusst.sein
dans une page, j'ai une form créée par PHP.
le contenu de cette form dépend d'une variable :
$qry['folder_mode']
si cette variable est égale à 'all' pas d'input[text]
sinon, le php ajoute cet input[text].
bon "ça marche" mais du point de vue utilisateur c'est pas bon car il
faut recharger la page pour changer, au niveau UI, de "folder_mode".
j'ai donc ajouté dans le select un appel à un script JS :
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);'>
ce qui change, du point de vue UI est après "this" (un <select />)
quand le folder_mode est à all, le php ne crée que :
</select> <input type="submit" value="Validez"
name="submit" />
sinon il crée :
</select> le texte : <input type="text"
id="folder_text" name="folder_text" value="<?php echo
$qry['folder_text']?>"
/> Sensible à la casse : <input
type="checkbox" id="folder_case" name="folder_case" <?php echo
$folder_case_checked ?> /> <input type="submit"
value="Validez" name="submit" />
dans JS je récupère cette valeur par this.value
en JS, je peux tester facilement l'état de l'UI à partir de l'existence
ou non de l'input[text] qui a pour ID "folder_text".
si document.getElementById("folder_text"); me retourne null et que je
suis dans un cas NON 'all' j'ajoute ce qu'il faut.
si document.getElementById("folder_text"); me retourne un élément et que
je suis dans le cas 'all' je vous enlever l'input[text] et
l'input[checkbox] qui suit.
la partie à modifier, du point de vue DOM se trouve entre :
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);' /> // le "this" du js
et :
<input type="submit" value="Validez" name="submit" />
auquel je pourrais très bien ajouter un ID, histoire de faciliter les
choses en JS.
quel est le moyen le plus élégant pour modifier cette partie, avec DOM ?
--
Une Bévue
le contenu de cette form dépend d'une variable :
$qry['folder_mode']
si cette variable est égale à 'all' pas d'input[text]
sinon, le php ajoute cet input[text].
bon "ça marche" mais du point de vue utilisateur c'est pas bon car il
faut recharger la page pour changer, au niveau UI, de "folder_mode".
j'ai donc ajouté dans le select un appel à un script JS :
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);'>
ce qui change, du point de vue UI est après "this" (un <select />)
quand le folder_mode est à all, le php ne crée que :
</select> <input type="submit" value="Validez"
name="submit" />
sinon il crée :
</select> le texte : <input type="text"
id="folder_text" name="folder_text" value="<?php echo
$qry['folder_text']?>"
/> Sensible à la casse : <input
type="checkbox" id="folder_case" name="folder_case" <?php echo
$folder_case_checked ?> /> <input type="submit"
value="Validez" name="submit" />
dans JS je récupère cette valeur par this.value
en JS, je peux tester facilement l'état de l'UI à partir de l'existence
ou non de l'input[text] qui a pour ID "folder_text".
si document.getElementById("folder_text"); me retourne null et que je
suis dans un cas NON 'all' j'ajoute ce qu'il faut.
si document.getElementById("folder_text"); me retourne un élément et que
je suis dans le cas 'all' je vous enlever l'input[text] et
l'input[checkbox] qui suit.
la partie à modifier, du point de vue DOM se trouve entre :
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);' /> // le "this" du js
et :
<input type="submit" value="Validez" name="submit" />
auquel je pourrais très bien ajouter un ID, histoire de faciliter les
choses en JS.
quel est le moyen le plus élégant pour modifier cette partie, avec DOM ?
--
Une Bévue
function folder_mode_changed(quoi) {
quoi = quoi.form; var n = quoi.length-1;
if(quoi[n-1].tagName=='INPUT') {
quoi.removeChild(quoi[n-2]);
quoi.removeChild(quoi[n-2]);
}
else alert('c'est vide !');
}
ha ... ben c'est du charabia DOM / form
mais j'ai idée que ça doit fonctionner s'il n'y a rien d'autre après le
submit.
avec l'arbre des forms on se débrouille bien sans
Houlala ! "élégant" ?
--
sm
bon, perdu par ces histoires de php j'ai oublié le bavardage autour des
inputs :-(
alorsse :
function folder_mode_changed(quoi) {
var f = quoi.form;
if(f[f.length-2].tagName=='INPUT') {
quoi = quoi.nextSibling;
var E = [];
while(quoi.type != 'submit') {
E[E.length] = quoi;
quoi = quoi.nextSibling;
}
for(var i in E) f.removeChild(E[i]);
}
else alert('c'est vide !');
}
Sinon yaça qui m'amuse bp :
function folder_mode_changed(quoi) {
var f = quoi.form;
if(f[f.length-2].tagName=='INPUT') {
quoi = quoi.nextSibling;
E = [];
while(quoi.type != 'submit') {
E[E.length] = quoi;
quoi = quoi.nextSibling;
}
for(var i in E) E[i] = f.removeChild(E[i]);
}
else {
alert('c'est vide !nje remplis');
for(var i in E) f.insertBefore(E[i], f[f.length-1]);
}
}
--
sm
au quai ;-)
merci beaucoup !!!
tu es sûr de ton "quoi.form" ? parce que le quoi est DANS la form...
on pourrait donc référencer la form de l'intérieur de la form ???
comme je n'ai pas eu le temps de mettre au point le css idoine, je "mets
en forme" par je sais c'est moche.
ma solution est nettement plus lourde que la tienne :
function folder_mode_changed(o){
var input=document.getElementById("folder_text");
var submit=document.getElementById("submit");
var parent=o.parentNode;
var children=parent.childNodes;
if(o.value=='all'){
if(input){
remove_children(parent,children);
add_text(parent,submit);
}
}else{
if(!input){
remove_children(parent,children);
add_input(parent,submit);
}
}
}
function remove_children(parent,children){
var to_removeúlse;
var ns=parent.firstChild;
for(var i=children.length-1;i>-1;i--){
if(children[i].id=='folder_mode'){
to_removeúlse;
break;
}
if(to_remove){parent.removeChild(children[i]);}
if(children[i].id=='submit'){
to_remove=true;
}
}
}
function add_text(parent,submit){
var txt=document.createTextNode(" ");
parent.insertBefore(txt,submit);
}
function add_input(parent,submit){
var txt=document.createTextNode(" le texte : ");
parent.insertBefore(txt,submit);
var input=document.createElement('input');
input.type='text';
input.id='folder_text';
input.name='folder_text';
input.value='Entrez un texte';
parent.insertBefore(input,submit);
txt=document.createTextNode(" Sensible à la casse : ");
parent.insertBefore(txt,submit);
var checkbox=document.createElement('input');
checkbox.type='checkbox';
checkbox.id='folder_case';
checkbox.name='folder_case';
checkbox.checked='on';
parent.insertBefore(checkbox,submit);
txt=document.createTextNode(" ");
parent.insertBefore(txt,submit);
}
mais ça roule quand même, yake php qui râle :
deux messages d'erreur :
Warning: create_bookmark_node() [function.create-bookmark-node.html]:
unterminated entity reference parent9 in
/Users/yt/Sites/PHP/search_bookmarks.php on line 366
Warning: create_bookmark_node() [function.create-bookmark-node.html]:
unterminated entity reference
task=blogsection&id=5&Itemid7
in /Users/yt/Sites/PHP/search_bookmarks.php on line 366
donc ce sont des bookmarks dont l'url est de la forme :
http://domain/file.php?machin=truc&bidule=chose
j'imagine qu'il fait changer le "&" en "&" ???
ps dans le texte ci-dessus les espaces sont des espaces insécables
(l'équivalent de en UTF-8...
--
Une Bévue
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-6043025
Toutafé. htmlentities est ton ami dans ces cas là.
--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
absolument shioure dè shioure, de ttes façons j'ai testé.
ben fallait quand même y arriver à l'époque où le DOM n'était pas né ou
encore au berceau ou même adolescent sinon revenu de la Fac :-)
et chiant à traiter via DOM :-(
Boudiou !
je vais même pas la lire !
tu vas encore me paumer dans tes méandres :-)
Ha oui, je ne me suis pas occupé de ce 'all'
Bon, supprimer les truc-bazars c'est facile, les créer l'est moins.
En cas de 'all' j'ussions demandé au php de m'écrire le shmillblick dans
un span qque part en-dehors du form, et j'aurais bougé ce span de place
à la demande.
P't'et' ben qu'oui, p't'et' ben qu'non.
--
sm
oui, c'est vrai, "on trouve tout" au niveau d'un élément, comme à la
samaritaine ;-)
j'ai été plus réservé :
$href->nodeValue=htmlspecialchars($url,ENT_NOQUOTES,'UTF-8');
--
Une Bévue
j'ai supprimé les en utilisant <ul><li /></ul> + css
là, j'ai un alignement comme je le souhaite MAIS, j'ai l'impression
(enfin j'en suis quasiment sûr) que lorsqu'on manipule le dom les
éléments réinserrés ne sont pas réinterprétés côté css (sur FF3 et Saf).
je m'explique :
- au départ j'ai :
<fieldset>
<ul class="bookmark_form">
<li>
<label for="folder_mode">Dans un dossier</label>
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);'>
<option value='all' selected>Quelconque</option>
<option value='content'>dont le nom contient</option>
<option value='start_with'>dont le nom commence
par</option>
<option value='end_with'>dont le nom termine
par</option>
<option value='is'>dont le nom est</option>
</select>
</li>
<li>
<label for="folder_text">le texte :</label>
<input type="text" id="folder_text" name="folder_text"
value="Entrez un texte"/>
</li>
<li>
<label for="folder_case">sensible à la casse :</label>
<input type="checkbox" id="folder_case" name="folder_case"
/>
</li>
</ul>
</fieldset>
- comme ma variable est sur "all", le js enlève les deux derniers li :
<fieldset>
<ul class="bookmark_form">
<li>
<label for="folder_mode">Dans un dossier</label>
<select id='folder_mode' name='folder_mode'
onchange='folder_mode_changed(this);'>
<option value='all' selected>Quelconque</option>
<option value='content'>dont le nom contient</option>
<option value='start_with'>dont le nom commence
par</option>
<option value='end_with'>dont le nom termine
par</option>
<option value='is'>dont le nom est</option>
</select>
</li>
</ul>
</fieldset>
- l'utilisateur bascule sur qqc de différent de 'all'
du point de vue html/dom, je revines à la case départ MAIS il y a un
décalage introduit entre mes fieldsets, la form, globalement ressemble à
ça :
<form>
<fieldset /> <!-- pour les bookmarks -->
<fieldset /> <!-- pour les folders -->
<fieldset /> <!-- pour le submit -->
</form>
le fieldset qui varie est le second, celui pour les folders.
donc, au départ, sans manip dom, l'alignement entre les deux premiers
fieldsets est impec, par contre, après manip dom, ils ne sont plus
alignés...
bon, mais peut-être que ce n'est qu'une histoire de noeud texte qui
n'existe pas avec dom, je veux dire que dom ne reproduit pas, par
exemple :
MAIS :
donc une espace disparaît dans la manip, d'où le décalage... casse
bonbon...
--
Une Bévue
après vérif ce n'est pas le pb...
mais comme je trouve ta solution élégante, je vai changer de fusil
d'épaule.
ta solution a le mérite, aussi, de préserver l'indentation...
--
Une Bévue
bon, j'ai changé le design avec des fieldsets et des labels, c'est +
propre )))
voila ce que j'obtiens :
au départ avec 'all' (ie. dossier Quelconque) :
Document joint: search_bookmarks.php1.png
http://cjoint.com/data/hcnZlrlLSU.htm
avec recherche sur le nom d'un dossier :
Document joint: search_bookmarks.php2.png
http://cjoint.com/data/hcn1ufOFD5.htm
le résultat de la recherche :
Document joint: search_bookmarks.php3.png
http://cjoint.com/data/hcn2IBxnl7.htm
ce que je préférerais obtenir avec 'all' :
Document joint: search_bookmarks.pref1.png
http://cjoint.com/data/hcoFPIlZ63.htm
car je préférerais garder l'alignement entre la première et la seconde
ligne (au niveau UI) de la form, càd entre le premier et le second
fieldset.
déjà, sur la seconde ligne, je suis obligé de tricher pour avoir mon
submit à l'endroit souhaité, le css pour ça :
fieldset#submit {
position: relative;
left: 750px;
top: -20px;
margin: 0;
margin-left: 5px;
padding: 0;
border:none;
width: 75px;
min-width: 75px;
text-align: left;
}
c'est du tripatouillage (ie. "position: relative")
et, comme l'alignement des deux lignes est obtenu par le "text-align:
right;" de mes fieldsets (ils sont identiques à droite) :
fieldset {
margin: 0;
padding: 0;
border:none;
width: 750px;
min-width: 750px;
text-align: right;
}
bien évidemment cet alignement est perdu dans le cas 'all'.
je cherche donc des tuyaux pour parvenir à ma fin... càd obtenir qqc
comme :
http://cjoint.com/data/hcoFPIlZ63.htm dans le cas 'all'
et :
http://cjoint.com/data/hcn1ufOFD5.htm dans les autres cas.
bien sûr si possible sans tripatouillage css pour le submit...
le script php n'est pas online , par contre j'ai un document html
( simule +/- bien le php du point de vue UI seulement.
--
Une Bévue