Tabledit failing to send post request

Question

Tabledit failing to send post request

I recently integrated tabledit into a webpage, following various examples. However, the plugin is not functioning as expected - nothing is being posted and the result is empty. I am unsure how to get the posting feature to work properly. Can you offer me some guidance?

Here is a basic script:

     <table class='table'>
  <thead>
    <tr>
      <th>Id</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Doe</td>
      <td>Doe</td>
      <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c2c7c0c6e8cdd0c9c5d8c4cd86cbc7c5">[email protected]</a></td>
    </tr>
  </tbody>
</table>
<script>
  $('.table').Tabledit({
    url: 'index.php',
    columns: {
      identifier: [0, 'id'],
      editable: [
        [1, 'col1'],
        [2, 'col2'],
        [3, 'col3']
      ]
    }
  });
</script>

While everything seems simple and functional - with buttons for saving and deleting posts via AJAX - there are no fields or formdata present. How can I address this issue?

javascript bootstrap-4 tabledit

Answer 1

Answer №1

You seem to be missing the handlers declaration in your Tabledit definition.

If you need help, there are some examples available in the documentation.

Don't worry, I've gone ahead and added them for you.

$(document).ready(function() {

    $('.table').Tabledit({
        url: 'index.php',
        columns: {
            identifier: [0, 'Id'],
            editable: [
                [1, 'Firstname'],
                [2, 'Lastname'],
                [3, 'Email']
            ]
        },
        onSuccess: function(data, textStatus, jqXHR) {
            // handle success here
        },
        onFail: function(jqXHR, textStatus, errorThrown) {
           // handle errors here
        },
        onAjax: function(action, serialize) {
            // execute your XHR requests here 
            console.log("on Ajax");
            console.log("action : ", action);
            console.log("data : ", serialize);
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e8f3f7e7f0fbaff6e3e0eee7e6ebf6c2b3acb2acb2">[email protected]</a>/jquery.tabledit.min.js"></script>
<table class='table'>
   <thead>
      <tr>
         <th>Id</th>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Doe</td>
         <td>Doe</td>
         <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e747176705e7b667f736e727b307d7173">[email protected]</a></td>
      </tr>
   </tbody>
</table>

Answer 2

You seem to be missing the handlers declaration in your Tabledit definition.

If you need help, there are some examples available in the documentation.

Don't worry, I've gone ahead and added them for you.

$(document).ready(function() {

    $('.table').Tabledit({
        url: 'index.php',
        columns: {
            identifier: [0, 'Id'],
            editable: [
                [1, 'Firstname'],
                [2, 'Lastname'],
                [3, 'Email']
            ]
        },
        onSuccess: function(data, textStatus, jqXHR) {
            // handle success here
        },
        onFail: function(jqXHR, textStatus, errorThrown) {
           // handle errors here
        },
        onAjax: function(action, serialize) {
            // execute your XHR requests here 
            console.log("on Ajax");
            console.log("action : ", action);
            console.log("data : ", serialize);
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e8f3f7e7f0fbaff6e3e0eee7e6ebf6c2b3acb2acb2">[email protected]</a>/jquery.tabledit.min.js"></script>
<table class='table'>
   <thead>
      <tr>
         <th>Id</th>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Doe</td>
         <td>Doe</td>
         <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e747176705e7b667f736e727b307d7173">[email protected]</a></td>
      </tr>
   </tbody>
</table>

Answer 3

Answer №2

Simply make sure to return true upon the onAjax function call

$(document).ready(function() {
   
 $('.table').Tabledit({
        url: 'index.php',
        columns: {
            identifier: [0, 'Id'],
            editable: [
                [1, 'Firstname'],
                [2, 'Lastname'],
                [3, 'Email']
            ]
        },
        onSuccess: function(data, textStatus, jqXHR) {
            // Handle success here
        },
        onFail: function(jqXHR, textStatus, errorThrown) {
            // Handle errors here
        },
        onAjax: function(action, serialize) {
            // Initiate XHR request here 
            console.log("on Ajax");
            console.log("action : ", action);
            console.log("data : ", serialize);
            return serialize;
            **return serialize;**
        }
    });

});

Answer 4

Simply make sure to return true upon the onAjax function call

$(document).ready(function() {
   
 $('.table').Tabledit({
        url: 'index.php',
        columns: {
            identifier: [0, 'Id'],
            editable: [
                [1, 'Firstname'],
                [2, 'Lastname'],
                [3, 'Email']
            ]
        },
        onSuccess: function(data, textStatus, jqXHR) {
            // Handle success here
        },
        onFail: function(jqXHR, textStatus, errorThrown) {
            // Handle errors here
        },
        onAjax: function(action, serialize) {
            // Initiate XHR request here 
            console.log("on Ajax");
            console.log("action : ", action);
            console.log("data : ", serialize);
            return serialize;
            **return serialize;**
        }
    });

});

Answer 5

Answer №3

To customize your cells, insert the following code:

<td class='tabledit-view-mode' style='cursor: pointer; background-color: #DEE1E8;'>
<span class='tabledit-span' style='display: inline;'>YOUR CELL DATA</span>
<input name='VAR_NAME' disabled='' class='tabledit-input form-control input-sm' style='display: none;' type='text' value='YOUR CELL DATA'></td>

When you click on it, Tabledit will transform the display to input mode, providing access to your variables.

Answer 6

To customize your cells, insert the following code:

<td class='tabledit-view-mode' style='cursor: pointer; background-color: #DEE1E8;'>
<span class='tabledit-span' style='display: inline;'>YOUR CELL DATA</span>
<input name='VAR_NAME' disabled='' class='tabledit-input form-control input-sm' style='display: none;' type='text' value='YOUR CELL DATA'></td>

When you click on it, Tabledit will transform the display to input mode, providing access to your variables.

Tabledit failing to send post request

Answer №1

Answer №2

Answer №3

Similar questions

Identifying the moment an element reaches the top of the viewport

Guide on incorporating data from JSON into a table with JavaScript

Is there a benefit to using middlewares instead of the standard built-in functions in Express.js?

Utilizing Draft JS to dynamically insert text in the form of span

Copying the value of a datagrid column in EasyUI is a simple task that can be

What is the best way to apply a mask to a textbox to format the date as MM/yyyy using a mask

Using Promise to manipulate objects and arrays returned from functions

Having difficulty removing a specific item from Firebase Realtime Database in React Native

Filtering Results Efficiently Based on Various Criteria in React

Using React: Implementing conditional checks within the render() method of functional Components

Crosswalk code unable to detect electronic devices

What is the method for selecting the "save as" option while downloading a file?

Create a hover effect with an overlay on mouse hover

Using Three.js to shift an object toward a specific point on a line and adjust its orientation with lookAt

Failure when running npm start command in Nest js

Creating a React NavBar with Bootstrap 4 and the <Link/> component

Sending objects as parameters to a class in JavaScript - an easy guide

Preventing Unauthorized Access: Redirecting to Login Page in Vue.js

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Obtain input from request payload in WCF/ADO.NET Data Service