Cacher l'icône de loading qu'une fois des contenus rajoutés

Version imprimable

20/04/2020, 14h46
soeursourire

Cacher l'icône de loading qu'une fois des contenus rajoutés

Bonjour,

Je cherche à cacher l'icône de loading qu'une fois que j'ai ajouté mes contenus. J'ai tenté d'utiliser la fonction end comme ceci:

Code:

$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>").end().parent().parent().find('.loading').css('display','none');

mais cela ne fonctionne pas et le loading ne disparait pas.

J'ai tenté

Code:

$(".articleList").parent().parent().find('.loading').css('display','none');

depuis la console et cela le fait bien disparaitre donc le problème ne vient pas du degré de parent..

Comment résoudre ce problème? J'aurais voulu éviter de choisir un timeout et que cela disparaisse dès que les contenus sont affichés.
Merci
Sophie
20/04/2020, 18h01
Toufik83

Bonjour,

Quelle-est la structure html que tu utilises ?

Bonjour,

Je ne peux malheureusement pas vous donnez la page vu qu'il s'agit d'un site privé avec login. Je peux vous donner le bout de code qui contient ces articles si cela peut vous aider? ou est-ce que vous avez besoin d'autre chose?

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
<div class="sf_colsOut sf_1col_1_100 articleList" data-placeholder-label="ARTICLE LIST" style="">
        <div id="Wrapper_TF8C13CD0007_Col00" class="sf_colsIn sf_1col_1in_100">
 
			<!-- LIST HTML -->
			<div id="Wrapper_TF8C13CD0003_wrapper_list_server" class="sf_colsIn">
 
				<div id="Wrapper_TF8C13CD0003_list_paging_server" class="list-paging">
					<div id="Wrapper_TF8C13CD0003_list_paging_left_top_server" class="list-paging-left">5 solution(s)</div>
				</div>
				<div class="list-content">
					<!-- 1st row -->
					<div class="content">
						<div class="sf_colsOut col-sm-6 content-left" data-placeholder-label="CONTENT LEFT">
						</div>
						<div class="sf_colsOut col-sm-6 content-right" data-placeholder-label="CONTENT RIGHT">
						</div>
					</div>
					<!-- 2nd row -->
					<div class="content">
						<div class="sf_colsOut col-sm-6 content-left" data-placeholder-label="CONTENT LEFT">
						</div>
						<div class="sf_colsOut col-sm-6 content-right" data-placeholder-label="CONTENT RIGHT">
						</div>
					</div>
				</div>
			</div>
 
        </div>
</div>

Merci

21/04/2020, 11h37
Toufik83

Bonjour,

Avec le code que tu as montré, le .loading n'existe pas, donc il est impossible de deviner son emplacement pour qu'ensuite le cibler...
Quel est l'emplacement de .loading ?
21/04/2020, 11h44
Invité
Bonjour,
- jQuery.when()
Code:

$.when( ... ).then( ... );

Merci pour le conseil. Je ne suis pas sûre d'avoir bien compris le fonctionnement des when.then.

J'ai tenté ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function appendContents(urlStr){
	$("<div>").load(urlStr + " .list-content", function() {
		$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
	});
}
 
function loadNextPage() {
	if(nbPages >1) {
 
		$('.loading').css('display','block');
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
 
		$.when.appendContents(urlStr).then(function(){ 
			$('.loading').css('display','none');
		});
 
		p++;
 
	}
 
};

Mais j'ai cette erreur dans la console: $.when.appendContents is not a function

Je viens de tenter ceci:

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
 
function appendContents(e,urlStr){
 
	$('.loading').css('display','block');
 
	$("<div>").load(urlStr + " .list-content", function() {
		$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
	});
 
	e.preventDefault();
}
 
function loadNextPage(e) {
	if(nbPages >1) {
 
 
		console.log('loading show');
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
		$.when( appendContents(e,urlStr) ).done(function(){
			$('.loading').css('display','none');
		});
 
 
		p++;
 
		if(p > nbPages){
			$(".button-load").css("display","none");
		}
 
	}
 
	e.preventDefault();
 
};
 
 
$('button.addPage').click(function(e){
	loadNextPage(e);
  	e.preventDefault();
 
});

Mais le problème est que mon loading n'apparait plus du tout maintenant:-(

21/04/2020, 17h48
Invité

Pourtant, il y a des exemples, qui me semblent compréhensibles..
22/04/2020, 09h21
soeursourire

Ben si vous pouviez m'en donner un ça m'aiderait peut-être?
22/04/2020, 10h03
Invité
Bonjour,

Déjà, il faudrait comprendre ce que tu veux faire. :koi:
Ou plus exactement, QUAND et COMMENT tu veux le faire.
- ".articleList" : normalement, quand on utilise une classe, c'est qu'on a PLUSIEURS éléments. Est-ce le cas ? (sinon, un id est plus adapté)
- On voit dans tes derniers codes un .load(...) : donc tu recharges une partie de la page (ou PLUSIEURS ?)
- var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr; : c'est pour une pagination ? (les variables myURL, p, categ, yr ne sont pas définies !)
EXPLIQUE un peu mieux les conditions.
22/04/2020, 10h19
soeursourire

Ok je vais essayer de mieux expliquer:

Je reprends un site donc je suis d'accord un Id aurait été mieux mais pour le moment je ne peux pas changer ça, ça redemanderait du développement.

Donc j'ai une page sur laquelle j'ai un widget qui charge 4 articles.
J'ai une seconde page myUrl sur laquelle j'ai aussi un widget qui charge 4 articles mais qui ne comporte QUE ces 4 articles. Elle va me servir à rajouter 4 contenus sur la 1ere page quand je clique sur un bouton "afficher plus de resultats".

Donc mon code sert à faire en sorte que quand je clique sur le bouton, je vais rechercher le code HTML de la seconde page et je l'ajoute au code HTML de ma 1ere page. Pendant que cet ajout se passe, j'affiche un loading qui doit disparaitre qu'une fois que mes 4 nouveaux articles sont ajoutés.

Jusqu'à maintenant j'affichais ce loading pendant un temps donné mais je ne trouve pas cela très "propre" vu que le temps de chargement des nouveaux articles ne sera jamais exactement le même. D'où ma recherche pour afficher ce loading quand je clique sur le bouton pour charger de nouveaux articles et le faire disparaitre dès que ce chargement a terminé.

J'espère que c'est plus compréhensible?

1- Montre le code "qui marche mais pas très propre".

2- A priori, on utilisera plutôt ici $.ajax() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('le_button').on( 'click', function(){
 
	$('.loading').show(); // on affiche
 
	$.ajax({
		url: '.....', // la page à charger
		...
		...
	}).done(function( data ) {
		$('.articleList').append(.... data .....);
		$('.loading').hide(); // on masque
	});
 
});

Merci infiniment pour les conseils, je vais regarder de ce côté là alors.

Voici le code qui marche mais dont le timing est approximatif:

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
// 1ère page loadée a: les 4 premiers articles 
var nbArticles = parseInt($('.list-paging-left').text().split('p')[0]);
var nbPages = Math.ceil(nbArticles / 4);
var myURL = "http://site.com/solutions-services/services-new-scrolling";
var categ = window.location.href.split("category=")[1];
var yr = window.location.href.split("year=")[1];
if (categ == null) {	categ = "all";	}
if (yr == null) {	   yr = "all";	} 	
var p = 2;
 
function callbackHideLoading() {
  $('.loading').css('display','none');
};
 
function loadNextPage(callbackHideLoading) {
	if(nbPages >1) {
 
		$('.loading').css('display','block');
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
		$("<div>").load(urlStr + " .list-content", function() {
			$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
		});
 
		setTimeout(callbackHideLoading,1000);
 
		p++;
 
          	if(p > nbPages){
			$(".button-load").css("display","none");
		}
	}
 
};
 
 
$('button.addPage').click(function(e){
	loadNextPage(callbackHideLoading);
  	e.preventDefault();
 
});

Hello,

J'ai tenté ce code mais c'est comme si je ne passais pas dans success ou si la page se rechargeait:

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
$('button.addPage').on( 'click', function(e){
 
    e.preventDefault();
 
	$('.loading').show(); // on affiche
 
	var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
 
	$.ajax({
		url: urlStr, // la page à charger
		type : 'GET', // Le type de la requête HTTP
		dataType : 'html', // Le type de données à recevoir, ici, du HTML
		data: {
            txtsearch: $(".list-content").html()
        },
		success: function (data){
			console.log('SUCCESS DATA');
			$(".articleList").append("<div class='list-content'>" + data + "</div>");
			$('.loading').hide(); // on masque
		}
 
	});
 
 
 
});

Bonjour,

à voir :

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
$(function(){
 
	// -------
	// 1ère page loadée a: les 4 premiers articles 
	var nbArticles = parseInt($('.list-paging-left').text().split('p')[0]);
	var nbPages = Math.ceil(nbArticles / 4);
	var myURL = "http://site.com/solutions-services/services-new-scrolling";
	var categ = window.location.href.split("category=")[1];
	var yr = window.location.href.split("year=")[1];
	if (categ == null) { categ = "all";	}
	if (yr == null) { yr = "all";	} 	
	var p = 2;
	// -------
	$(".button-load").hide();	// on masque
	// -------
	$('button.addPage').on('click', function(e){
		loadNextPage();
		e.preventDefault();
	});
	// -------
 
});
 
function loadNextPage() {
	if(nbPages >1) {
 
		$('.loading').show();	// on affiche
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
		$("<div>").load(urlStr + " .list-content", function() {
			$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
			$('.loading').hide();	// on masque
		});
 
		p++;
 
        if(p > nbPages){
			$(".button-load").hide();	// on masque le bouton
		}
	}
};

Un grand merci pour votre grande aide.
J'ai légèrement changé le code parce qu'il faut que le bouton button-load soit présent au départ.
Du coup ça marche bien sauf que bizarrement ce bouton apparait deux fois:-(

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
 
// -------
// 1ère page loadée a: les 4 premiers articles 
var nbArticles = parseInt($('.list-paging-left').text().split('p')[0]);
var nbPages = Math.ceil(nbArticles / 4);
var myURL = "http://site/solutions-services/services-new-scrolling";
var categ = window.location.href.split("category=")[1];
var yr = window.location.href.split("year=")[1];
if (categ == null) { categ = "all";	}
if (yr == null) { yr = "all";	} 	
var p = 2;
// -------
 
// -------
$('button.addPage').on('click', function(e){
        loadNextPage();
        e.preventDefault();
});
// -------
 
 
function loadNextPage() {
	if(nbPages >1) {
 
		$(".button-load").hide();
 
		$('.loading').show();	// on affiche
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
		$("<div>").load(urlStr + " .list-content", function() {
			$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
			$('.loading').hide();	// on masque
		});
 
		p++;
 
        if(p > nbPages){
			$(".button-load").hide();	// on masque le bouton
		}
		else {
			$(".button-load").show();
		}
	}
};

j'ai peut etre trouvé une solution pour le bouton qui apparait deux fois. Je vais tester avec plus de contenus aussi.
Un grand merci!

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
 
// -------
// 1ère page loadée a: les 4 premiers articles 
var nbArticles = parseInt($('.list-paging-left').text().split('p')[0]);
var nbPages = Math.ceil(nbArticles / 4);
var myURL = "http://site/solutions-services/services-new-scrolling";
var categ = window.location.href.split("category=")[1];
var yr = window.location.href.split("year=")[1];
if (categ == null) { categ = "all";	}
if (yr == null) { yr = "all";	} 	
var p = 2;
// -------
 
// -------
$('button.addPage').on('click', function(e){
        loadNextPage();
		$(".button-load").hide();
        e.preventDefault();
});
// -------
 
 
function loadNextPage() {
	if(nbPages >1) {
 
		$('.loading').show();	// on affiche
 
		var urlStr = myURL + "?pagenumber=" + p + "&category=" + categ + "&year=" + yr;
		$("<div>").load(urlStr + " .list-content", function() {
			$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
			$('.loading').hide();	// on masque
		});
 
		p++;
 
        if(p > nbPages){
			$(".button-load").hide();	// on masque le bouton
		}
		else {
			$(".button-load").show();
		}
	}
};