Changement select et post dans une page (Ajax)

Bonjour,

Je vous explique mon problème, j'ai deux select dont un qui est lié au deuxième.
A savoir que tant que je n'ai pas fait de choix du premier je ne peux faire un choix du 2nde.

Hors le choix du premier définis les choix du second.

J'ai donc deux pistes mais je ne sais en faire aucune :(

La première faire de l'ajax et quand je selectionne le premier ca rafraichie le deuxième. Ca me semble bien mais je sais pas faire si quelqu'un peut m'aider.

La deuxième un peu plus complexe fait en sorte que quand je change le premier select ca met le choix dans l'url en rechargeant la page et donc ca me change le deuxième select. Le hic c'est que l'action de me mon form n'est pas la meme page donc je ne sais pas comment poster sur la meme page sans changer mon action du post.

Voila si quelqu'un peut m'aider merci.

EDIT : je précise je bosse avec des JSP

j'ai donc utilisé ce tutoriel
http://siddh.developpez.com/articles/ajax/#LIV-A

mais en fait rien ne se passe j'ai beau verifier je sais que le code marche en php mais en jsp non je comprends pas trop.

Quelqu'un pour m'aider.

voila mon code html pour ma page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
<script type='text/javascript'>	 
	function getXHR(){
		var xhr = null;    
		if (window.XMLHttpRequest) { 
    		xhr = new XMLHttpRequest();
  		}
  		else{
			if(window.ActiveXObject){ 
  				// Internet Explorer
    			try{
       				xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			}
    			catch(e){
       				try{
           				xhr = new ActiveXObject("Microsoft.XMLHTTP");
       				}
       				catch(e){
 
       				}
    			}
   			}
			else{
   				// XMLHttpRequest non supporté par le navigateur
    			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    			xhr = false;
   			}
   		}
   		return(xhr);
	}
 
 
 
	/**
	* Méthode qui sera appelée sur le click du bouton
	*/
	function go(){
		var res;
		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){
				res = xhr.responseText;
				alert('res' + res);
				// On se sert de innerHTML pour rajouter les options a la liste
				document.getElementById('interlocuteurDIV').innerHTML = 'HELLO4';
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","/WEB-INF/interlocuteur.jsp",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// ne pas oublier de poster les arguments
		sel = document.getElementById('societe');
		idsociete = sel.options[sel.selectedIndex].value;
		xhr.send("idsociete="+idsociete);
	}
</script>
 
 
<div id="formulaireAppel">
	<form method="POST">
		<table>
			<tr>
				<td colspan="2" align="center" style="font-size: 24px; font-weight: bold">Création d'appel</td>
			</tr>
			<tr>
				<td>Titre</td>
				<td><input type="text" id="titre" name="titre" /></td>
			</tr>
			<tr>
				<td>Société</td>
				<td>
					<select id="societe" name="societe" onchange="javascript:go(); alert('hello');">
						<option value=0></option>
						<%
							Statement st = cnx.createStatement();
 
							ResultSet res = st.executeQuery("SELECT id,nom FROM societe");
							while(res.next()){
								out.println("<option value=" + res.getInt(1) + ">" + res.getString(2) + "</option>");								
							}					
						%>
					</select>
				</td>
			</tr>
			<tr>
				<td>statut</td>
				<td>
					<select name="statut" id="statut">
						<option value=""></option>
						<option value="1">Ouvert</option>
						<option value="0">En attente</option>
						<option value="-1">Cloturé</option>
					</select>
				</td>
			</tr>
 
 
		<!-- Inclure ici conversation -->
			<%@ include file="formulaireConversation.jspf" %>
 
			<tr>
				<td colspan="2" align="center"><input type="submit" id="ajoutAppel" name="ajoutAppel" value="Créer appel" /></td>
			</tr>
		</table>
	</form>
</div>

pour mon formulaireConversation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<tr>
	<td>Interlocuteur</td>
	<td>
		<div id="interlocuteurDIV">
		<select name="interlocuteur" id="interlocuteur">
			<option value=0> </option>
			<option value=-1>Autre interlocuteur</option>
		</select>
		</div>
	</td>
</tr>
<tr>
	<td>Commercial</td>
	<td>${sessionScope.user.nom} ${sessionScope.user.prenom}</td>
</tr>
<tr>
	<td colspan="2">
		<textarea rows="15" cols="50">Descriptif Appel</textarea>
	</td>
</tr>

Et le code de ma page jsp qui doit renvoyer la reponse

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<%@ page import="securite.BDD" %>
<%@ page import="java.sql.*" %>
 
<select name="interlocuteur" id="interlocuteur">
	<option value=0> </option>
	<option value=-1>Autresss interlocuteur</option>
 
<%
	int idsociete = Integer.parseInt(request.getParameter("idsociete"));
 
	Statement st = BDD.getStatement();
	ResultSet rs = st.executeQuery("SELECT id,nom,prenom FROM interlocuteur WHERE id_societe=" + idsociete +" ORDER BY nom,prenom");
 
	if(rs != null){
		while(rs.next()){
			out.println("<option value=" + rs.getInt(1) + ">" + rs.getString(2) + " " + rs.getString(3) + "</option>");
		}
	}
%>
</select>

ET c'est le res de la fonction go() qui est vide le ready state ne passe jamais a 4.

Quelqu'un a t-il une idée?

j'ai finis par reussir à faire ce que je voulais.

En fait j'ai changé ma JSP qui etait dans web-inf et je l'ai mise en racine.

Pourquoi cela fonctionne t-il comme ca?
Je voudrais comprendre en fait la difference.