[Datatable] Uncaught DOMException lors de l'affichage d'un modal

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:

Citation:

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)

Je ne sais vraiment pas ce qui cloche.

Voici mon fichier.ts:

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

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">&times;</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

fait une recherche sur google avec l'erreur:

Citation:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:' is not a valid selector.

apparemment, peut être un problème d'id avec un espace ou des caractères spéciaux

Avant d'ouvrir toute discussion, je fais d'abord des recherches sur google. C'est quand je ne trouve pas de solution que je me tourne vers les forums. Et même après ça je continue de chercher.

d'accord, super. Est-ce que tu as regardé par rapport aux ID ?

Citation:

'querySelector' on 'Document': 'javascript:' is not a valid selector.

parce que c'est un problème de selector !