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

JavaScript Discussion :

Modification HTML/CSS qui perturbe les scripts


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Inscrit en
    Février 2009
    Messages
    192
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 192
    Par défaut Modification HTML/CSS qui perturbe les scripts
    Rebonjour

    voila j'ai reuisse a ameliore l'affichage de mon code avec CSS , mais j'ai trouvee un probleme au niveau de mes lites deroulante , avant sans CSS
    j'avais deux listes liees
    Fournisseur {liste deroulante}
    avec
    Produit{liste deroulante}

    je choisis un fournisseur dans la liste déroulante et que ses infos arrivent automatiquement dans l'autre liste Produit

    voici le nouveau code avec CSS

    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
    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
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <!--  LA PREMIERE CHOSE A AFFICHER ET LE DOCTYPE ENSUITE LE <HTML> PUIS LE <HEAD> ET ENFIN LE <BODY> -->
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
     <!-- EXEMPLE DE DOCTYPE -->
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Listes Liees +Module+Matiere</title>
    		<script type='text/javascript'>
    		<!--
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				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 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){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('prod').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","prod.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de Module
    				sel = document.getElementById('four');
    				idfour = sel.options[sel.selectedIndex].value;
    			alert(idFour);	
    			xhr.send("idfour="+idfour);
     
    			}
    		-->
    		</script>
    		<!-- LA BALISE STYLE DE PREFERENCE DANS LE HEAD ET MIEUX DANS UN FICHIER EXTERNE
    		<link rel="stylesheet" type="text/css" href="design.css" />
    		-->
    		<style type="text/css">
    		td{font-family:verdana,sans-serif; font-size:8pt;color:#333333}
    		td select { width : 300px;}
    		body{font-family:verdana,sans-serif; font-size:11pt;color:#333333;font-weight:bold; background-color : #EEEEDD;}
    		#page{ width : 900px;}
    		.centrer { margin : auto; left : 50%; }
    		p { text-align : center; }
    		</style>
    	</head>
    	<!-- ATTENTION ON NE DECLARE QU UN SEUL BODY -->
    	<!-- <body> -->
     
     <!--  ON NE FERME QU UNE FOIS LE HEAD -->
    <!-- </head> -->
     
    <body>
    <!-- LA BALISE CENTER EST OBSOLETE. IL FAUT UTILISER UNE DIV EST LA CENTRER -->
    <!-- <center> -->
    <div id="page" class="centrer">
    	<p>quel produits et quelle clientes voulez vous choisir?</p>
    	<!-- UN FORM COMPREND AU MINIMUM UN ACTION ET UNE METHODE (ON RECUPERE AVEC $_POST sinon $_GET)  -->
    	<form action="mapage.php" method="post">
    		<!-- POUR UTILISER UN TABLEAU IL FAUT LE METTRE DANS DES BALISE <TABLE> -->
    		<table class="centrer">
    			<tr>
    				<td>
    					<label>Fournisseur :</label>
    				</td>
    				<td>
    					<select name="four" id="four" onchange="go()">
    						<option value='-1'>Aucun</option>
     
                        <?
    						mysql_connect("localhost","root","");	
                            mysql_select_db("Command");
    						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nomfour");
    						while($row = mysql_fetch_assoc($res)){
    							echo "<option value='".$row["idfour"]."'>".$row["nomfour"]."</option>";
    						}
    					?>					
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<label>Produits :</label>
    				</td>
    				<td>
    					<!-- UN DIV INLINE EST UN : SPAN -->
    					<!-- <div id="prod" style="display:inline"> -->
    					<span id='prod'>
    						<select name='prod'>
    							<option value='-1'>Choisir un produit</option>
    						</select>
    					</span>
    				</td>
    			</tr>
    	        <tr>
    				<td>
    					<p>
    						<label>Localisation :</label>
    					</p>
    				</td>
    				<td>
                            <?
                           mysql_connect("localhost","root","");
                           mysql_select_db("Command");
                           $res = mysql_query("SELECT Distinct Localisation FROM client ");
                           echo"<select name=\"Loc\" id=\"Loc\">";
                           while($row = mysql_fetch_assoc($res)){
                           echo "<option value='".$row["Localisation"]."'>".$row["Localisation"]."</option>";
                                  }
                               echo "</select> ";	
                            ?>						   
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<label>Clients :</label>
    				</td>
    				<td>
    					<!-- ON NE PEUT PAS METTRE DEUX FOIS LES MEMES IDENTIFIANTS -->
    					<!--<select name="Nom" id="client">-->
     
                           <?
                              mysql_connect("localhost","root","");
                              mysql_select_db("Command");
                              $res = mysql_query("SELECT Distinct SortClt FROM client ");
                              echo"<select name=\"client\" id=\"client\">";
                                 while($row = mysql_fetch_assoc($res)){
                                 echo "<option value='".$row["SortClt"]."'>".$row["SortClt"]."</option>";
                                    }
                                 echo "</select> ";
                                 ?>						
     
    				</td>
    			</tr>
    			<tr>
    				<!-- PERMET DE METTRE LA COLONNE QUI PREND DEUX DOLONNES -->
    				<td>
    					<p><input type="submit" name="monBouton" value="Afficher"></p>
    				</td>
    			</tr>
    		</table>
    	</form>
    </div>
    </body>
    </html>
    voici le deuuxieme code sans CSS et que les listees liees marchent bien

    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
    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
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
     
    <html>
    	<head>
    		<title>Listes Liees +Module+Matiere</title>
    		<script type='text/javascript'>
     
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				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 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){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('prod').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","prod.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de Module
    				sel = document.getElementById('four');
    				idfour = sel.options[sel.selectedIndex].value;
    				xhr.send("idfour="+idfour);
     
    			}
    		</script>
    	</head>
    	<body>
    	<style>
    <!--
    td{font-family:verdana,sans-serif; font-size:8pt;color:#333333};
    body{font-family:verdana,sans-serif; font-size:11pt;color:#333333;font-weight:bold};
    //-->
    </style>
     
    </head>
     
    <body bgcolor="#eeeedd">
    <center>
    <p>quel produits et quelle clientes voulez vous choisir?</p>
     
    		<form>
    				<tr><td>
    				<label>Fournisseur :</label>
    				<td><select name='four' id='four' onchange='go()'>
    					<option value='-1'>Aucun</option>
                         </tr>
    					<?
    						mysql_connect("localhost","root","");	
                            mysql_select_db("Command");
    						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nomfour");
    						while($row = mysql_fetch_assoc($res)){
    							echo "<option value='".$row["idfour"]."'>".$row["nomfour"]."</option>";
    						}
    					?>
     
    				</select>
    				<br>
    				<br>
    				<tr><td>
    				<label>Produits :</label>
    				<td><div id='prod' style='display:inline'>
    				<select name='prod'>
    					<option value='-1'>Choisir un produit</option>
    					</tr>
    				</select>
    				</div>
     
    		</form>
    	</body>
    </html>

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    effectivement, c'est nettement mieux que la version précédente

    Mais tu ne nous dit pas quelle est la question ?

    En appliquant le HTML / CSS qui donnent le résultat attendu à l'affichage tes traitement Ajax ne fonctionnent plus ?

    A+

  3. #3
    Membre confirmé
    Inscrit en
    Février 2009
    Messages
    192
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 192
    Par défaut
    Bonjour Merci bcp de l'aide d'hiere

    alors je m'expliquee j'avais deux listes deroulantes liees
    Fournisseur{liste deroulante}
    Produit{liste deroulante}
    ses deux listes s'est arretees de fonctionner avant c'etait pas comme ca fixe
    mais lorsq je clique sur la liste de fournisseur j'obtiens automatiquement des porduit qui arrivent dans la deuxieme liste {produit} maintenant non marchent plus apres integrer le CSS
    je ne sais pas prk

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('prod').innerHTML = leselect;
    Il faut que tu ajoutes un id="prod" à ton Par contre, tu as testé sous IE ?
    Je pense que ton Ajax ne fonctionnera plus (à cause de la mise à jour via innerHTML dans un <form>, comme dis hier) ...

    A+

  5. #5
    Membre confirmé
    Inscrit en
    Février 2009
    Messages
    192
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 192
    Par défaut
    ca y est ca marche bien
    je crois c'est du par le navigateur Firefox
    merci merci merci bcp
    vraiment je trouve pas les mots et les phrases qui .............
    mais un grand grand merci E.Bzz

    si vous permettez j'ai une encore un pas tres important j'amerai bien le paratager avec vous

    si vous me repondez par oui je vais vous le dire

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Au vu du titre de ton post qui ne repond absolument pas aux règles du forum moi je serais tenté de repondre non ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Si si, tu as trouvé les mots

    Allons-y pour le "un pas très important" ...

    Ah c'est vrai, il faut dire : "oui"

    C'est fait.

  8. #8
    Membre confirmé
    Inscrit en
    Février 2009
    Messages
    192
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 192
    Par défaut
    non non ca concerne seulement mon travaill c'est tout

  9. #9
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    De quoi s'agit-il ?

Discussions similaires

  1. [PowerShell] Script qui affiche les dossiers avec une date de modification différente d'aujourd'hui
    Par forcapedro dans le forum Scripts/Batch
    Réponses: 3
    Dernier message: 08/05/2014, 10h32
  2. Modification paramètre CSS qui ne marche pas
    Par Kamoo dans le forum jQuery
    Réponses: 7
    Dernier message: 20/09/2012, 11h43
  3. [WD-2003] Forme automatique qui perturbe les propriétés du tableau
    Par bolide7 dans le forum Word
    Réponses: 10
    Dernier message: 22/08/2011, 18h35
  4. Div qui perturbe les autres
    Par Garra dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 02/05/2007, 17h30
  5. script qui explore les sous-répertoire ?
    Par farenheit dans le forum Flash
    Réponses: 9
    Dernier message: 20/07/2005, 12h02

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