jquery UI -tooltip

Version imprimable

jquery UI -tooltip

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:

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

19/05/2021, 13h16
krakatoa

as tu un message d'erreur dans la console ?
19/05/2021, 14h38
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

tu recuperes les données via le httpClient de angular

ça peut fonctionner ?

Code:

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 
}
				});

});

19/05/2021, 17h31
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 ?

peut être comme ça :

Code:

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;
}
 
 
                                        }
				});

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

Code:

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); });
					}
				});	
			});
		}

Citation:

Uncaught TypeError: this.httpclient is undefined

Code:

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); });
					}
				});	
			});
		}

21/05/2021, 11h00
Wells

Hum, le that correspond à mon composant à priori:

Citation:

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); });
~~~~~~~~~~
21/05/2021, 11h03
krakatoa

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