Discussion :

[feanoren]

Bonjour.
Dans le cadre de l'adaptation en web mobile d'une application je dois utiliser jquery mobile pour mettre en place une interface mobile (remplaçant l'interface swing de la version téléchargeable).
Mon problème concerne deux checkbox ("intern" et "extern").
En effet lorsque les deux checkbox sont "checked" la valeur "all" doit être enregistrée et lorsqu'une seule des deux est cochée c'est le nom de celle cochée qui est enregistrée ("intern" ou "extern").
Enfin quand la box" intern" est décochée et que l’utilisateur décoche "extern" alors un event se lance pour cocher automatiquement "intern" et inversement (car il doit y avoir au minimum une case cochée) .

voici les liens d'appel :

Code html :

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

1
2
3
<link href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>

voici le code des checkboxs "intern" et "extern" (l’appel de la fonction de traitement se fait au "onclick" le problème vient peut être de Jqm qui s'intercale avant l'appel) :

Code html :

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
<FORM style="margin:0px" name="searchForm" accept-charset="UTF-8" Method="POST" Action="go" onSubmit="showSearchResultPage();return false;">
 
<div class="ui-grid-a"><input type="hidden" name="memoType" value="all">
	<div class="ui-block-a" onClick="clickOnIntern(searchForm);">
		<label>
			<input data-mini="true" type="checkbox" name="internes" id="internes" class="custom" checked="checked">internes	
		</label>
	</div>
	<div class="ui-block-b" onClick="clickOnExtern(searchForm);">
		<label>
			<input data-mini="true" type="checkbox" name="externes" id="externes" class="custom" checked="checked">externes	
		</label>
	</div>
</div>
<button id="test" onclick="oukoncherche(searchForm)">sur quel corpus s'applique la recherche</button>
</FORM>

Voici le code javascript chargé de capter ce qui a été sélectionné (plus un affichage via un clic sur le bouton de la fin du formulaire).

a) tout d'abord les fonctions qui enregistrent ce qui a été cliqué (en regardant si la check box est sélectionné site à un clic ).
Quand on clique sur la première checkbox.

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
function clickOnIntern(form) //au clic sur la checkbox "intern" (form est le formulaire contenant les checkboxs)
{
	changeCheckBoxes(1);//fonction qui vérifie qu'il y en ait au moins une de cochée (sinon coche celle ou le clic n'a pas eu lieu)
	if(( $("#internes").prop("checked")) && ( $("#externes").prop("checked") )) //si les deux checkboxs sont sélectionnées
	{
		 form.memoType.value = "all"; //on enregistre la valeur (quelles checkboxs sont cochées)
	}
	if(( $("#internes").prop("checked") == false) && ( $("#externes").prop("checked") )) //si seulement une ("extern")
	{
			 form.memoType.value = "extern"; 
	}
	if(( $("#internes").prop("checked")) && ( $("#externes").prop("checked")  == false)) //si seulement une ("intern")
	{
			 form.memoType.value = "intern"; 
	}
}

Quand on clique sur la seconde checkbox.

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
function clickOnExtern(form)
{
	changeCheckBoxes(2);
	if(( $("#internes").prop("checked")) && ( $("#externes").prop("checked") ))
	{
		 form.memoType.value = "all"; 
	}
	if(( $("#internes").prop("checked") == false) && ( $("#externes").prop("checked") ))
	{
			 form.memoType.value = "extern";
	}
	if(( $("#internes").prop("checked")) && ( $("#externes").prop("checked")  == false))
	{
			 form.memoType.value = "intern";
	}
}

b)Fonction de vérification (affiche ce qui est coché, sélectionné)

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
function oukoncherche(form)
{
	 alert(form.memoType.value);
	 alert("internes : "+document.getElementById("internes").checked  +"  externes : "+document.getElementById("externes").checked);
 
	 if ( $("#internes").prop("checked") ==true)//on regarde si la checkbox intern est coché
	 {
	 alert("internes cochées");
	 }
 
	 if ( $("#externes").prop("checked") ==true)
	 {
	 alert("externes cochées");
	 }
	 if ( $("#internes").prop("checked") ==true &&  $("#externes").prop("checked") ==true)
	 {
	 alert("les deux sont cochées");
	 }
}

c)fonction qui empêche d'avoir les deux checkboxs vides

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function changeCheckBoxes(source)		//vérifie qu'il y a toujours une case cochée
{
    if(( $("#internes").prop("checked") == false) && ( $("#internes").prop("checked") == false))
    {
        if(source == '1')
        {
            $('#externes').attr('checked', true);
        }
        if(source == '2')
        {
            $('#internes').attr('checked', true);
        }
    }
}

Ce code est assez simple et le choix d'utilisation de jquery pour les algos est du à mon incapacité à résoudre le problème, j'ai dont fait évoluer le script de Js pur à Jq.

Le problème est : Lorsque jQuery mobile (intégré via <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script) est désactivé tout fonctionne correctement (la bonne valeur est enregistré au clic sur la checkbox etc, ...).
Cependant dès que jquery mobile est rajouté les, clics ne déclenchent pas toujours les envents, les enregistrements ne sont pas les bons et le changement automatique de sélection via l'algo ne fonctionne plus.

Quelqu'un aurait il une suggestion ou une explication ?
Merci

[Matthieu2000]

suggestion : utilise trois boutons radio

[feanoren]

merci d'avoir répondu.
Si je ne réussi pas à résoudre ce problème c'est ce que je ferrai mais je doit éviter de trop dévier de ce qui a été défini.
Surtout que je pense que je manque cruellement de recul sur mon code le problème doit être tout bête (ce serrait étrange que ce soit du à un bug de Jq mobile sur quelque chose d'aussi banal)