Using attr() method in jQuery to modify HTML attributes results in object object

The code for creating and adding attributes using appendTo is not functional. An attempt was made to add it to a variable object, but it did not work.
To resolve this issue, consider implementing Solution 1 which is a helpful answer for anyone working with AJAX and easypiecharts for dynamic percentage updates. Your previous attempt was close, so this solution may be more effective.


Question:

Despite reading several articles and inquiries, I still haven’t found a solution. On my PHP page, I intend to employ AJAX to refresh
easypiechart
periodically with data from a database. As an experiment, I reduced the interval to 10 seconds and utilized
alert box
to display the differences.

The ”
data-percent
” can be viewed using attr(). However, any attempt to modify the value of ”
data-percent” attribute
” results in “Object Object” being returned.

For now, I am attempting to update the value to 90 manually while I work on fixing the function. Once it is working properly, I will replace it with the ajax response.

code:

    

By changing the alert from ID to IDchange, it is possible to locate the source of my issue. I am grateful to be part of such a wonderful community and appreciate the assistance provided.

It is understandable that the alert function is not suitable for debugging purposes. The solution to the issue, which may not involve using attr(), is to refresh the html attribute through an AJAX response every 10 seconds. The documentation suggests that attr() is used to update attributes, which is what caused my confusion.

To clarify, what is the method to modify the HTML attribute of the div that holds the easypiechart using AJAX, while receiving new data every 10 seconds?


Solution 1:

The

.attr()

function retrieves
jquery object
as its output when called with two parameters, indicating that you will receive the value of

$("#test")

.

This feature enables you to perform tasks such as.

$("#test").attr("foo", "bar").hide();

In order to view the updated value, follow these steps.

var IDchange = $("#test").attr("data-percent", 90).attr("data-percent");


Solution 2:


Following extensive reading, I discovered the solution to be easypiecharts. The JavaScript linked to easypiecharts will address the data attribute, which was confirmed by reviewing easypiecharts documentation.

$('#test').data('easyPieChart').update(90); //to update the chart to 90%

I encountered difficulty in finding a solution for my problem because many articles were suggesting the use of the attr() function. However, in my case, the chart wouldn’t update even with the use of the prop() function unless the chart was refreshed. Moreover, these articles were referring to the attr() function on an element that was not linked to any external JS files.

I appreciate everyone’s input and have gained valuable insights today. Hopefully, those seeking to use AJAX and easypiecharts with real-time percentage updates will find this answer useful.

Frequently Asked Questions