Discussion :

[guillaume8959]

Bonjour/Bonsoir à tous,

J'ai une jsp contenant du javascript et de l'ajax (une histoire de drag & drop).

Un utilisateur doit choisir un nombre d'options définis (nous connaissons cette valeur). Pour choisir ces options nous avons une liste (ce mot, uniquement pour imager) A et il fait glisser ses options dans la liste B.

Une fois que ses choix sont fait, il valide (logique non ?).

Mon gros problème est que le javascript ne s’exécute pas au chargement de la page ! La première fois ... Si j'actualise la page et refait mes choix, le javascript fonctionne bien ! Je ne comprends vraiment pas pourquoi ...

Les scripts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script>
$(function() {
	$( "ol.droptrue" ).sortable({
		connectWith: "ol"
	});
 
	$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
<script language="javascript">
jQuery(document).ready(function($){
    $('li').click(function(){
        var content = $("li:hover").attr("id");
        if (content == null) {
            document.getElementById('descriptionUE').innerHTML = "<b>Cliquez sur une UE pour voir sa description.</b>";
        } else {
            document.getElementById('descriptionUE').innerHTML = "<b>Description de l'UE: " + $("li:hover").html() + "</b> <br/><br/>" + content;
        }
    });
});
</script>
<script type="text/javascript">
var pos = [];
function afficherPos(){
    var s = "";
    for(var i = 0; i < pos.length; ++i){
        s += pos[i] + "/";
    }
    s += " ";
    $("#affiche").html(s);
    document.getElementById("choixEtudiant").value = document.getElementById("affiche").innerHTML;
}
function maListe(idname) {
    var obj = $("#"+idname);
    obj.sortable({
        placeholder : 'ui-state-highlight',
        cursor : 'crosshair',
        revert : true,
        update : function(){
            pos = obj.sortable('toArray');
            afficherPos();
        }
    });
    obj.disableSelection();
}
$(document).ready(function(){
    maListe("sortable2");
});
function verifierChoix() {
    var nbChoix = document.getElementById("choixEtudiant").value.split("/").length;
    var nbUEAChoisir = ${nbUEAChoisir};
    if (nbChoix == nbUEAChoisir + 1) {
        return true;
    }
    else {
        alert("Vous devez choisir " + nbUEAChoisir + " UE !");
        return false;
    }
}
window.onload = verifierChoix();
$(document).ready(function(){
    verifierChoix();
});
</script>

Et une partie du code de la jsp

Code jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<form method="post" action="consultationChoixEtudiant.html" onsubmit="return verifierChoix()">
 
	<div class="span4">
		<div class="well-white" style="height:250px">
			<div class="lesUE" >
				<div class="label label-info">Les UE proposées: </div><br/>
				<ol id="sortable1" class='droptrue'>
					<c:set var="testVar" value="0" scope="page" />
					<c:set var="testVal" value="0" scope="page" />
					<c:forEach items="${lesListes['lesUEProposees']}" var="UE">
						<c:forEach items="${lesUEAff}" var="LUEAff">
							<c:if test="${UE.idUE eq LUEAff.idUE}">
								<c:set var="testVar" value="1"/>
							</c:if> 
						</c:forEach>
						<c:forEach items="${lesUEValidees}" var="lUEV">
							<c:if test="${UE.idUE eq lUEV.idUE}">
								<c:set var="testVal" value="1"/>
							</c:if>
						</c:forEach>
						<c:if test="${testVar==0}">
							<c:if test="${testVal==0}">
								<li class="info" id="${UE.description }"><i class="icon-list"></i>${UE.idUE}<span>${UE.description }</span></li>
							</c:if>
						</c:if>
						<c:set var="testVar" value="0"/>
						<c:set var="testVal" value="0"/>
					</c:forEach>
				</ol>
			</div>
		</div>
	</div>
	<div class="span4">
		<div class="well-white" style="height:250px">
			<div class="lesUE" >
				<div style="display:none" id="affiche"></div>
				<input name="choixEtudiant" type="hidden"  id="choixEtudiant"></input>
				<div class="label label-info">Vos choix: </div><br/>
				<ol id="sortable2" class='droptrue'>
				</ol>
			</div>
		</div>
	</div>
</div>
<br/><br/>
<div id="validerChoix">
	<input type="submit" class="btn btn-info" value="Valider mes choix">(Attention, vous ne pourrez plus les modifier !)</input> 
</div>
</form>

Un grand merci à tous ceux qui auront pris le temps de me lire ... Si vous avez des idées, je suis plus que preneur

[le_chomeur]

regroupes toutes tes fonctions dans une seule que tu appeleras une fois le dom chargé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
jQuery(document).ready(function($){
activateDragAndDrop();
...
});
 
function activateDragAndDrop(){
$( "ol.droptrue" ).sortable({
		connectWith: "ol"
	});
 
	$( "#sortable1, #sortable2" ).disableSelection();
}

[guillaume8959]

Merci pour ta réponse.

Malheureusement, j'ai fait ce que tu as dit, mais ça "annule" le drag & drop et ne résous pas ce fameux problème [Ou alors, j'ai mal compris, et je suis mauvais ]

[le_chomeur]

peux tu poster le code HTML généré ??

[guillaume8959]

C'est bon, j'ai résolu mon problème !

Pour être honnête, ce code a été pondu par mon binôme, qui n'arrivait pas à trouver où ça clochait ..

J'ai viré toutes ces centaines de balise 'script' et mis des ; à la fin des fonctions. Et modifié une variable transmise par le contrôleur

Merci de ton intérêt le_chomeur :-)