getelementbyid undefined après importation via xmlhttprequest
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:
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> <span onclick="blockRequest('BlockMessagerie213969301FormNextPage','BlockMessagerie213969301-content','Messagerie.php');"">Page suivante ></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 ?
