Function non prise en compte

Bonjour,

je ne comprend pas pourquoi ma fonction est prise en compte qu'une seul fois alors que elle devrais s'appliquer a chaque message, voici ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
//animation d'affichage des messages
var myVar;
function myFunction() {
    myVar = setTimeout(showPage, 2000);
}
myFunction();
function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("roboconv").style.display = "table";
}

et juste en dessous sur le meme fichier j'ai :

Code:

1
2
3
4
5
6
7
8
 
//script qui envoie un message si le visiteur est inactif depuis 5min
	setTimeout(function(){
 
        $('#conversation').append("<div id='loader'></div><hr width='250px'><div id='roboconv' class='animate-bottom'><img  id='imgrobot' src='logo/robotcompta.png' /><div id='robot' ><p style='font-size:14px; margin-left: 20px;'>Créer un compte en cliquant ici</p> <p style='font-size:14px; margin-left: 20px;' class='them'><input type='button' id='buttonchoix' value='Enregistrement' onclick='enregistrement(); return false;'></p></div></div>");
 
       },5000);
</script>

mais il ne prend pas en compte et donc il ne change pas le style pareil dans mon fichier php qui fait le traitement et qui affiche sur cette page, si quelqu'un peut m'aider

Merci
CDT

:salut:

Sans la totalité des codes (CSS, HTML, JS) difficile de tester et parfois de comprendre une question.

Il faut choisir entre JS et jQuery (sucre syntaxique JS), le forum jQuery n'est pas ici.

Dans votre premier extrait de code, en JS, vous manipulez les ID "loader" et "roboconv" et dans votre deuxième extrait de code, en jQuery, vous créez des éléments avec ces ID. Cela semble incohérent, un ID doit être unique dans la page web.

1 pièce(s) jointe(s)

Voici donc la totalité du code, voici la page qui affiche les messages :

Code:

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
<html xmlns="http://www.w3.org/1999/xhtml">
 
<header>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<script type='text/javascript' src='animmsg.js'></script>
 
<script>
//script qui envoie un message si le visiteur est inactif depuis 5min
	setTimeout(function(){
 
        $('#conversation').append("<hr width='250px'><div id='loader'></div><div id='roboconv' class='animate-bottom'><img  id='imgrobot' src='logo/robotcompta.png' /><div id='robot' ><p style='font-size:14px; margin-left: 20px;'>Créer un compte en cliquant ici</p> <p style='font-size:14px; margin-left: 20px;' class='them'><input type='button' id='buttonchoix' value='Enregistrement' onclick='enregistrement(); return false;'></p></div></div>");
 
       },5000);
</script>
 
</header>
 
<body>
	<div id="containermenu">
	      <h1>TEST</h1>
 
	</div>
 
	<div id="espace"></div>
 
 
<div id="containerbody">
 
    <div id="container">
		<div id="conversation" name="conversation">
 
		 <div id='loader'></div>
 
		 <div id="roboconv" class='animate-bottom'>
 
		 <img style='width:40px; position: absolute; border-radius: 10px;' src='logo/robotcompta.png' />
			<div id='robot'>
				 <p style='font-size:14px; margin-left: 20px;' class='them'>
				    Bonjour !
				</p>
				<p style='font-size:14px; margin-left: 20px;'>
				    Je suis votre assistant <strong>Robot</strong>
				</p>
 
				    <form name="choixrecherche" method="POST">
				        <p style='font-size:14px; margin-left: 20px;'>
				        	<input type='hidden' value='musique' id='musique' name='musique'>
				        	<input type='hidden' value='graff' id='graff' name='graff'>
				    		<input type='button' value='Musique' id="buttonchoix" onclick="choixentreprise(); return false;">
				    		<input type='button' value='graff' id="buttonchoix" onclick="choixcompte(); return false;">
 
				    </form>
 
			</div></div></div>
 
    <div id="containerform">
<form name="envoieform" method="POST">
	<input type="text" maxlength="150" placeholder="Entrer un message..." value="" name="msg" id="msg">
	<input type="image" src="logo/images_conversation/bouton-envoyer.png" value="envoyer"  onclick="envoie(); return false;">
</form>
	</div>
 
	<!-- affiche la selection du choix entreprise ou compte --><div id='divchoix'></div>
 
	</div></div>
 
</body>
 
</html>

La page qui traite les message pour changer le style :

Code:

1
2
3
4
5
6
7
8
9
10
//animation d'affichage des messages
var myVar;
function myFunction() {
    myVar = setTimeout(showPage, 2000);
}
myFunction();
function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("roboconv").style.display = "table";
}

et enfin la parti css qui affiche le chargement des message :

Code:

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
#roboconv{
    display: none;
    position: relative;
}
 
 
/* animation de chargement des messages */
#loader{
  margin: auto;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
 
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
 
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
 
/* fin de l'animation */

et voici une capture d'écran de l'erreur :

Pièce jointe 283826

et donc le chargement (rond bleu) ne s'arrete jamais c'est donc le 2eme script qui n'est pas pris en compte mais comment faire ?

voila je n'ai toujours pas réussi a trouver de solution je pense que je fait mal quelque chose mais je ne sais pas quoi..

Merci
CDT

Bon j'ai réussi a faire un exemple de ce que je veut faire mais toujours pas avec le "append" je ne sais pas quoi faire si quelqu'un peut m'orienté, voici le lien ver l'exemple :

https://jsfiddle.net/t76n26hx/