django and editor

ECEGROUPE

hello i want use datatable with django API the jscode is

 // Searchbar class
DataTable.ext.classes.sFilterInput = "form-control";

var editor = new DataTable.Editor({


  ajax: {
    // create: {
    //   type: 'POST',
      
    //   url: 'http://127.0.0.1:8000/table_collabs/', // URL for creating a new record
    // },
    edit: {
      type: 'PUT',
      url: (data) => {
        if ('LOGIN_AD' in data) {
          console.log('Editing record with LOGIN_AD:', data.LOGIN_AD);
          return `http://127.0.0.1:8000/table_collabs_edit/${data.LOGIN_AD}`;
        } else {
          console.error('Data object does not contain LOGIN_AD property.');
      }
    }
  },
    remove: {
      type: 'DELETE',
      dataSrc: '',
      url: function (data) {
        console.log('Editing record with LOGIN_AD:', data);
        return 'http://127.0.0.1:8000/table_collabs_edit/' + data ; // URL for deleting a specific record
      }
    },
    // retrieve: {
    //   type: 'GET',
      // dataSrc: '',
    //   url: function (data) {
        // console.log('Editing record with LOGIN_AD:', data.LOGIN_AD);
    //     return 'http://127.0.0.1:8000/table_collabs_edit/' + data.LOGIN_AD; // URL for retrieving a specific record
    //   }
    // },
    
  },
  table: "#example",
  idSrc: "LOGIN_AD",
  fields: [
    {
      "label": "DROIT_AD",
      "name": "DROIT_AD",
      "type": "text"
    },
    {
      "label": "COLLABORATEUR_AD",
      "name": "COLLABORATEUR_AD",
      "type": "text"
    },
  ],

});

var table = new DataTable("#example", {
  language: {
    url: staticUrl,
  },

  ajax: {
    url: 'http://127.0.0.1:8000/table_collabs/?format=json',
    type: "GET",
    dataType: "json",
    dataSrc: '',
  },
  buttons: [
    { extend: "create", editor },
    { extend: "edit", editor },
    { extend: "remove", editor }
  ],
  columns: [
    // BASE COLLABORATEUR
    { data: "LOGIN_AD", name: "LOGIN_AD" },
    { data: "COLLABORATEUR_AD", name: "COLLABORATEUR_AD",className: "editable" },
    { data: "MAIL_AD", name: "MAIL_AD" },
    { data: "TELEPHONE_AD", name: "TELEPHONE_AD" },
    { data: "MOBILE_AD", name: "MOBILE_AD" },
    { data: "TITLE_AD", name: "TITLE_AD" },
    { data: "BUREAU_AD", name: "BUREAU_AD" },
    { data: "DROIT_AD", name: "DROIT_AD", className: "editable" }
  ],

  dom: "QBfrt" + "<'row g-2 mt-2'<'col-12 col-md-6 col-xl-4 d-flex align-items-center'i><'col-12 col-md-6 col-xl-8'p>>",
  select: true,
  processing: true,
  deferRender: true,
  scrollX: true,

  initComplete: function () {
    // Move the searchbar
    $("#example_filter").detach().prependTo(".zone-searchbar");

    // Move the searchbuilder
    $(".dtsb-searchBuilder").detach().prependTo(".zone-searchbuilder");
  }
});

// Activate the bubble editor on click of a table cell
table.on("click", "tbody td.editable", function (e) {
  editor.bubble(this);
});

// start: Resize observer (execute 2erreurs dans la consoles)

// ResizeObserver to ensure header column widths are adjusted when the containing div resizes.
// Not supported on IE
var observer = window.ResizeObserver ? new ResizeObserver(function (entries) {
  $("#example").DataTable().columns.adjust();
}) : null;

// Function to add a datatable to the ResizeObserver entries array
resizeHandler = function ($table) {
  if (observer) {
    observer.observe($table[0]);
  }
};

resizeHandler($("#example"));



// end: Resize observer

with this code display table is ok but when i use editor i always have this error

VM2973:6 Uncaught TypeError: a.url.replace is not a function
    at R.ae [as _ajax] (<anonymous>:6:31961)
    at <anonymous>:6:42687
    at R._e [as _event] (<anonymous>:6:35284)
    at R.Re [as _submit] (<anonymous>:6:42591)
    at <anonymous>:6:27373
    at R._e [as _event] (<anonymous>:6:35284)
    at o (<anonymous>:6:27295)
    at R.$t [as submit] (<anonymous>:6:27584)
    at R.action (<anonymous>:6:18904)
    at HTMLButtonElement.<anonymous> (<anonymous>:6:19484)

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

See this Editor REST example. I don't believe the ajax option supports the url to be a function. I suspect it only supports a string URL thus the error.

Kevin