Discussion :

[THTCO]

Bonjour

J'ai une page où un petit bloc est chargé dynamiquement via xmlhttprequest.
Dans ce petit bloc chargé dynamiquement, il y a un formulaire avec un id.
Problème : Après import, javascript est incapable de localiser le formulaire avec getelementbyid (oui, j'ai vérifié ce n'est pas un problème de faute ou d'espace en trop).
L'id est bon mais je ne comprends pas pourquoi la fonction, pourtant appelée bien après rajout du nouveau code, ne trouve pas mon élément !

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
 
    	<p class="general_title">Messagerie</p>
 
  <!-- load jQuery 1.3.2 -->
  <script type="text/javascript" src="/../libraries/JQuery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
  var jQuery3 = $.noConflict(true);//Remplacer le $ de JQuery par JQuery3
  </script>
 
 
  <script type="text/javascript">
       function blockRequest(formId,destId,phpDest) {
         //AJAX block request
          document.getElementById(destId).innerHTML = '<img src="/media/images/wait.gif" alt=""/>';//Affichage du wait.gif en attendant la suite
          var forme = jQuery_Genius("#"+formId)[0];//document.getElementById(formId);
          alert(jQuery_Genius("#"+formId)[0]);
          var formData = new FormData(forme);
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpDest,true);
          xhr.onreadystatechange = function() { // On gère ici une requête asynchrone
             if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
                 document.getElementById(destId).innerHTML = "";//xhr.responseText; // Et on affiche !
                  document.getElementById(destId).insertAdjacentHTML('afterbegin',xhr.responseText);
             } else if (xhr.readyState == 4 && xhr.status != 200) { // En cas d'erreur !
                 alert('Une erreur est survenue !\n\nCode :' + xhr.status + '\n' + xhr.statusText);
             }
          }
          xhr.send(formData);
       }
  </script>
 
<!-- PARTIE STATIQUE - LE FORMULAIRE CI DESSOUS EST PARFAITEMENT REPERABLE A PARTIR DE SON ID-->
    <div class="block">
      <div>Messagerie</div>
      <form id="BlockMessagerie213969301-dform" style="display: none;">
<input type="text" name="contexte" value="1">
<input type="text" name="blockId" value="BlockMessagerie213969301">
</form>
 
<!-- PARTIE AJOUTEE DYNAMIQUEMENT - LE FORMULAIRE CI DESSOUS EST INTROUVABLE PAR SON ID ! -->
      <div id="BlockMessagerie213969301-content">
<form id="BlockMessagerie213969301FormNextPage" style="display: none;">
      <input type="text" name="blockId" value="BlockMessagerie213969301">
      <input type="text" name="page" id="BlockMessagerie213969301page" value="0">
    </form>&nbsp;&nbsp;&nbsp;&nbsp;<span onclick="blockRequest('BlockMessagerie213969301FormNextPage','BlockMessagerie213969301-content','Messagerie.php');"">Page suivante&nbsp;&gt;</span></div>
    </div>

C'est comme si le navigateur/Javascript était *incapable* de réaliser qu'une fois un nouvel élément ajouté à sa page, il "existe" et est donc repérable à partir de son id

Que faire ?

[psychadelic]

de quel ID tu parles ?

et déjà, perso, ton code est un vrai fouillis. Este vraiment utile d'avoir des noms d'ID à rallonge ??

J'ai vu que tu utilise la bibliothéque jQuery, pour quoi n'utikise tu pas les fonctions Ajax de jQuery ??

c'est quoi la fonction jQuery_Genius ???

Toujours pour l'histoire de jQuery pourquoi utiliser un onClick sur ton <span plutout que de lui affecter ce click directement en jQuery ??

Et que donnent les console.log que je place ici dans ton 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
 
 
<p class="general_title">Messagerie</p>
 
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="/../libraries/JQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 
var jQuery3 = $.noConflict(true);//Remplacer le $ de JQuery par JQuery3
 
function blockRequest( formId, destId, phpDest)																// AJAX block request
{
 
	console.log( '-f-blockRequest -- formId, destId ', formId, destId );
 
	document.getElementById(destId).innerHTML = '<img src="/media/images/wait.gif" alt=""/>'; // Affichage du wait.gif en attendant la suite
	var
		forme    = jQuery_Genius("#"+formId)[0],																// document.getElementById(formId);
		formData = new FormData(forme),
		xhr      = new XMLHttpRequest()
	;
 
	alert(jQuery_Genius("#"+formId)[0]);
 
 
	xhr.open('POST', phpDest,true);
	xhr.onreadystatechange = function()
	{																			// On gère ici une requête asynchrone
		if (xhr.readyState === XMLHttpRequest.DONE)
 
			if (xhr.status === 200)
			{																														// Si le fichier est chargé sans erreur
 				console.log( '-f-readyState OK-- formId, destId ', formId, destId );
 
 
				document.getElementById(destId).innerHTML = "";														//xhr.responseText; // Et on affiche !
				document.getElementById(destId).insertAdjacentHTML('afterbegin',xhr.responseText);
			}
			else
			{ 																														// En cas d'erreur !
				alert('Une erreur est survenue !\n\nCode :' + xhr.status + '\n' + xhr.statusText);
			}
		}
	}
	xhr.send(formData);
}
</script>
 
<!-- PARTIE STATIQUE - LE FORMULAIRE CI DESSOUS EST PARFAITEMENT REPERABLE A PARTIR DE SON ID-->
<div class="block">
	<div>Messagerie</div>
	<form id="BlockMessagerie213969301-dform" style="display: none;">
		<input type="text" name="contexte" value="1">
		<input type="text" name="blockId" value="BlockMessagerie213969301">
	</form>
 
	<!-- PARTIE AJOUTEE DYNAMIQUEMENT - LE FORMULAIRE CI DESSOUS EST INTROUVABLE PAR SON ID ! -->
	<div id="BlockMessagerie213969301-content">
		<form id="BlockMessagerie213969301FormNextPage" style="display: none;">
			<input type="text" name="blockId" value="BlockMessagerie213969301">
			<input type="text" name="page" id="BlockMessagerie213969301page" value="0">
		</form>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span onclick="blockRequest('BlockMessagerie213969301FormNextPage','BlockMessagerie213969301-content','Messagerie.php');"">
			Page suivante&nbsp;&gt;
		</span>
	</div>
</div>