Remplacement de contenu HTML

**FotoXe33** · 03/07/2010, 18h02

Bonjour,

Voilà, j'ai eut beau vérifier plusieurs fois, impossible de faire fonctionner ce bout de code :

Code :

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

1
2
3
4
5
6
7
 
$("#login").click(function(){
	$("#divlog").fadeOut(200, function(){
		$("#divlog").html("<img src=\"../img/load.gif\" tite=\"Chargement en cours...\" alt=\"Chargement...\" />");
		$("#divlog").fadeIn(200);
	});
});

Voici le code HTML en rapport :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<li class="droite">
<form method="post" action="" onsubmit="return cnx(\'co\');">
PseudO : <input type="text" name="login" id="login" size="10" />&nbsp;&nbsp;&nbsp;
MdP : <input type="password" name="pass" id="pass" size="10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<dic id="divlog">
<input type="submit" value="LogiN" id="login" />
</div>
</form>
</li>

Quelqu'un aurait-il une solution ?

Merci d'avance...

**danielhagnoul** · 04/07/2010, 01h47

Bonsoir.

Un id doit être unique ! Il y a deux id login.

**FotoXe33** · 04/07/2010, 10h37

Oula oui en effet, autant pour moi, merci beaucoup...

EDIT : Cela étant, le script ne marche toujours pas... J'ai mis comme id sublog dans le HTML et dans le JS, rien a faire...

**danielhagnoul** · 06/07/2010, 20h49

Bonsoir

Je viens de voir un autre problème dic au lieu de div.

Code :

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

1
2
3
4
5
6
7
8
9
<li class="droite">
<form method="post" action="" onsubmit="return cnx(\'co\');">
PseudO : <input type="text" name="login" id="login" size="10" />&nbsp;&nbsp;&nbsp;
MdP : <input type="password" name="pass" id="pass" size="10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<dic id="divlog">
<input type="submit" value="LogiN" id="login" />
</div>
</form>
</li>

Si l'id login concerné est celui du bouton de soumission, il y a encore un autre problème. Exemple (voir les commentaires dans le code) :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color: #ffffff;
			color: #000000;
			font-family: sans-serif;
			font-size: medium;
			font-style: normal;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
		}
		h1, h2, h3, h4, h5 {
			font-family: serif;
		}
		div, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, form, table, img {
			margin: 0px;
			padding: 0px;
		}
		p {
			padding: 6px;
		}
		ul, ol, dl {
			list-style: none;
			padding-left: 6px;
			padding-top: 6px;
		}
		li {
			padding-bottom: 6px;
		}
		div#conteneur {
			width: 95%;
			height: 500px;
			margin: 12px auto;
			padding: 6px;
			background-color: #FFFFFF;
			color: #000000;
			border: 1px solid #666666;
			font-size: 0.8em;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			/*
			 * Inclure une animation dans une soumission de formulaire ?
			 * Avec rien ou return true le formulaire est soumi et la
			 * page est rechargée on n'a donc pas le temps de voir l'animation
			 */
			$("#login").click(function(){
 
				$("#divlog").fadeOut(1000, function(){
					$(this).html("<img src='../images/imageTest.png' tite='Chargement en cours...' alt='Chargement...' />").fadeIn(1000);
				});
 
				return false;
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<form>
			PseudO : <input type="text" name="autre" id="autre" size="10" />&nbsp;&nbsp;&nbsp;
			MdP : <input type="password" name="pass" id="pass" size="10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<div id="divlog">
				<input type="submit" value="LogiN" id="login" />
			</div>
		</form>
 
	</div>
</body>
</html>

Remplacement de contenu HTML

jQuery

Vue hybride

Discussions similaires

Partager

Partager