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 :

IE et display


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    70
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 70
    Par défaut IE et display
    Bonjours tout le monde.

    Me voilà de retour pour pauser une nouvelle question où je ne trouve pas la réponse.
    Je suis entrain de développer un formulaire où on peut sélectionner via un menu déroulant une langue. Si on choisie Other..., normalement un nouveau champs doit apparaître pour pouvoir saisir une autre langue non disponible dans la liste. Mais voilà le problème, bien que mon code marche bien sous firefox, il refuse de marcher sur IE8, IE9 et Chrome et donc je pense aussi sous safarie.

    voici mon code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table style="font-size:14px;">
    		<tr>
    			<td>
    					<select name="sourcelanguage" style="width:200px;">
     
    							<option value="<?php echo $OrderForm_language_japanese;?>" class="HideOSL"> <?php echo $OrderForm_language_japanese;?> </option>
    							<option value="<?php echo $OrderForm_language_other;?>"  id="ShowOSL"> <?php echo $OrderForm_language_other; ?> </option>
    					</select>
    				</td>
    				<td id="OSL" style="display:none;position:relative;right:300px;" > <input id="textSL" type="text"  size="30" value="<?php echo $OrderForm_language_otherChoiceSource;?>" style="background-color:#FFFAC6;" ></td>
     
    		</tr>
    </table>
    Ainsi le second <td> n'est pas visible et j'utilise Jquery pour la faire apparaitre lorsque l'on clique sur l'option avec id="ShowOSL" dans le menu déroulant. Je n'ai pas mis tout le menu pour ne pas alourdir la lecture.

    Du côté de Jquery voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
     
    $(document).ready(function(){
     
           $('#ShowOSL').click(function() {
    		$('#OSL').css('display','block');
    	});
     
    });
    Pour finir, j'ai quasiment tout essayer, dont visibility, les différents display avec block, inline, table, table-cell etc...
    J'ai même essayer de déplacer la position en jquery du <td>. J'ai aussi transformer le <td> en <div> pour les problèmes connues de block sur <td>. Mais rien y fait. Je suis perdu et je ne comprend pas ce qui se passe.


    Si quelqu'un a une petite réponse...

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    C'est normal, il n'y a pas d'événement click pour une balise <option>
    http://msdn.microsoft.com/en-us/libr...=VS.85%29.aspx
    Il faut gérer le change du select et vérifier la valeur de l'option sélectionnée.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    70
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 70
    Par défaut
    Hey, merci pour cette réponse rapide.

    Je me rends compte que je suis encore un gros débutant . J'ai a moitier compris, mais je vais regarder de près le lien.

    Cela veut dire que firefox est très permissif par rapport aux autres navigateur.

    Si toute fois tu avais un petit exemple, je le prend avec joie. Sinon merci encore.

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    70
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 70
    Par défaut
    Ok merci, j'ai trouvé et ça marche super.

    Je mets mon code modifié si cela peut aider quelqu'un d'autre dans le futur.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table style="font-size:14px;">
    		<tr>
    			<td>
    					<select name="sourcelanguage" style="width:200px;" id="Sl"  >
     
    							<option value="<?php echo $OrderForm_language_japanese;?>" class="HideOSL"> <?php echo $OrderForm_language_japanese;?> </option>
    							<option value="Other"  id="ShowOSL"> <?php echo $OrderForm_language_other; ?> </option>
    					</select>
    				</td>
    				<td id="OSL" style="display:none;position:relative;right:300px;" > <input id="textSL" type="text"  size="30" value="<?php echo $OrderForm_language_otherChoiceSource;?>" style="background-color:#FFFAC6;" ></td>
     
    		</tr>
    </table>


    Et pour le JS:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    	$('#Sl').change( function() {
    		var selection = $(this).val();
    		if (selection == "Other") { $('#OSL').css('display','block'); }
    		else { $('#OSL').css('display','none'); }
    	});
    Merci encore.

    Problème résolu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Display Format d'une cellule d'une DBGrid
    Par Wilco dans le forum Bases de données
    Réponses: 5
    Dernier message: 21/10/2004, 13h00
  2. XLIB: extension GLX missing on display "...
    Par vince3320 dans le forum OpenGL
    Réponses: 9
    Dernier message: 29/07/2004, 15h48
  3. Réponses: 15
    Dernier message: 20/07/2004, 09h22
  4. Solution pas terrible mais ok [XFree] display
    Par sdeb dans le forum Applications et environnements graphiques
    Réponses: 5
    Dernier message: 06/01/2004, 20h46
  5. [ websphere] problème d'export DISPLAY
    Par gogozep001 dans le forum Websphere
    Réponses: 8
    Dernier message: 04/09/2003, 13h31

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