Charger un fichier template HTML plusieurs fois dans une div
Bonjour à tous,
Je rencontre un petit problème lors du chargement un fichier html en Jquery.
je dispose d'un fichier "demande.php" contenant un div dans lequel je voudrais ajouter des lignes dont le code html se trouve dans un fichier "template_line.html".
Lors de l'ajout des lignes existantes, je récupère le code présent dans le fichier html que j'ajoute dans mon div. Je modifie la dernière ligne ajoutée avec les informations recueillies en base de données.
Mon souci est que les lignes sont ajoutés avec la méthode .append de façon aléatoire.
Code du fichier demande.php
Code:
1
2
3
| ...
<div id="content_line" class="conteneur"></div>
... |
Code html du fichier 'template_line.html'
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="lf_line">
<div class ="l01">
<div id="numlig"><input id="sai_numlig" type="text" readonly="true" /></div>
<div id="codart"><input id="sai_codart" name="sai_codart" type="text" /></div>
<div id="descart"><input id="sai_descarticle" name="sai_descarticle" type="text"/></div>
</div>
<div class="l02">
<div id="comment">
<input id="sai_comment" type="text" value=""/>
</div>
</div>
</div> |
Code JS :
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
| function addNvlLigne(ligne) {
$.get("template_line.html", function(data) {
$('#content_line').append(data);
})
.always(function() {
if( typeof(ligne) != 'undefined' ) {
$('div.lf_line:last').find('input.numlig').val(ligne['NumLigne']);
$('div.lf_line:last').find('input.numlig').val(ligne['CodArticle']);
$('div.lf_line:last').find('#sai_descarticle').val(ligne['LIG_DesignArticle']);
$('div.lf_line:last').find('#sai_comment').val(ligne['Commentaire']);
}
}
function chargeLignesLitige (n_demande) {
$('#content_line').html("");
$.ajax({
type: "POST",
url: "infoslignes.php",
data: 'num='+n_demande,
success: function(response){
var obj = jQuery.parseJSON(response);
$.each(obj, function(index) {
addNvlLigne(this);
});
//Ajout d'une ligne vierge
addNvlLigne();
}
});
}
$(document).ready(function(){
chargeLignesLitige
}); |
Ma question : comment faire pour que mes lignes soient insérées dans le DOM dans l'ordre des exécutions de la méthode append ?
Merci d'avance pour votre aide
