Attempting to find a solution to successfully transfer an object from the jEditable datatable plugin to my Java Servlet

Currently, I have a Datatable set up and I am utilizing the jeditable plugin to make cells editable and update data. However, after editing a cell and hitting enter, when the data is sent back to my URL Rest endpoint (where I simply have a System.out.println statement to view the data), I encounter this error message from Firebug:

"NetworkError: 415 Unsupported Media Type - my rest endpoint url"

The issue lies in the fact that my endpoint expects an Object in JSON format while jeditable is only sending some string parameters. Therefore, I need to wrap it up properly.

Allow me to share my datatable initialization code along with the jeditable setup.

var computerTable = $("#table_computerTable ").dataTable({
           "bProcessing": true,
           //Other configuration settings
        }).makeEditable({
            sUpdateURL: getApiUrl() + "cpu/save",
            sReadOnlyCellClass: "read_only",
            ajaxoptions:{
                dataType: "json",
                type: 'POST'
            }
        });

Upon sending the POST request, here is the data I receive (as observed through firebug):

columnId    3
columnName  daily
columnPosition  2
id  24
rowId   0
value   50

The goal is to construct an object containing all the necessary data such as ID, Serial, and the new value before sending it back.

Given my limited knowledge of jQuery and JavaScript, I'm unsure about where to begin making this modification. Any guidance or suggestions would be greatly appreciated.

Answer â„–1

Follow this revised format for your makeEditable function:

makeEditable(
{
  sUpdateURL: function(value, settings)
  {
    var dataObject = {}
    var rowIndex = oTable.fnGetPosition(this)[0];
    var columnPosition = oTable.fnGetPosition(this)[1];
    var columnId = oTable.fnGetPosition(this)[2];
    var columnTitle = oTable.fnSettings().aoColumns[columnId].sTitle; 
    dataObject["rowIndex"]= rowIndex
    dataObject["columnPosition"]= columnPosition
    dataObject["columnId"]= columnId
    dataObject["columnTitle"]= columnTitle
    dataObject["cellValue"]=value
    dataObject["Serial"]="serialnumber"
    dataObject["Hourly"]="somevalue"
    $.ajax({
    type: "POST",
    url: "url",
    data: "dataObj="+JSON.stringify(dataObject)
    })
    return value;
  },
  sSuccessResponse: "IGNORE"
 }
);

This code provides a customized ajax request for updating a cell in a table.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing an Ajax callback function to navigate to a different page

I must handle ajax errors globally by capturing 901 error codes in my header.jsp. There is an error message displayed in the browser console: GET https://localhost:8443/SSApp/Pan/report?&vessel…namax%20Tanker%20Pool%20Limited&rptTitle=Activit ...

Error: There was a syntax issue when trying to parse JSON due to an unexpected identifier "object" in the anonymous function

I'm having trouble understanding why there was an issue parsing this file: { "t": -9.30, "p": 728.11, "h": 87.10 } This is the javascript code I used: <script type="text/javascript"> function verify() { $.get("http://....file.json", funct ...

A guide on getting the `Message` return from `CommandInteraction.reply()` in the discord API

In my TypeScript code snippet, I am generating an embed in response to user interaction and sending it. Here is the code: const embed = await this.generateEmbed(...); await interaction.reply({embeds: [embed]}); const sentMessage: Message = <Message<b ...

Please provide the necessary environment variable

While developing my ReactJS app, I have been pondering on the process of specifying the necessary environment variables for the application. Where should I define that "my app requires a DATABASE_URL variable with a string formatted like this, and a PORT v ...

What is the best way to incorporate animation into Bootstrap dropdowns?

Is there a way to incorporate animation into the dropdown feature? I'm assuming it can be achieved by adjusting popperConfig, but how exactly? Currently, the dropdown-menu has an automatically generated inline style, for example: position: absolute; ...

Tips for sorting through the state hook array and managing the addition and removal of data within it

Having trouble finding a solution for filtering an array using the React useState hook? Let me assist you. I have declared a string array in useState- const [filterBrand, setFilterBrand] = useState<string[]>([]); Below is my function to filter this ...

Several features - Second function malfunctioning

The initial inquiry is effective. However, the subsequent one is encountering issues as it is failing to confirm if an email contains the "@" symbol. My attempted solution involved reordering the functions related to email validation. <body onload="ch ...

Using Selenium to handle asynchronous JavaScript requests

Having recently started working with Selenium and JavaScript callback functions, I've encountered a problem that I can't seem to solve on my own. My issue revolves around needing to retrieve a specific variable using JavaScript. When I manually i ...

Retrieving the `top` value using `$this.css("top") can either return an object or an element value

Something odd is happening with my HTML object: <div data-x="1" data-y="1" class="tile empty" style="top: 32px; left: 434px;"> <div class="inner">1:1</div> </div> When attempting to access its top property in jQuery using the ...

Every time I try to loop through my JSON object using an $.each statement, an error is thrown

When I execute an $.each loop on my json object, I encounter an error 'Uncaught TypeError: Cannot read property 'length' of undefined'. It seems that the issue lies within the $.each loop as commenting it out results in the console.log ...

Navigating interfaces using GSONIf you need to work with interfaces

Within my interface model, I have nested interfaces. Typically, for each interface, there is a single concrete implementation class, such as: public interface Book { String getTitle(); } public class BookImpl implements Book { private String ti ...

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

The next.js router will update the URL without actually navigating to a new page, meaning that it will still display the current page with the updated URL

My search results are displayed at the route /discovery, and I am working on syncing the search state with URL query parameters. For example, if a user searches for "chicken," the URL becomes /discovery?query=chicken&page=1. When a user clicks on a se ...

What is the best way to send a form using jQuery's AJAX function?

Essentially, I have a form that contains several text boxes along with a submit button. The issue I am facing is that upon submitting the form, only the value of the username box is being sent and not the values of the other text boxes. I am using a servl ...

Incorrect credentials trigger an error in Nodemailer

Currently, I am utilizing nodemailer to handle email submissions from a registration form. Below is the code for my registration form: <form action="/registration" method="post"> <h3 class="text-center" style="font-family: 'champagne-l ...

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

When the user clicks, an AJAX call is made to retrieve data from a third-party API. The frontend/layout renders correctly before this action; however, after the data is fetched and displayed in the frontend, the layout changes. Upon debugging multiple tim ...

AngularJS does not support the use of $(this) syntax

I have encountered an issue while developing a Chrome extension using AngularJS. I would like to add buttons to my popup page, and I want the ancestor node to disappear when a button is clicked. Here is the code snippet: in popup.html <div class="dea ...

The duration required to render DOM elements

Trying to determine the best method for measuring the rendering time of DOM elements in a web browser. Any tips? I'm currently developing an application that involves significant DOM manipulation as part of comparing the performance between Angular 1 ...

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...