Editor: change table ajax url according to editor.mode() populated inside modal window

matissg

I have modal window for both - "New record" and "Edit record". Inside my modal I'm trying to populate another DataTable according to action - new/edit. For each action there should be different data used, so I have to somehow change my data source.

At the moment I'm trying to modify ajax url for my table inside modal when modal is opened:

  editor.on('open', function() {

    var editor_mode = editor.mode();
    if (editor_mode === 'create') {
      json_url = '/medium/positions';
    } else if (editor_mode === 'edit') {
      json_url = '/prices/_id_/positions';
    }

      var price_media_positions_table = $('#price-media-positions-table').DataTable({
        dom: "Btp",
        pageLength: 5,
        rowId: 'id',
        serverSide: true,
        ajax: {
          type: "GET",
          url: json_url
        }
        // more code...
      });

  });

This approach does not seem to be working as I get Cannot reinitialise DataTable error.

It seems I'm stuck with two things:
1) How do I change data source for my table inside modal when I have new/exiting record modal open?
2) How to have fresh data from my server when my modal is opened?

I'll be happy for any hint. Thank you.

colin

Hi @matissg ,

In that table initialisation, try adding destroy - then it will always start the table again. Another option is try retrieve if the old table is still present.

Cheers,

Colin

matissg

@colin Thank you, however
1) retrieve: true does not help as it loads table in my modal only once and it stays there without data refresh when I try to open modal for different record.
2) destroy: true does not trigger my table to update with fresh data from server. In addition I get this error: datatables.min.self-25237993992294c082cabb4eeaf3f010264b4b71dcddf23561bc88f4cbd23d5c.js?body=1:90 Uncaught TypeError: Cannot read property 'style' of undefined

and I see there is visually added ID data as column, which should not happen as I've hidden it with

columnDefs: [{
  targets: [-1],
  visible: false
}],

I'd like to always start with fresh data for my table in modal. How can I make my destroy: true to work properly?

MSLtd

Hello @matissg, by the sounds of things what you're looking for is ajax.reload(). You can change the URL that the ajax points to using ajax.url().

Hope this helps!

colin

Ah, I see, As @MSLtd said then, yep, reload the ajax, or give a new URL with ajax.url().load()

C