IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jquery mobile empeche analyse des checkbox


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Inscrit en
    Juillet 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 3
    Par défaut jquery mobile empeche analyse des checkbox
    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

  2. #2
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par défaut
    suggestion : utilise trois boutons radio

  3. #3
    Candidat au Club
    Homme Profil pro
    Inscrit en
    Juillet 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 3
    Par défaut
    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)

Discussions similaires

  1. mode d'interclassement des caractères pour une application jquery mobile
    Par souhir1987 dans le forum Mon application mobile
    Réponses: 0
    Dernier message: 05/11/2014, 22h32
  2. Réponses: 0
    Dernier message: 14/03/2013, 21h41
  3. Réponses: 0
    Dernier message: 14/03/2013, 03h42
  4. Jquery Mobile Checkbox PHP
    Par fazpedro dans le forum jQuery
    Réponses: 1
    Dernier message: 23/05/2012, 09h53
  5. Réponses: 3
    Dernier message: 05/04/2011, 12h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo