JQuery to format input value once on page load

Dears,

I have a Jquery to convert decimal into currency.

1. Load decimal from database
2. Convert into currency format (using document.ready event)

When user clicks into field, Jquery converts back into decimal so value can be saved in the variable (data type=decimal), on blur it converts back into currency. (This all works fine).

My problem is that "document.ready" seems to execute whenever user types in the field. It should only trigger once as it should not convert to curreny format during typing (only first time when data is retrieved).

I tried in the "onRender" event of the block and also "OnAfterFetch" of the DB call.

I have a working solution in codepen https://codepen.io/kescou/pen/qBEYxYZ

How can I automatically trigger the initial conversion when data is retrieved from db?

Any help is appreciated!

Hello Christoph,

Are you able to share the use case to better understand your problem?

Regards

Hi Chris,

I checked your code on codepen. It all looks fine. It's hard to guess why it is not working in your case (may be oml give more detail).

Can you try below replacement where you are setting initial currency format when page load


window.onload = (function() {
   $("input[data-type='currency']").prop("value", function() {
     formatCurrency($(this), "blur");
   });
});      


Regards,

Swatantra

Thanks for your feedback. Attached the oml.

1. Fill some decimal value and Save.

2. Refresh page

3. See your value in the list and modify it (you see onclick and onblue behaviour). Check DB for decimal value

4. In Service Studio in the Block goto "onRender" and activate the first Javascript to see the strange behaviour.


PS: Found something interesting. In this OML the click/blur events only work for the first 2 input fields. When I add an input variable to the block and refresh the list when saving a new value "onParamtersChange". This makes the click/blur work for all values.

Hi Christoph,


Did you already tried to use any forge component to do that for you?

I searched and this one looks like it has what you need: https://www.outsystems.com/forge/component-overview/2258/input-masks-library


Looking at what you said I think your problem is that in Mobile/Reactive applications the application is a SPA, so it only window.load only happens one when the app loads (not in page transactions) and window.ready always run everything you block ia re-rendered since it's always ready.


What most "Mask" components do is to create an extra input and hide visually the original one. That way hidden input always have a valid format.


Regards,

João Rosado

@joao, "and window.ready always run everything you block ia re-rendered since it's always ready." you mean that windows.ready always re-runs whenever you type on screen?

I was trying to avoid any component or backend workaround. The codepen solution above is elegant in a way that you just assign the class to the input. There are no logic or extra variables needed. I was hoping for a solution to let a Jquery run automatically.

I tried now mousemovement() and one() event but even thought this works in codepen, in Outsystems the .one() event seems to be reset (which makes sense when windows.ready is rerun like you said).

Putting the code in the OnAfterFetch of the aggregate gives a working solution, but its more clumpsy than I hoped.

$(document).one('mousemove', function() {
   $("input[data-type='currency']").prop("value", function() {
   formatCurrency($(this), "blur");
});
});

Hi! Are you able to share a simple OML with us so we can have a look?

Cheers!

Dinis Carvalho wrote:

Hi! Are you able to share a simple OML with us so we can have a look?

Cheers!


The OML is already provided Dinis ;) See above.

Processing Upload...

Hi,


I noticed you are using jQuery on Reactive which is I believe not a good practice. So maybe one of your option is to use CustomCurrency from https://www.outsystems.com/forge/component-overview/2258/input-masks-library stated above. Or look for another solution that at least plain javascript.


Meanwhile, I did some solution, based on the OML you attached. It still using the same library from the original. Please take a look on my attachment if it's working as your expectation and let me know any clarifications. Thanks

Kharlo wrote:

Hi,


I noticed you are using jQuery on Reactive which is I believe not a good practice. So maybe one of your option is to use CustomCurrency from https://www.outsystems.com/forge/component-overview/2258/input-masks-library stated above. Or look for another solution that at least plain javascript.


Meanwhile, I did some solution, based on the OML you attached. It still using the same library from the original. Please take a look on my attachment if it's working as your expectation and let me know any clarifications. Thanks


Hi Kharlo, unfortunately your upload doesn't seem to work. It still shows "Processing Upload". Could you try again? I'm curious about your solution. Thanks!

Hi, trying to upload again.. please let me know if this works