Datatables Editor: Stop Table Edit

Topic: Datatables Editor: Stop Table Edit

winniel free asked 5 years ago

I am currently playing around the data table editor. I have the table filled with information taken from a database and have the buttons that will change the information in the database. (Add, Edit, Delete). The changes are made through AJAX requests that return JSON from a PHP file. The JSON returns true if the query was successful, or false if it failed. Currently, if the request fails, it obviously doesn't make changes to the database. However, the table still updates on the page. I would like to not make edits to the table if the queries fail.

Example: I click add, which opens a modal that you fill out before submitting. Once submitted, the PHP file checks to see if the client's name already exists in the database. If it already exists, it returns false with an error message. If it does not exist, it adds it to the database. Currently, regardless of the outcome, the table will always get changed. This isn't the desired behavior.

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Hi there,It could be done by simple asynchronus function, but for now there is no possibility to call the method which will save your data into the table.I have send the request to our JQuery team, so this should be resolved soon.But I've got workaround for it. You have to replace the code of the "Add form" button with this snippet:<div><pre class="code-toolbar grey lighten-2 p-3 mb-3"><div class="modal-footer d-flex justify-content-center buttonAddFormWrapper"> <button class="btn btn-outline-primary btn-block" id="buttonAdd"data-dismiss="modal">Add form <iclass="far fa-paper-plane ml-1"> </button> <button class="sr-only buttonAdd">Add form hidden button</button> </div></pre></div>Then implement functions:<pre class="code-toolbar grey lighten-2 p-3 mb-3">$('#dtBasicExample').mdbEditor(); $('#buttonAdd').on('click', updateTable); function resolveAfter2Seconds() { return new Promise(resolve=> { // this is your AJAX call setTimeout(() => { resolve('resolved'); }, 2000); }); } async function updateTable() { console.log('calling'); var result = awaitresolveAfter2Seconds(); if(result === "resolved") { console.log(result) $('.buttonAdd').trigger('click'); } }</pre>

Please insert min. 20 characters.

Hi there,

It could be done by simple asynchronus function, but for now there is no possibility to call the method which will save your data into the table.

I have send the request to our JQuery team, so this should be resolved soon.

But I've got workaround for it.
You have to replace the code of the "Add form" button with this snippet:

<div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
  <button class="btn btn-outline-primary btn-block" id="buttonAdd"data-dismiss="modal">Add form
    <iclass="far fa-paper-plane ml-1"></i>
  </button>
  <button class="sr-only buttonAdd">Add form hidden button</button>
</div>

Then implement functions:

$('#dtBasicExample').mdbEditor();
$('#buttonAdd').on('click', updateTable);

function resolveAfter2Seconds() {
  return new Promise(resolve=> {
  // this is your AJAX call
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function updateTable() {
  console.log('calling');
  var result = awaitresolveAfter2Seconds();

  if(result === "resolved") {
    console.log(result)
    $('.buttonAdd').trigger('click');
  }
}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.6.1
Device: Desktop
Browser: Google Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

winniel

5Support score
1Questions 0Answers 0Snippets