Forums

Hi,

I have created a form :

HTML code is :

				<label>Type :</label>
				<select name='auteur' id='auteur' onchange='affichage_categorie()'>
					<option value='-1'>Choisir un type</option>
					<?php
						$res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=67 ORDER BY fieldtitle");
						while($row = mysql_fetch_assoc($res)){							//
							echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
						}
					?>
				</select>						
				<br/>
				<label>Categorie :</label>
				<div id='categorie' style='display:inline'>
	 				<select name='categorie'> <option value='-1'>Choisir une categorie</option>	</select> 
				</div>	
				<br/>
				<label>Activite :</label>
				<div id='activite' style='display:inline'>
 					<select name='activite'> <option value='-1'>Choisir une activite</option> </select> 
				</div>				
				<br/>
				<label>Niveau :</label>
				<div id='niveau' style='display:inline'>
					<select name='niveau'> <option value='-1'>Choisir un niveau</option></select>
				</div>

Javascript code is :

			function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else {  
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, mettez a jour votre navigateur"); 
				   xhr = false; 
				} 
                return xhr;
			}
			
			function affichage_categorie(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('categorie').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","/home/carpediem/bacasable/categorieDropdown.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments, ici, l'id de l'auteur
				//Retourne un objet HTML à partir de son id, défini dans la propriété id de la balise de l'objet.
				sel = document.getElementById('auteur');
				idcategorie = sel.options[sel.selectedIndex].value;
				xhr.send("idCategorie="+idcategorie);
			}
		
			function affichage_activite(){				
				var xhr_activite = getXhr();
				xhr_activite.onreadystatechange = function(){
					if(xhr_activite.readyState == 4 && xhr_activite.status == 200){
						leselect = xhr_activite.responseText;						
						document.getElementById('activite').innerHTML = leselect;
					}
				}
				xhr_activite.open("POST","/home/carpediem/bacasable/activiteDropdown.php",true); 
				xhr_activite.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('categorie2');
				idactivite = sel.options[sel.selectedIndex].value;
				xhr_activite.send("idActivite="+idactivite);			
			}		
		
			function affichage_niveau(){				
				var xhr_niveau = getXhr();
				xhr_niveau.onreadystatechange = function(){
					if(xhr_niveau.readyState == 4 && xhr_niveau.status == 200){
						leselect = xhr_niveau.responseText;						
						document.getElementById('niveau').innerHTML = leselect;
					}
				}
				xhr_niveau.open("POST","/home/carpediem/bacasable/niveauDropdown.php",true); 
				xhr_niveau.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('activite2');
				idniveau = sel.options[sel.selectedIndex].value;
				xhr_niveau.send("idNiveau="+idniveau);			
			}		

in my javascript i use the instruction :

xhr.open("POST","/home/carpediem/bacasable/categorieDropdown.php",true);

but categorieDropdown is never called. So, how can i make my javascript use my file.

I'm using a local apache server on my personnal computer and the path to the php file is good.

Thanks,
David

Hi David,

I spent a while trying to understand this code. First off, there are much easier ways of doing AJAX in ChronoForms!

But I think (I'm far from certain) that the main problem is that your line

xhr.open("POST","/home/carpediem/bacasable/categorieDropdown.php",true);

includes a path instead of a url??

Bob

PS As a more general comment we suggest that you do no use raw PHP Mysql commands in your code but use the more secure Joomla versions.

Yes, it was my pathname who was wrong.

I replace them by :

xhr.open("POST","/localhost/bacasable/categorieDropdown.php",true);

and it works.
Now i must look for create dynamic link :wink:

I will change my mysql request according to the joomla (and yours) suggest.

Thanks

Bob, i can give you my full code if you want to understand my form, it's a multiple dynamic dropdown list, each list is fill with dynamic sql queries.