Discussion :

[recycler]

Bonjour,
(Je débute dans ce domaine)
Je cherche à connaitre le nombre d'élément ".myClass" contenues dans un fichier texte.
pour cela je fais:

Code :

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

1
2
var myload;
$(myload).load("fichierTexte.txt .myClass");

Si j'ai bien compris, c'est un "objet" qui est retourné...Mais après?
".length" retourne "0"
J'en déduis que je ne l'utilise pas comme il faudrait et qu'il me manque quelques notions.
Une petite indication pour me mettre sur la bonne voie?
Merci d'avance.

[psychadelic]

Tu à du lire la doc de travers..

La méthose Load de jQuery permet de charger un fichier et de la placer à l'intérieur d'un élément DOM de ta page html.
le second argument permet de n'en charger qu'une partie, en se basant sur le principe que le fichier chargé soit au format HTML respectant les règles d'écriture pour les éléments devant se placer entre les balises BODY.

le second argument étant alors la référence de l'id (donc unique) d'un des éléments de ce fichier.

cette méthode ne charge directement pas les éléments d'une même classe.

et attention, cette méthode fait un appel Ajax, elle est donc asynchrone.
Ce qui signifie que tu ne peut tester le résultat de l'opération que dans son callback (ou allrs utiliser les promesses, mais ça va faire compliqué pour toi si tu démarre en JS)

[recycler]

Ok merci pour la réponse! C'est déjà plus clair concernant "load"
Mon but est de boucler ( for ou while) sur le nombre de "div" ayant pour classe "myClass" présentes dans le fichier, d’où le besoin de connaitre leur nombre et de les placer dans le bon élément en fonction de l' "id" correspondant.

Mon fichier est un simple fichier texte contenant diverses balises:

Code HTML :

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

1
2
3
4
5
6
7
<div id="sourcesAll">
<div class="sources" id="source_1"> blabla </div>
<div class="sources" id="source_2"> blabla </div>
<div class="sources" id="source_3"> blabla </div>
<div class="sources" id="source_4"> blabla </div>
etc..
</div>

Le code suivant fonctionne très bien, mais le problème c'est que je ne connais pas le nb d'incrémentations pour "i", à l'avance vue que le fichier texte est mis à jour dans le temps:

Code :

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

1
2
3
4
5
6
7
8
var myStringNote=""; 
var myStringSource="";  
 
for (var i = 1; i <= 4 ; i++) {
		myStringNote="#note_"+i;
		myStringSource="fichier.txt  #source_"+i;
		$(myStringNote).load(myStringSource);
		}

Donc je cherche un moyen pour résoudre ce problème de boucle.
Maintenant si il y a une méthode plus propre pour obtenir le même résultat je suis preneur.

OOPS je viens de voir le message de " jreaux62" je teste et je reviens si je cale ! Merci

[recycler]

Bon, j'ai appliqué la méthode de "jreaux62" à mon code et ça fonctionne très bien ! (merci).
Maintenant j'ai un autre petit soucis:
lorsque ma boucle "for"a fini de placer dans ma page les "div" importées du fichier texte, elles ne s'affichent pas... sauf si je place une "alerte" dans mon code, comme si à la fermeture de l'alerte, cela forçait le rafraichissement de la page...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
alert(count); // count = nombre de "div" à importer du fichier
var myStringNote=""; 
var myStringSource="";  
 
for (var i = 1; i <= count ; i++) {
		myStringNote="#note_"+i;
		myStringSource="fichier.txt  #source_"+i;
		$(myStringNote).load(myStringSource);
		}

[Invité]

Je ne vois rien qui ressemble a mon code...

1- Montre le code complet.

2- et relis le message de psychadelic.

[recycler]

le 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
var count;
	 $(window).load('ficheier.txt',function(ftxt){
	console.log('fichier chargé');
	// 1- on met le contenu dans la div #temporaire
	var temp = $('#temporaire').prepend('div').attr('id','temp').css({'display':'none'});
	temp.html(ftxt);
 
	// 2- on compte le nombre d elements ayant la classe '.sources'
	var myClasses = $('#temp .sources');
	console.log('nombre .sources : '+myClasses.length); 
	count=myClasses.length;
	temp.remove();
	loadDoc();  
	loadNotation();
});
 
function loadDoc() {  
	  $("#content_loaded").load("fichier.txt #video_content");
}
 
 
function loadNotation() {
	alert(count+" notes chargées");
	var myStringNote="";
	var myStringSource="";	
 
	for (var i = 1; i <= count ; i++) {
		myStringNote="#note_"+i;
		myStringSource="fichier.txt #source_"+i;
		$(myStringNote).load(myStringSource);
 
		} 
 
}

[psychadelic]

Maintenant j'ai un autre petit soucis:
lorsque ma boucle "for"a fini de placer dans ma page les "div" importées du fichier texte, elles ne s'affichent pas... sauf si je place une "alerte" dans mon code, comme si à la fermeture de l'alerte, cela forçait le rafraîchissement de la page...

c'est parce que la méthode Load de jQuery est une fonction ASYNCHRONE comme je te l'ai précisé dans mon post précédent.

ça signifie que les instructions qui suivent une commande asynchrone sont exécutés sans attendre que l'instruction asynchrone soit terminée.

le temps que tu lise ton alerte lui laisse le temps de terminer son load, ce qui n'a rien à voir.

Sinon, tu te complique vraiment la vie, tu n'a pas besoin de faire "36" load.

fichier bibi.htm

Code html :

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

1
2
3
4
5
6
<div id="sourcesAll">
  <div class="sources"> blabla 1</div>
  <div class="sources"> blabla 2</div>
  <div class="sources"> blabla 3</div>
  <div class="sources"> blabla 4</div>
</div>

chargement des notes (changer au besoin le lien vers la libraire jQuery)

Code html :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>JQuery load</title>
</head>
<body>
  <button id="Load_GO">charger les notes</button>
  <h4>note 4</h4>
  <div id="Note_4"></div>  
 
  <h4>note 3</h4>
  <div id="Note_3"></div>  
 
  <h4>note 1</h4>
  <div id="Note_1"></div>  
 
  <h4>note 2</h4>
  <div id="Note_2"></div>  
 
  <script src="jquery3.1.min.js" ></script>
  <script>
    $('#Load_GO').click(function()
    {
      let $temp = $('<div />');
      $temp.load("bibi.htm #sourcesAll", function()
      {
        let $All_Notes = $temp.find(".sources");
        for ( let i=0; i<$All_Notes.length; i++ )
        {
          $('#Note_'+(i+1)).html( $All_Notes.eq(i).html() );
        }
      });
    });
  </script>
</body>
</html>

ça ce règle en moins de 10 lignes de code ( pour juste la partie du load + la variable $temp )

et utiliser des let plutôt que des var, histoire de s'assurer de leur portée et de leur libération mémoire une fois la fonction achevée

[recycler]

Merci "psychadelic", pour ces bonnes pratiques ! encore une fois je débute et du coup ça me fait avancer.
J'ai encore des questions sur ce sujet:

- ton code est déclenché dans l'évènement "click" du bouton, je préfère qu'il se déclenche au chargement de la page.
Quelle est la solution la plus adaptée dans ce cas?
$(window).load..?
$(document).load..?
autre chose?

- je vois que tu utilises un fichier ".htm", est-ce un impératif d'utiliser un fichier .htm ou .xml à la place de mon .txt pour un fonctionnement sans surprise? ..dans le cas d'un fichier .htm est-il nécessaire qu'il soit conforme aux règles du html/xhtml : <!DOCTYPE...><html...><head><body> etc... J'ai dans la console un message me disant que mon .txt est un xml "mal formé" ( c'est évident )
est-ce que je peux l'ignorer ou bien est-ce que cela pose un problème?
Bonne journée.

[Invité]

Bonjour,

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
$(document).load('fichier.txt',function(ftxt){
	console.log('fichier chargé');
	// 1- on crée un div (masqué), dans lequel on met le contenu
	var temp = $('body').prepend('div').attr('id','temp').css({'display':'none'});
	temp.html(ftxt);
 
	// 2- on compte le nombre d elements ayant la classe 'myClass'
	var myClasses = $('#temp .myClass');
	console.log('nombre .myClass : '+myClasses.length);
 
	// 3a-réaffichage dans le div
	temp.html('');
	myClasses.each( function(thediv){
		temp.append(thediv).css({'display':'block'});
	});
	// 3b- OU : on supprime le div temporaire
//	temp.remove();
});