Bonsoir
J'utilise datatables dans mon application Angular. J'ai inséré un bouton dans chaque ligne, me permettant d'afficher les données de chaque ligne dans un modal.
Et ça marche, sauf quand je clique sur un bouton, j'ai le message d'erreur suivant:
Je ne sais vraiment pas ce qui cloche.Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:' is not a valid selector.
at Object.getSelectorFromElement (http://localhost:4200/scripts.js:59427:35)
at Function._getParentFromElement (http://localhost:4200/scripts.js:61183:27)
at HTMLDocument._clearMenus (http://localhost:4200/scripts.js:61137:31)
at HTMLDocument.dispatch (http://localhost:4200/scripts.js:5183:27)
at HTMLDocument.elemData.handle (http://localhost:4200/scripts.js:4991:28)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2768:31)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2540:47)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2843:34)
at invokeTask (http://localhost:4200/polyfills.js:4089:14)
at HTMLDocument.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4115:17)
Voici mon fichier.ts:
Code ts : 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {DataTableDirective} from 'angular-datatables'; import {HttpClient} from '@angular/common/http'; import 'rxjs/Rx'; import { Observable } from 'rxjs/Rx'; import { CommonModule } from '@angular/common'; import { NgxSpinnerService } from 'ngx-spinner'; declare var $: any @Component({ selector: 'app-tbl-searching', templateUrl: './tbl-searching.component.html', styleUrls: ['./tbl-searching.component.scss'] }) export class TblSearchingComponent implements OnInit, AfterViewInit { dtColumnSearchingOptions: any = {}; @ViewChild(DataTableDirective) datatableElement: DataTableDirective; title = 'app'; public isNoResult: boolean = true; public empData: Object; public temp: Object=false; constructor( private http: HttpClient, private spinner: NgxSpinnerService) { } ngOnInit(): void { this.spinner.show(); // this.reloadData(); this.http.get('http://localhost:8080/gestion-scolaire/rest/compte/api/comptes').subscribe((resp: Response) => { this.empData = resp; this.temp = true; this.spinner.hide(); }); this.dtColumnSearchingOptions = { // ajax: 'fake-data/datatable-data.json', "language": { "url": "fake-data/French.json", buttons: { copyTitle: 'Ajouté au presse-papiers', copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.', copySuccess: { _: '%d lignes copiées', 1: '1 ligne copiée' } } }, columns: [ { title: '<input type="checkbox" id="checkall" />', render: function (data: any, type: any, full: any) { return '<input type="checkbox" class="checkthis" />'; } }, { title: 'firstName', data: 'firstName' }, { title: 'lastName', data: 'lastName' }, { title: 'Job', data: 'job' }, { title: 'Email', data: 'email' }, { title: 'Action', data: 'action' } ], responsive: true, dom: 'Blfrtip', buttons: [ { text: 'Copier', extend: 'copy', exportOptions: { columns: [ 1, 2, 3, 4, 5 ] } }, { text: 'Imprimer', extend: 'print', exportOptions: { columns: [ 1, 2, 3, 4, 5 ] } }, 'excel' ] }; $(document).on( 'click', '.getDetails', function () { $(".username").text(""); $(".username").text($(this).parents("tr").find(".fname").text()); $("#myModal").modal('show'); } ); }
Et voici mon fichier html:
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51 <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">User Name</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Hi : <span class="username"></span> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <table datatable [dtOptions]="dtColumnSearchingOptions" class="table table-striped row-border table-hover" *ngIf="this.temp"> <tr *ngFor="let compte of this.empData " > <td></td> <td class="fname">{{compte.firstName}}</td> <td>{{compte.lastName}}</td> <td>{{compte.job}}</td> <td>{{compte.email}}</td> <td> <button class=" getDetails btn btn-info btn-voir btn-xs" data-toggle="modal" ><i class="fas fa-eye"></i></button> <button class="btn btn-danger btn-supprimer btn-xs" ><i class="fa fa-trash" aria-hidden="true"></i></button> </td> </tr> <tfoot> <tr> <th></th> <th><input type="text" placeholder="Search firstName" name="search-firstName" class="form-control" /></th> <th><input type="text" placeholder="Search lastName" name="search-lastName" class="form-control" /></th> <th><input type="text" placeholder="Search job" name="search-job" class="form-control" /></th> <th><input type="text" placeholder="Search address" name="search-address" class="form-control" /></th> <th><input type="text" placeholder="Search email" name="search-email" class="form-control" /></th> </tr> </tfoot> </table>
Merci
Partager