The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

How to re-initalize kt-countup after data update in js/jquery?


After updating the data attribute "data-kt-countup-value" via jquery like so:
$('#whse_edit_total_sold').attr('data-kt-countup-value', product_data.Total_Sold);
we need to reinitalize the kt-countup so that the counter uses the updated data. Can you advise on how this can be accomplished?

I saw the previous post that suggests:
countUp.update(989);
Unfortunately this does not work as countUp is not a function.

We also saw you had suggested to update the count-up settings via the API and linked to the github page. Unfortunately there is no mention of an API on the github doc page.

Thanks for your help,

Ajar


A
Ajar Dev 2 years ago
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 2 years ago

Hi,

You can use the below code to update the value for the count-up by reinstalling the instance with new value "15000":


// On document ready

KTUtil.onDOMContentLoaded(function() {

   const count1 = new countUp.CountUp("kt_countup_1", 15000, {prefix: "$"});

   count1.start();

});


Regards.


A
Ajar Dev 2 years ago

Worked perfect. Thanks!


user
Sean Author 2 years ago

Hi happy,

Glad to hear that. If you need any further help please let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(