How to update element without realoding?

[Raiikou]

Hello, again friends! (Is there any question limit?, i don’t want to disturb )

Btw today I’m playing with another github repo

The fact is everything is working perfect but I’m not able to play the animation of the demo when I change the value:

https://puu.sh/AN2TS/05efa63249.gif

This is my code:

<div id="'+properties.id+'"></div>
    
$('#'+properties.id+'').radialIndicator({
        barColor: properties.color,
  		radius: properties.radius,
        barWidth: properties.width,
        initValue: properties.value,
        maxValue: properties.maxvalue,
        roundCorner : properties.roundcorner,
        percentage: properties.percentage,
  		displayNumber: properties.displaynumber,
  		frameTime: properties.timedelay,
  		format: properties.format
});

Following this documentation I tried this:

var radialObj = radialIndicator('#'+properties.id+'');
$("#" + properties.id).change(function() { radialObj.animate(80); });

But when the value changes, I have to reload the entire page to see the new value. It doesn’t “live” update.

Is there any way to listen to my element value property (properties.value) and if that value changes do the update. Instead of listening to the element?

How is actually:
https://puu.sh/AN3xH/a24bf0ea93.gif

Thanks!

[m_hutley]

@Raiikou

<div id=“‘+properties.id+’”></div>

Is… this wrapped in something? Javascript doesnt do echoing in this fashion.

[Raiikou]

Thanks, but is working for me:

Element editor:
https://puu.sh/AN5ht/9fa536f3fc.png

Element on page:
https://puu.sh/AN5jO/389ed8d927.png

Im not sure that is the problem?

[m_hutley]

Well, show us the final HTML, and it’ll be more obvious.

(incidentally, your picture shows you defining a width of 10, and your element on page is a width 100%… you sure you’re looking at the right element?)

[Raiikou]

Where you see the 10?
And yes, im pretty sure im looking the right element:

https://puu.sh/AN5Ej/72a7a7f9ee.png

PS: What you mean with final HTML?

Edit: Found this https://jsfiddle.net/5o1wf1bn/1/ May this helps?

[m_hutley]

That fiddle… is nothing to do with this?

[Raiikou]

@Raiikou

Is there any way to listen to my element value property (properties.value) and if that value changes do the update. Instead of listening to the element?

@Raiikou

Edit: Found this https://jsfiddle.net/5o1wf1bn/1/ May this helps?

I mean if I can listen to value change somehow instead of listening to the element because I believe the value when changes it doesn’t reflect on the element, but in the value.

Edit: Tried to do what you told for discard that might causing the issue (Is… this wrapped in something? Javascript doesnt do echoing in this fashion.) And set a static text on the ids, but same. Only updates after reload page.

My question actually is: What event I should use to add a listener to a value and call actions when that value changes.

[m_hutley]

@Raiikou

Is there any way to listen to my element value property (properties.value) and if that value changes do the update. Instead of listening to the element?

The element ‘changes’ when its value changes. The two things you’ve said are identical.

You’ve got two canvas elements there - are you drawing the buttons with another canvas? Or has this script been initialized more than once?

Here’s a codepen that implements what the documentation says that matches what you seem to be trying to do:

(Note: The pen includes the minified version of the radialIndicator.js file, ignore lines 1-8 in the javscript, and scroll to the bottom of that window to see the implementation)

[Paul_Wilkins]

@Raiikou

My question actually is: What event I should use to add a listener to a value and call actions when that value changes.

That would be the input event that you listen to, which triggers when the value changes.

el.addEventListener("input", function (evt) {
    ...
});

Here’s an example that changes the width of an element live, using the input event, as you update the value in the field.

Edit fiddle - JSFiddle - Code Playground

[Raiikou]

Thanks! but that:

var resize = document.querySelector(".resize");
var input = document.querySelector("input");

Is pointing to css?? What If i don’t have css?

[Paul_Wilkins]

@Raiikou

Thanks! but that:

var resize = document.querySelector(".resize");
var input = document.querySelector("input");

Is pointing to css?? What If i don’t have css?

The first one uses a class selector, the second one uses an element selector. You can use id selectors too, or any other value valid CSS-based selector to select an element.

What is the HTML for the input field that you want to select?

Edit:

s/value/valid

[Raiikou]

Thanks.

What you mean “What is the HTML for the input field”?
And s/value/valid?

With the code you sent me i did this, but not sure how to complete it and if its correct:

var thediv = document.getElementById(properties.id);
thediv.addEventListener("input", function (evt) {
$('#'+properties.id+'').data('radialIndicator').animate(properties.value);
});

I dont know what to put where “input”.
My html only has this:

<div id="'+properties.id+'"></div>

[Paul_Wilkins]

[quote=“Raiikou, post:12, topic:300485, full:true”]
Thanks.

What you mean “What is the HTML for the input field”?[/quote]

It’s equivalent to when someone is having trouble with the grammar of a paragraph they’re working on. Instead of dealing with general principles, it’s best to actually see the paragraph in question so that specific help can be provided.

@Raiikou

And s/value/valid?

I made a mistake in my post by saying value. When I edited my post I placed an edit note at the end of my post to say that I substituted value for the more appropriate word of valid.
Using s/value/valid is a cheeky programmer shortcut from a Linux editor called VIM to convey that information, which was popular on other discussion places like IRC. I’m showing my age there.

@Raiikou

<div id="'+properties.id+'"></div>

That HTML does not have a valid id attribute. You need to fix that problem first before you can successfully move on to other things.

[Raiikou]

Haha funny thing that Linux VIM shortcut

Btw I updated the code as you both said me it’s not valid id, even if it’s working.

<div id="radialex"></div>
  
$('#radialex').radialIndicator({
        barColor: properties.color,
  		radius: properties.radius,
        barWidth: properties.width,
        initValue: properties.value,
        maxValue: properties.maxvalue,
        roundCorner : properties.roundcorner,
        percentage: properties.percentage,
  		displayNumber: properties.displaynumber,
  		frameTime: properties.timedelay,
  		format: properties.format
});

var thediv = document.getElementById('#radialex');
thediv.addEventListener("update", function (evt) {
$('radialex').data('radialIndicator').animate(properties.value);

});

Do you think I’m on the correct path? Should I change something more?
Thanks.

[m_hutley]

$('**#radialex**').radialIndicator({
        barColor: properties.color,
  		radius: properties.radius,
        barWidth: properties.width,
        initValue: properties.value,
        maxValue: properties.maxvalue,
        roundCorner : properties.roundcorner,
        percentage: properties.percentage,
  		displayNumber: properties.displaynumber,
  		frameTime: properties.timedelay,
  		format: properties.format
});

var thediv = document.getElementById('**#radialex**');
thediv.addEventListener("update", function (evt) {
$('**radialex**').data('radialIndicator').animate(properties.value);

One of these things is not like the others…

[Raiikou]

Thanks, I’m studying your codepen. Thank you for that.

Do you think its possible to do exactly what you did, but instead of 2 buttons, an input field (without button). And the javascript runs when the value of the input is changed? Without a button, because I don’t want a click fire action.

Something like this: http://jsfiddle.net/5a7gjs9m/20/ (posted by @Paul_Wilkins)

Thanks!

[Raiikou]

Hello @m_hutley

Can you explain me please this bit part of code what does? I’m very near to get it works. Actually I made to change value when input is changed.

format: function(value) { return value.toFixed(2)}});

from your codepen.

Thanks!

[m_hutley]

The library allows you to specify a format for your numbers - if left unset, you’ll see the numbers go a little unreadable as it puts in numbers that are not-quite-whole numbers (an issue with how floating point numbers are stored), so you’ll see like… 1.0000000000000000 on the dial (and you’ll see the middle “00000000” bit).
You can (according to the documentation) submit format as a string, such as “$###,###.##”, in which the #'s will be replaced, or you can provide a function.
In my case, i wrote a function that takes the value, and applies .toFixed(2), a javascript default function Number.toFixed(n) that renders the number as a n-decimal-point floating point. Thus it displays 0.00, up to 100.00, but it wont show 1.000000000.

Basically, I did it to look pretty while it’s animating.