Angular 6 Jquery Database Can't reload table after Add, Delete or Update Event

c0micrage

HI,

I implemented a dataTable in my Angular 6 project. I perform an Add, Edit and Delete transaction change to the database with ng-bootstrap modal popup. The db changes are working but I am having errors when I try to reload the table after my web api service calls.

Any help is appreciated. Thanks

I tried the following code

this.dataTable.data.reload();  

Here is the function which I like to reload the table after the service web api is called.

  editMeeting(content) {
 
    this.meetingRequest.MeetingDt =  this.MeetingDt.toDateString();
    this.meetingRequest.PublicDate =  this.PublicDate.toJSON();
    this.meetingRequest.MeetingType = this.displayMessage;


    this.meetingDateService.editMeetingDate(this.meetingRequest).subscribe((data : any)=>{
    },
    (err : HttpErrorResponse)=>{
      console.log('editMeeting ==============> ' + err) 
    });
    this.modalService.dismissAll();

this.dataTable.data.reload();    <----- getting an error

  }

Here is my component.ts typescript code so far

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { MeetingDateService } from '../../services/meetingdateservice.service';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';
import { FormsModule, FormGroup, Validators, FormControl, FormBuilder }   from '@angular/forms';
import { NgbModalConfig, NgbModal, ModalDismissReasons, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateStruct, NgbDateAdapter, NgbCalendar, NgbDateNativeAdapter} from '@ng-bootstrap/ng-bootstrap';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner'; 
import { Variable } from '@angular/compiler/src/render3/r3_ast';
import { isDate } from 'util';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-meeting-dates',
  templateUrl: './meeting-dates.component.html',
  styleUrls: ['./meeting-dates.component.scss'],
  providers: [NgbModalConfig, NgbModal, {provide: NgbDateAdapter,  useClass: NgbDateNativeAdapter}]
})

export class MeetingDatesComponent implements OnInit {
 
  MeetingDt:Date;
  PublicDate:Date;
  MeetingId : Number;
  MeetingType: "";
  UserName: ""; 

  public meetingRequest = {
    "MeetingId" : Number,
    "MeetingDt":  "",
    "PublicDate": "",
    "MeetingType": "",
    "UserName": ""
    };
  
  //model: Date;                                      
  date: { year: number, month: number }
 
  closeResult: string;
  meetingDateForm : FormGroup;
  displayMessage = 'Select Meeting Types';
  types = ['Foreign Vet', 'NACIQI', 'NCFMEA']
  meetings: any[];
  meetingtypes: any[];
  dataTable: any;
  statusMessage: string = 'Loading data. Please wait...';
 
  constructor(private spinnerService: Ng4LoadingSpinnerService, config: NgbModalConfig, 
      private modalService: NgbModal, private meetingDateService: MeetingDateService, 
      private chRef: ChangeDetectorRef, private formBuilder: FormBuilder )  
  {
 
config.backdrop = 'static';
config.keyboard = false;

  }
   
  ngOnInit() {
    this.meetingDateForm = new FormGroup({
      MeetingDate: new FormControl('', [
        Validators.required
      ])
  });


    this.spinnerService.show();

      this.getMeetingDates();

      this.meetingRequest.UserName = sessionStorage.getItem('userName');
      console.log('meetingRequest-username =========> '  + this.meetingRequest.UserName);
      this.spinnerService.hide();
  }
   

  getMeetingDatesTypes() {
    this.meetingDateService.getMeetingDates()
    .subscribe(( data: any[] )=> {
      this.meetings = data;
      (error) => {
               this.statusMessage = 'Problem with the service. Please try again later.';  
               console.error(error);
            }
      ;

      this.chRef.detectChanges();
      const table: any = $('table');
      this.dataTable = table.DataTable();
    });
  }

colin

Hi @c0micrage ,

That's a lot of code, and you haven't said what errors you're getting!

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin