Проблема обновления атрибута данных через ajax

Question

Я хочу получить данные через ajax и обновить атрибут div data-used, но он не изменился, и в консоли он показывает:

TypeError: "# powerv1" .data isне функция

$.ajax({
  url: 'showjson.php',
  data: "power=10",
  dataType: 'json',

  success: function(datap){
    var p1value= datap.power;
    ('#powerv1').data('used',p1value);
    //('#powerv1').attr('data-used',p1value); <--also tested , same error
  }

});

<div class="card"><h5 class="card-header"> Area 1</h5>
  <h2 class="mb-0">
    <div class='Preview'>
      <div class='GaugeMeter' id='powerv1' name='powerv1' data-size='200' data-theme='Green-Red' data-width='15'data-append='W' data-label='Watt'_color='#FF0000' data-showvalue=true data-total=1000 data-used=100></div>
    </div>
  </h2>
</div>

Answer 1

Из документов:

Использование метода data () для обновления данных не влияет на атрибуты в DOM.Чтобы установить значение атрибута data- *, используйте attr.

$.ajax({
  url: 'showjson.php',
  data: "power=10",
  dataType: 'json',

  success: function(datap){
    console.log(JSON.stringify(datap)); // log the response to console.
    var p1value = datap.power;
    $('#powerv1').data('used',p1value);
    $('#powerv1').attr('data-used', p1value);
  }

});