Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript interaction JavaScript PHP

interaction JavaScript PHP

9 réponses
Avatar
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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Validez"
name="submit" />

sinon il crée :
</select>&nbsp;&nbsp;&nbsp;&nbsp;le texte : <input type="text"
id="folder_text" name="folder_text" value="<?php echo
$qry['folder_text']?>"
/>&nbsp;&nbsp;&nbsp;&nbsp;Sensible à la casse : <input
type="checkbox" id="folder_case" name="folder_case" <?php echo
$folder_case_checked ?> />&nbsp;&nbsp;&nbsp;&nbsp;<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
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
Une Bévue a écrit :

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



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.


et :

<input type="submit" value="Validez" name="submit" />

auquel je pourrais très bien ajouter un ID, histoire de faciliter les
choses en JS.



avec l'arbre des forms on se débrouille bien sans

quel est le moyen le plus élégant pour modifier cette partie, avec DOM ?



Houlala ! "élégant" ?

--
sm
Avatar
SAM
SAM a écrit :

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.



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
Avatar
unbewusst.sein
SAM wrote:

SAM a écrit :
>
> 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.

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]);
}
}



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 &nbsp; 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 "&amp;" ???

ps dans le texte ci-dessus les espaces sont des espaces insécables
(l'équivalent de &nbsp; en UTF-8...
--
Une Bévue
Avatar
Mickaël Wolff
Une Bévue a écrit :

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 ???



http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-6043025


j'imagine qu'il fait changer le "&" en "&amp;" ???



Toutafé. htmlentities est ton ami dans ces cas là.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Avatar
SAM
Une Bévue a écrit :
SAM wrote:

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]);
}
}



au quai ;-)

merci beaucoup !!!

tu es sûr de ton "quoi.form" ? parce que le quoi est DANS la form...



absolument shioure dè shioure, de ttes façons j'ai testé.

on pourrait donc référencer la form de l'intérieur de la form ???



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 :-)

comme je n'ai pas eu le temps de mettre au point le css idoine, je "mets
en forme" par &nbsp; je sais c'est moche.



et chiant à traiter via DOM :-(

ma solution est nettement plus lourde que la tienne :



Boudiou !
je vais même pas la lire !
tu vas encore me paumer dans tes méandres :-)



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'){



Ha oui, je ne me suis pas occupé de ce '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 :



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.
<http://cjoint.com/data/gEt64UKfk7_all2no.htm>

deux messages d'erreur :
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 "&amp;" ???



P't'et' ben qu'oui, p't'et' ben qu'non.


--
sm
Avatar
unbewusst.sein
Mickaël Wolff wrote:

> 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 ???

http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-6043025




oui, c'est vrai, "on trouve tout" au niveau d'un élément, comme à la
samaritaine ;-)

> j'imagine qu'il fait changer le "&" en "&amp;" ???

Toutafé. htmlentities est ton ami dans ces cas là.



j'ai été plus réservé :

$href->nodeValue=htmlspecialchars($url,ENT_NOQUOTES,'UTF-8');


--
Une Bévue
Avatar
unbewusst.sein
SAM wrote:


> comme je n'ai pas eu le temps de mettre au point le css idoine, je "mets
> en forme" par &nbsp; je sais c'est moche.

et chiant à traiter via DOM :-(



j'ai supprimé les &nbsp; 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 :
<li>Texte 1...</li>
<li>Texte 2...</li>

MAIS :
<li>Texte 1...</li><li>Texte 2...</li>

donc une espace disparaît dans la manip, d'où le décalage... casse
bonbon...
--
Une Bévue
Avatar
unbewusst.sein
Une Bévue wrote:


donc une espace disparaît dans la manip, d'où le décalage... casse
bonbon...



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
Avatar
unbewusst.sein
SAM wrote:


et chiant à traiter via DOM :-(



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
(<http://thoraval.yvon.free.fr/PHP/search_bookmarks_form_test.html>) qui
simule +/- bien le php du point de vue UI seulement.
--
Une Bévue