Discussion :

[Wells]

Bonjour, j'ai un projet ou je souhaite créer un popup sur une élément web en utilisant le plugin jquery-ui tolltip. Ca marche bien sauf que je souhaite récupérer le contenu d'une page html pour l'injecter dans le pop up.

En php ça marche très bien, en angular voici le code :

Code :

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

1
2
3
4
5
				$("TABLE TBODY TD A.pop").tooltip({
					items: "[popup]",
					open: function( event, ui ) {console.log('la');$('.ui-tooltip').show(); },
					content: function(callback) {$.get('http://localhost:4200/carte_simple/' + $(this).attr('popup'), {}, function(data) {console.log('ici');callback(data);});}
				});

Le soucis c'est que la page http://localhost:4200/carte_simple/XXX me renvoi tjs une 404.
Pourtant si je la lance dans mon navigateur elle répond sans soucis et affiche ce qu'elle doit afficher.

Du coup je doit passer à coté d'un truc ^^

[krakatoa]

as tu un message d'erreur dans la console ?

[Wells]

Non tout fonctionne bien, simplement la page qui est appelée dans le content fait un 404. D'ailleurs j'avais testé le plugin matTooltip et j'avais le même soucis. J'ai l'impression que quand je fait un get.http sur une page angular, ben ça marche pas

[krakatoa]

tu recuperes les données via le httpClient de angular

ça peut fonctionner ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12

this.httpclient.get(..............).subscribe((data: any) => {

$("TABLE TBODY TD A.pop").tooltip({
					items: "[popup]",
					open: function( event, ui ) {console.log('la');$('.ui-tooltip').show(); },
					content: data 
}
				});

});

[Wells]

alors le truc c'est que le get http se déclenche au passage de la souris sur la ligne (élément html TD). C'est à ce moment la que je récupère l'ID de la fiche que je veux afficher dans le pop-up.

Si je suis bien ta proposition, le popup ne se chargera qu'une fois non, et ne sera pas différent pour chaque ligne ?

[krakatoa]

peut être comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
				$("TABLE TBODY TD A.pop").tooltip({
					items: "[popup]",
					open: function( event, ui ) {console.log('la');$('.ui-tooltip').show(); },
					content: () => {
 
 
this.httpclient.get('http://localhost:4200/carte_simple/' + $(this).attr('popup')).subscribe((data: any) => {
  return data;
}
 
 
                                        }
				});

[Wells]

Je pense que le this n'est plus celui d'angular mais celui de jquery:

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
    ngAfterContentInit() 
		{
		$( document ).ready(function() 
			{
				$("TABLE TBODY TD A").tooltip({
					items: "[popup]",
					open: function( event, ui ) {$('.ui-tooltip').show(); },
					content: function(callback) 
					{
					console.log($(this).attr('popup'));
					//$.get('http://localhost:4200/carte_simple/' + $(this).attr('popup'), {}, function(data) {console.log('ici');callback(data);});
					this.httpclient.get('http://localhost:4200/carte_simple/' + $(this).attr('popup')).subscribe((data: any) => { console.log(data); });
					}
				});	
			});
		}

Uncaught TypeError: this.httpclient is undefined

[krakatoa]

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
 
 
  ngAfterContentInit() 
		{
let that = this;
 
		$( document ).ready(function() 
			{
				$("TABLE TBODY TD A").tooltip({
					items: "[popup]",
					open: function( event, ui ) {$('.ui-tooltip').show(); },
					content: function(callback) 
					{
					console.log($(this).attr('popup'));
					//$.get('http://localhost:4200/carte_simple/' + $(this).attr('popup'), {}, function(data) {console.log('ici');callback(data);});
					that.httpclient.get('http://localhost:4200/carte_simple/' + $(this).attr('popup')).subscribe((data: any) => { console.log(data); });
					}
				});	
			});
		}

[Wells]

Hum, le that correspond à mon composant à priori:

ERROR in src/app/page/cartes.component.ts:84:11 - error TS2339: Property 'httpclient' does not exist on type 'CartesComponent'.

84 that.httpclient.get('http://localhost:4200/carte_simple/' + $(this).attr('popup')).subscribe((data: any) => { callback(data); });
~~~~~~~~~~

[krakatoa]

tu as bien importé Httpclient et declaré dans le constructor ?