Discussion :

[Yannx02]

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 html :

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

1
2
3
...
<div id="content_line" class="conteneur"></div>
...

Code html du fichier 'template_line.html'

Code html :

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

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 javascript :

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
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

[Yannx02]

Personne pour m'aider ?

[SpaceFrog]

première remarque : un id doit être unique sur une page ...