Jquery change HTML attribute using attr() returns object object

Question

I have read multiple different articles and questions to no avail. I have a PHP page that will use AJAX to update an easypiechart using values from a database with a check every X minutes. In this example I have reduced the time to 10 seconds with an alert box to show what changes have been made.

I can use the attr() to view the "data-percent" however it returns "Object Object" if I attempt to change the value of the "data-percent" attribute.

I am trying to manually just change the value to 90 for the time being until I can get this function to work before adding the ajax response as the replacement.

code:

    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<div id="test" class="easy-pie-chart txt-color-blue easyPieChart" data-percent="38" data-pie-size="160">
    <span class="percent percent-sign txt-color-blue font-lg semi-bold"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="js/libs/jquery-2.1.1.min.js"><\/script>');
    }
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
    }
</script>

<script>
// Setup AJAX request -->
function updateWidgets(){
    $.ajax({
      url: "widgetGet.php",
      type: "POST",
      success: function(data) {
        var response = $.parseJSON(data);
        var idea = parseInt(response.test);
        var ID = $("#test").attr("data-percent");
        var IDchange = $("#test").attr("data-percent", 90);
        alert(ID);
      }
    });
  }

  updateWidgets();
  setInterval(updateWidgets, 10000);
  </script>

If you switch the alert from ID to IDchange you can see where my problem is. Thanks guys as I know I am in the hands of a great community here.

Update, understandably the alert function shouldn't be used for debugging. What the issue (and not sure if attr()) is the solution is to update the html attribute using a AJAX response that is initiated every 10 seconds. Documentation such as this show that attributes are updated using the attr() which leads to my confusion.

In short, how can I update the html attribute of the div containing the easypiechart using AJAX that is receiving data every 10 seconds?

well, yeah, that's what all jquery methods do when used as a setter. api.jquery.com/attr — user400654
– user400654, Commented Sep 7, 2016 at 21:59
This is why you shouldn't use alert() for debugging - it coerces everything to a string and it blocks the UI thread. Always use console.log or console.dir — Rory McCrossan
– Rory McCrossan, Commented Sep 7, 2016 at 22:00
The jQuery .data() method is, in my opinion, preferable to fooling with the attributes directly, though it's not exactly the same as doing so. — Pointy
– Pointy, Commented Sep 7, 2016 at 22:01
downside to .data() though of course is that it has a lot more overhead, compared to just altering/reading attributes. I prefer .attr — user400654
– user400654, Commented Sep 7, 2016 at 22:02
@KevinB I think data() is still much faster than accessing the DOM. Sadly jsperf.com is no longer with us so I can't look it up quickly. — Rory McCrossan
– Rory McCrossan, Commented Sep 7, 2016 at 22:07

Pointy · Accepted Answer · 2016-09-07 21:59:16Z

3

The .attr() function returns the jQuery object when it's invoked with two arguments. In other words, you get back the value of $("#test").

It does that so you can do things like

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

If you want to see the value after the change, then:

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

answered Sep 7, 2016 at 21:59

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gerard Brull Over a year ago

@wick-12c Maybe you are not familiar with Fluen Interface and it can be useful to understand this answer I think :)

Wick 12c Over a year ago

very good answer Pointy and would like to give you an upvote but I do not qualify for this yet. I noticed people were using the attr() to not only check but to also make changes to the attribute but I obviously had a misunderstanding to the function.

Wick 12c Over a year ago

Ok I have made progress and have asked one of my developers at work (now that I am in the office). You cannot necessarily see a change in the source code and because we are making an update to an attribute that is related to easypiecharts I will need to read the documentation on the included scripts of easypiecharts to find a way to reload it after the above-mentioned change by @pointy.

Wick 12c · Accepted Answer · 2016-09-08 03:49:08Z

After reading a ton of articles I found the answer which was easypiecharts itself. The JS associated to easypiecharts will touch on the data attribute. Reading the documentation of easypiecharts I found the answer:

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

My problem was the direction to solve the problem as a ton of articles were referencing the attr() function. For my scenario, the attr() function wouldn't update the chart (nor prop() unless the chart was refreshed to visually see the update). Those articles were referencing this function on an element that isn't associated with other external JS files.

Thanks everyone for your contribution and I learnt some important lessons today. I hope someone finds this answer helpful for anyone wanting to work with AJAX and easypiecharts with dynamic percentage updates.

Collectives™ on Stack Overflow

Jquery change HTML attribute using attr() returns object object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related