How can I show information in a Rich Textarea when an AJAX request is successful using JavaScript?

Below is the code snippet:


<textarea 
 class="textarea" id="about_us" placeholder="Place some text here"
 style="width: 100%; height: 100%; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"
>
</textarea >

However, I am facing an issue with my JavaScript code: I am able to receive data, but the RichTextarea is not displaying. You can view the RichTextarea image here.

<script>

$(document).ready(function () {
$(document).on('click', '.editbtn', function(){  
          var Pedit_id = $(this).attr("id");  
          $.ajax({  
               url:"../fetch/editproduct.php",  
               method:"POST",  
               data:{Pedit_id:Pedit_id},  
               dataType:"json",  
               success:function(data){ 
                    $('#about_us').val(data.product_dec);

               }  
          });  
     });
});
</script>

I request assistance to identify where I have made a mistake. My objective is to retrieve data from a MySQL database using AJAX upon button click, and display it in a specific textarea. I appreciate your help in solving this issue. Regards, Ahsan Javed

javascriptajaxrichtextarea

Answer №1

Are you attempting to assign the value data.product_dec to the element with the ID about_us? If so, with Jquery in use, it's recommended to utilize the .val() method from JQuery for the intended result.

Read more:

Update:

$(document).ready(function () {
$(document).on('click', '.editbtn', function(){  
          var Pedit_id = $(this).attr("id");  
          $.ajax({  
               url:"/fetch/editproduct",  
               method:"POST",  
               data:{Pedit_id:Pedit_id},  
               dataType:"json",  
               success:function(data){ 
                    $('#about_us').val(data.product_dec);

               }  
          });  
     });
});

Answer №2

It seems like the issue lies with the URL. If you are sending to a PHP document, be sure to include the extension:

url : "../fetch/editproduct.php",

Additionally, in the success function, product_dec is not recognized as a method. It's unclear what you are attempting to achieve, but consider updating it to:

$('#about_us').val(data+"product_dec");

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

Showcasing mysql information within divs rather than tables

Hello! I am currently working on a hotel search website project, where clients can search for hotels. I have successfully developed the backend system for hotels to update their details in the database. However, I am facing challenges with the front-end de ...

phphtmlmysqlsqlajax

Error while compiling Q_PROPERTY

Current Environment : Qt 5.8 MSVC2015 64bit, Windows 7 64 bit. I have successfully called a C++ method from Java Script. However, I encountered an issue when trying to retrieve the return value of the C++ method in JavaScript. To address this, I attempt ...

javascriptqtqt5.5qt5.6

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

I am working on sending an image (base64) via a POST request and waiting for the response. The POST request should have a Content-Type of multipart/form-data, and the image itself should be of type image/jpg. This is what the POST request should look like ...

javascriptangulartypescriptpostangular2-forms

The 'openNewWin' property does not hold a valid Function object and is either null or undefined

I am currently working with an asp menu and trying to configure the navigateurl so that it opens in a new popup window. The issue I am facing is that when I execute the code, I encounter the following error: Error: The value of the property 'openNewW ...

c#javascriptasp.netcontrols

Guide to leveraging dependency chaining in Node.js

Scenario: I am working with a node.js library that utilizes sequelize for defining and exporting models. This library is being used in my backend application, which also requires access to the functionalities provided by sequelize. Query: How can I proper ...

javascriptnode.jsnpmsequelize.js

Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation

I'm struggling to properly display nested arrays in Vue JS. Below is a snippet of my JSON data: { "id": 1, "slug": "test-page", "banner": { "title": "banner title", "subTitle": "my sub title", "hasSubTitle": false, "hasClass": " ...

javascriptjsonvue.js

Tips for dynamically passing parameters to functions in JavaScript?

Looking for a solution to dynamically receive input from the user in my function: divResize = { myDiv:function(width, height) {...} } divResize.myDiv(100,400); I want to make these numbers interactive and changeable based on user input. How can I achie ...

javascriptjquery

The customized uploading button functions seamlessly on desktop devices, yet encounters issues when used on

On my website, I have implemented a custom upload button alongside a hidden file input with the class .invisible-file-input. Here is how it is set up: Javascript $('.call-upload').click(function () { $(this).siblings('.invisible- ...

javascriptjquery

What makes JSONP a more secure option compared to JSON for cross-domain requests?

What is the reason behind browsers permitting cross-origin JSONP requests while prohibiting JSON requests for security purposes? Even though JSON requests are restricted to prevent XSS attacks, some may argue that JSONP could potentially pose a greater ris ...

ajaxjsonbrowsercross-domainjsonp

Having trouble with sending JSON data from Django to JavaScript

Trying to transmit data from an html file to django for processing and then receiving it back using ajax results in the response going to the error callback with status=0. The following is the snippet of ajax code, where I've experimented with differ ...

ajaxdjango

I am interested in extracting information from a public Facebook post

Is it possible to scrape or utilize the FB API to retrieve data from a public profile's wall post? By inspecting the element on the URL, you can see most of the data as well as the ajax calls for infinite scrolling on the wall. How could one go about ...

javascriptphpfacebookfacebook-graph-apiweb-crawler

Synchronization of databases in real-time using PHP and AJAX

I am currently working on a PHP console application that synchronizes SQL databases. Essentially, it updates information from one database to another. While the console app is functioning properly, I would like to create a webpage that provides live update ...

phpajaxresponselive

Encountering an issue with ReactJS + Redux where the error message states: "Error in prop type: The Right-hand side of 'instanceof' cannot be called"

Currently working on a web app project in React with Redux for global state management. A puzzling issue has arisen - we're receiving warnings in the browser console. How can we resolve this? It seems related to prop types declaration, but the soluti ...

javascriptreactjsreduxreact-redux

Using JavaScript to auto-scroll a textarea to a certain position

Is there a way to change the cursor position in a textarea using JavaScript and automatically scroll the textarea so that the cursor is visible? I am currently using elem.selectionStart and elem.selectionEnd to move the cursor, but when it goes out of view ...

javascriptjqueryscrolltextarea

Tips for structuring an object map with flow type to ensure that each value includes a corresponding key

In an attempt to correctly type (using Flow) a helper function called createReducer for Redux, I have utilized the code from redux-immutablejs as my starting point. I am following the recommendations from the flow documentation on typing Redux reducers, b ...

javascriptreactjsreduxflowtype

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

javascriptjqueryarraystypescriptspfx

Extend and retract within a row of a table

I need help with modifying a dynamically generated table to meet specific requirements. The table currently looks like this. The task involves hiding all columns related to Category B, eliminating duplicate rows for Category A, and displaying entries from ...

javascriptjquerycss

Secure your AJAX calls by encrypting and hashing data to communicate with dual servers

I have developed two sample applications: ASP.NET WEB API and ASP.NET MVC application. Some of the screens in my MVC application make AJAX calls to access the WEB API, which I successfully implemented. Now I am interested in implementing Hashing/Encrypt ...

ajaxasp.net-mvcencryption

The main.js file will be served by nodeJS using express

After developing a nodeJS server using express, I encountered an issue where the server was only delivering the index.html file and not the accompanying main.js file. Both files are located in the same directory. app.get('/', function (req, res) ...

javascriptnode.jsexpress

Is jQuery .serialize not sending data to PHP correctly, or could it be an issue with the PHP code

Regarding the question I asked yesterday: I have two radio buttons that are supposed to change prices when clicked: <form id="f-p" method="post" action="forms.php"> <label for="exkl">Exkl. moms</label> <input name="m ...

phpjqueryajaxserializationpost