[Javascript] Liste déroulante liées - Bug

Fermé
bokutu - 12 nov. 2011 à 14:08
Bonjour à tous !


Débutant en js je cherche à mettre en place une liste déroulante liée et à l'intégrer dans un module existant que je souhaite customizer.

Mon problème : je cherche depuis presque 1 mois la solution, j'ai suivi de nombreux tutos mais rien n'y fait ! Cela ne fonctionne pas !

Je dois composer avec Php, js, le code existant et celui que je souhaite inclure.. Pour être honnête je confonds tout !


Pour illustration veuillez trouver ci-dessous mon fichier defaut.php qui fonctionne à la perfection. J'y inclus des commentaires sur ce que je cherche à réaliser :

<?php
/**

*/
defined('_JEXEC') or die('Restricted access');
?>
<script type="text/javascript">




function getBirthday(years)
{
if(years=="")
{
return false;
}

var now = new Date();
var birthday = new Date(now.getTime()-years*365*24*60*60*1000);
var date = birthday.getDate()+"/"+birthday.getMonth()+"/"+birthday.getFullYear();

return date;
}

function submitSearchForm()
{
var gender = joms.jQuery("#datingsearch_gender").val();
var agefrom = joms.jQuery("#datingsearch_agefrom").val();
var ageto = joms.jQuery("#datingsearch_ageto").val();
var city = joms.jQuery("#datingsearch_city").val();
var state = joms.jQuery("#datingsearch_state").val();
var country = joms.jQuery("#datingsearch_country").val();
var glisse = joms.jQuery("#datingsearch_glisse").val();
var nautique = joms.jQuery("#datingsearch_nautique").val();
var cible = joms.jQuery("#datingsearch_cible").val();
var aerien = joms.jQuery("#datingsearch_aerien").val();
var nature = joms.jQuery("#datingsearch_nature").val();
var musculation = joms.jQuery("#datingsearch_musculation").val();
var glace = joms.jQuery("#datingsearch_glace").val();
var combat = joms.jQuery("#datingsearch_combat").val();
var martial = joms.jQuery("#datingsearch_martial").val();
var cyclisme = joms.jQuery("#datingsearch_cyclisme").val();
var animaux = joms.jQuery("#datingsearch_animaux").val();
var raquette = joms.jQuery("#datingsearch_raquette").val();
var mecanique = joms.jQuery("#datingsearch_mecanique").val();
var combine = joms.jQuery("#datingsearch_combine").val();
var gymnastique = joms.jQuery("#datingsearch_gymnastique").val();
var collectif = joms.jQuery("#datingsearch_collectif").val();
var athletisme = joms.jQuery("#datingsearch_athletisme").val();
var birthdaystop = getBirthday(agefrom);
var birthdaystart = getBirthday(ageto);
var keylist = "";


joms.jQuery("#datingsearch_search").attr("disabled", true);

if(gender)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field0" value="<?php echo $field->code->gender; ?>"><input type="hidden" name="condition0" value="equal"><input type="hidden" name="value0" value="'+joms.jQuery("#datingsearch_gender").val()+'"><input type="hidden" name="fieldType0" value="<?php echo $field->type->gender;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "0";
}

if(birthdaystop || birthdaystart)
{
var extraAppend = "";

if(birthdaystop && birthdaystart)
{
extraAppend = '<input type="hidden" name="condition1" value="between"><input type="hidden" name="value1" value="'+birthdaystart+'"><input type="hidden" name="value1_2" value="'+birthdaystop+'">';
}
else if(birthdaystop && !birthdaystart)
{
extraAppend = '<input type="hidden" name="condition1" value="lessthanorequal"><input type="hidden" name="value1" value="'+birthdaystop+'">';
}
else if(!birthdaystop && birthdaystart)
{
extraAppend = '<input type="hidden" name="condition1" value="greaterthanorequal"><input type="hidden" name="value1" value="'+birthdaystart+'">';
}

joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field1" value="<?php echo $field->code->birthday; ?>">'+extraAppend+'<input type="hidden" name="fieldType1" value="<?php echo $field->type->birthday;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "1";
}

if(city)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field2" value="<?php echo $field->code->city; ?>"><input type="hidden" name="condition2" value="equal"><input type="hidden" name="value2" value="'+city+'"><input type="hidden" name="fieldType2" value="<?php echo $field->type->city;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "2";
}

if(state)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field3" value="<?php echo $field->code->state; ?>"><input type="hidden" name="condition3" value="equal"><input type="hidden" name="value3" value="'+state+'"><input type="hidden" name="fieldType3" value="<?php echo $field->type->state;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "3";
}

if(country)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field4" value="<?php echo $field->code->country; ?>"><input type="hidden" name="condition4" value="equal"><input type="hidden" name="value4" value="'+country+'"><input type="hidden" name="fieldType4" value="<?php echo $field->type->country;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "4";
}

if(glisse)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->glisse; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+glisse+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->glisse;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}

if(nautique)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->nautique; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+nautique+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->nautique;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}

if(cible)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->cible; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+cible+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->cible;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(aerien)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->aerien; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+aerien+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->aerien;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(nature)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->nature; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+nature+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->nature;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(musculation)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->musculation; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+musculation+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->musculation;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(glace)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->glace; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+glace+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->glace;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(combat)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->combat; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+combat+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->combat;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(martial)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->martial; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+martial+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->martial;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(cyclisme)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->cyclisme; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+cyclisme+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->cyclisme;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(animaux)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->animaux; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+animaux+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->animaux;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(raquette)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->raquette; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+raquette+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->raquette;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(mecanique)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->mecanique; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+mecanique+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->mecanique;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(combine)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->combine; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+combine+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->combine;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(gymnastique)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->gymnastique; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+gymnastique+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->gymnastique;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(collectif)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->collectif; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+collectif+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->collectif;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}
if(athletisme)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" name="field5" value="<?php echo $field->code->athletisme; ?>"><input type="hidden" name="condition5" value="equal"><input type="hidden" name="value5" value="'+athletisme+'"><input type="hidden" name="fieldType5" value="<?php echo $field->type->athletisme;?>">');

if(keylist!="")
{
keylist += ","
}
keylist += "5";
}

if(keylist)
{
joms.jQuery("#datingsearch_hidden").append('<input type="hidden" id="key-list" name="key-list" value="'+keylist+'" />');
joms.jQuery("#datingsearch").submit();
}
else
{
joms.jQuery("#datingsearch_search").attr("disabled", false);
}
}
</script>
<style type="text/css">
#datingsearch{text-align:center;margin:0 auto;font-weight:bold;color:#555;font-size:11px;}
#datingsearch .jlab {width:90%;}
#datingsearch .jinfield {width:90%;}
#datingsearch .jinfield2 {width:35%;}
#datingsearch .jinfield3 {width:95%;}

#datingsearch .jinfield2 {padding:2px;text-align:center;
background: #f4f4f4;

background: -moz-linear-gradient(top, #eeeeee, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#eeeeee', EndColorStr='#ffffff', GradientType=0);

border: 1px solid #ddd;
border-bottom: 2px solid #ccc;
border-top: 1px solid #e2e2e2;

border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
font-size:12px;
font-weight:bold;}

#datingsearch .jinfield {padding:3px;text-align:left;
background: #f4f4f4;

background: -moz-linear-gradient(top, #eeeeee, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#eeeeee', EndColorStr='#ffffff', GradientType=0);

border: 1px solid #ddd;
border-bottom: 2px solid #ccc;
border-top: 1px solid #e2e2e2;

border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-size:12px;
font-weight:bold;}

#datingsearch select{cursor: pointer;
background: #777;
border: none;
padding: 4px 10px;
color: #000;
font-size: 9pt;
margin: 0;
background: #f4f4f4;
background: -moz-linear-gradient(top, #eeeeee, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#eeeeee', EndColorStr='#ffffff', GradientType=0);
border: 1px solid #ddd;
border-bottom: 2px solid #ccc;
border-top: 1px solid #e2e2e2;

border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;}

#datingsearch select:active{
background: -moz-linear-gradient(top, #ffffff, #eeeeee);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff', EndColorStr='#eeeeee', GradientType=0);}

#datingsearch input:active {
background: -moz-linear-gradient(top, #ffffff, #eeeeee);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff', EndColorStr='#eeeeee', GradientType=0);
}

#jdsearch .button {padding: 5px 10px;
border: 1px solid #D1D2D3;
background: #21a8da;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow:
0 0 3px rgba(0,0,0,0.2) outset,
0 1px 0 #fff;
-webkit-box-shadow:
0 0 3px rgba(0,0,0,0.2) outset,
0 1px 0 #fff;
box-shadow:
0 0 3px rgba(0,0,0,0.2) outset,
0 1px 0 #fff;
color: #fff;font-size:14px;font-weight:700;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}


#jdsearch .button:hover {padding: 5px 10px;
border: 1px solid #D1D2D3;
background: #F4F5F6;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow:
0 0 3px rgba(0,0,0,0.2) inset,
0 1px 0 #fff;
-webkit-box-shadow:
0 0 3px rgba(0,0,0,0.2) inset,
0 1px 0 #fff;
box-shadow:
0 0 3px rgba(0,0,0,0.2) inset,
0 1px 0 #fff;
color: #555;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
</style>
<div class="<?php echo $params->get('moduleclass_sfx'); ?>">
<form name="datingsearch" id="datingsearch" method="GET" action="<?php echo CRoute::_('index.php?option=com_community&view=search&task=advancesearch&Itemid=' . $itemid); ?>">
<div>
<div class="jlab"><?php echo JText::_('MOD_DATINGSEARCH LOOKING FOR'); ?></div>
<div>
<select id="datingsearch_gender" name="datingsearch_gender" class="jinfield3">
<option value="" <?php if($gender=='')echo 'selected'?>><?php echo JText::_('MOD_DATINGSEARCH GENDER'); ?></option>
<?php
foreach($field->value->gender as $data)
{
?>
<option value="<?php echo $data; ?>" <?php if($gender==$data)echo 'selected'?>><?php echo $data; ?></option>
<?php
}
?>
</select>
</div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>

<div>
<div class="jlab"><?php echo JText::_('MOD_DATINGSEARCH AGE BETWEEN'); ?></div>
<div>
<input type="text" class="jinfield2" maxlength=3 id="datingsearch_agefrom" name="datingsearch_agefrom" value="<?php echo $agefrom; ?>"/> <?php echo JText::_('MOD_DATINGSEARCH TO');?>
<input type="text" class="jinfield2" maxlength=3 id="datingsearch_ageto" name="datingsearch_ageto" value="<?php echo $ageto;?>"/>
</div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>

<div id="jloc">
<div>
<div class="jlab"><?php echo JText::_('MOD_DATINGSEARCH CITY'); ?></div>
<div><input type="text" class="jinfield" id="datingsearch_city" name="datingsearch_city" value="<?php echo $city;?>"/></div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>
<div>
<div class="jlab"><?php echo JText::_('MOD_DATINGSEARCH STATE'); ?></div>
<div><input type="text" class="jinfield" id="datingsearch_state" name="datingsearch_state" value="<?php echo $state;?>"/></div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>
<div>
<div>
<select id="datingsearch_country" name="datingsearch_country" class="jinfield3">
<option value="" <?php if($country=='')echo 'selected'?>><?php echo JText::_('MOD_DATINGSEARCH COUNTRY'); ?></option>

<?php
foreach($field->value->country as $data)
{
?>
<option value="<?php echo $data; ?>" <?php if($country==$data)echo 'selected'?>><?php echo $data; ?></option>


<?php

}
?>


</select>
</div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>



/////// Je cherche à construire une liste déroulante ici de valeurs fixes. exemple :

<SELECT>
<OPTION>-- Choisissez une rubrique ---</OPTION>
<OPTION>Glisse</OPTION>
<OPTION>Nautique</OPTION>
<OPTION>Cible</OPTION>
</SELECT>

L'objectif : le choix 1 "glisse" doit influencer la deuxième liste déroulante (qui existe déja) ci-dessous en php en modifiant peut etre les valeurs testa et testaa.
De même le choix 2 "nautique" doit modifier ces valeurs pour donner $testa = 'datingsearch_nautique' et $testaa = 'nautique'...

Le soucis : la liste statique préexistante ci dessous que je tente de rendre dynamique est en php et s'intègre dans le fonctionnement général du module.





<div>
<div>

<?php
$testa = 'datingsearch_glisse';
$testaa = 'glisse';
?>

<select id="<?php echo $testa; ?>" name="datingsearch_xxxxxxx" class="jinfield3">

<?php $test = $_test['glisse']; ?>

<option value="" <?php if($test=='')echo 'selected'?>><?php echo JText::_('Sports de glisse'); ?></option>
<?php

foreach($field->value->$testaa as $data)
{
?>
<option value="<?php echo $data; ?>" <?php if($test==$data)echo 'selected'?>><?php echo $data; ?></option>
<?php
}
?>
</select>
</div>
<div style="clear:both; margin-bottom:3px;"></div>
</div>



<div style="clear:both; margin-bottom:10px;"></div>

<div id="jdsearch">
<input type="button" class="button" id="datingsearch_search" name="datingsearch_search" value="<?php echo JText::_('MOD_DATINGSEARCH SEARCH'); ?>" onclick="submitSearchForm();"/>
</div>
<div style="clear:both; margin-bottom:3px;"></div></div>

<div id="datingsearch_hidden">
<input type="hidden" name="operator" value="and" />
<input type="hidden" name="option" value="com_community" />
<input type="hidden" name="view" value="search" />
<input type="hidden" name="task" value="advancesearch" />
<input type="hidden" name="Itemid" value="<?php echo $itemid; ?>" />
</div>
</form>
</div>





Comme je l'explique, je suis perdu.

Si quelqu'un possède la compétence pour y voir plus clair, chapeau !

Un grand merci au courageux qui jettera un oeil à cela !