Onchange not working after adding "id".

After I added an id to inputfield in the extende properties. The Id in the HTML is changed. So far so good, but Outsystems added also this: onchange="OsLimitInput(this,event,4) with the result my Onchange Screen action doesn't work any more. How can I provide that Outsystems add onchange="OSLimitInput(this, event,4)?

Hi Danny,

This is a bad code pattern, to change the id attribute in OutSystems. You should not do that.

OutSystems will automatically generate IDs and will need them for proper execution of code.

Why would you want to change the id attribute?

Regards,

Daniel

Because I use Javascript to get an on blur event. I had the strange experience that Outsystems generate a other Id-name when I did great changes to the screen. The means of course the javascript doen't work anymore.

Hi Danny,

In OutSystems you can easily obtain the automatically generated Id from an input widget.

Just give the input widget a name. Then on the call to your JavasScript pass <widgetname>.Id, this will hold the automatically generated Id. You can then use this in your Javascript to access the html input element.

Regards,

Daniel

Hello Danny,


As Daniel suggested, changing the ID of OS widget's is not a good idea. We can fulfill all of our requirement without changing IDs. You just need to know how to write JS in Service Studio, there are some differences on how JS will read the widget. Can you please post some snaps of OnChange action with more details so we can figure out your concern.


Regards,

Sanjay

Daniël Kuhlmann wrote:

Hi Danny,

In OutSystems you can easily obtain the automatically generated Id from an input widget.

Just give the input widget a name. Then on the call to your JavasScript pass <widgetname>.Id, this will hold the automatically generated Id. You can then use this in your Javascript to access the html input element.

Regards,

Daniel

 Hi Daniel. The name of the Widget Input is: Customers_Zipcode. I used in the script: 

const test2 = document.querySelector('" + Customers_Zipcode.Id + "');

 I get this error. Customer.js?985:10 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '" + Customers_Zipcode.Id + "' is not a valid selector.

    at window.onload (https://personal-dbxs.outsystemscloud.com/SkillMania_Admin/Customer.js?985:10:28). Please what is the exact syntax? Thanks

Try

var test2 = document.getElementById('" + Customers_Zipcode.Id + "');

Danny Eeraerts wrote:

Daniël Kuhlmann wrote:

Hi Danny,

In OutSystems you can easily obtain the automatically generated Id from an input widget.

Just give the input widget a name. Then on the call to your JavasScript pass <widgetname>.Id, this will hold the automatically generated Id. You can then use this in your Javascript to access the html input element.

Regards,

Daniel

 Hi Daniel. The name of the Widget Input is: Customers_Zipcode. I used in the script: 

const test2 = document.querySelector('" + Customers_Zipcode.Id + "');

 I get this error. Customer.js?985:10 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '" + Customers_Zipcode.Id + "' is not a valid selector.

    at window.onload (https://personal-dbxs.outsystemscloud.com/SkillMania_Admin/Customer.js?985:10:28). Please what is the exact syntax? Thanks

 

 I also got the similar issue while using querySelector so I changed my script like below :

var testVar = document.querySelector("#" + $parameters.<JS_Input_Parameter> + "")

here I used Jscript input parameter in place of widget Id and later I did some changes on that testVar.

If you want to send some data outside for manipulation, you shall use JS Output parameter instead input.

and later you can assign that output parameter to your widget


Hope it helps.

Still not a solution: const test2 = document.getElementById('" + Customers_Zipcode.Id + "'); gives null.

const inputZipCode = document.querySelector("#wt47_OutSystemsUIWeb_wt5_block_wtContent_wtMainContent_OutSystemsUIWeb_wt50_block_wtColumn1_OutSystemsUIWeb_wt14_block_wtContent_wtCustomers_Zipcode"); works but
I don't want to work this way for the reason I already indicated.

What is wrong? It's fustrating.

Hi Danny,

can you share a demo oml with this problem in it ?

are you sure that the at the moment your querySelector is executed the complete DOM is already available ?

I doubt you can use const in OutSystems JavaScript, see:

https://www.outsystems.com/forums/discussion/54321/const-is-available-in-es6/

Dorine Boudry wrote:

Hi Danny,

can you share a demo oml with this problem in it ?

are you sure that the at the moment your querySelector is executed the complete DOM is already available ?

 Hi Dorine find the oml in the attachment. You can find the Javascript in the Customers Screen. The DOM is already available because I use 

window.onload = function() 

 Thanks for help.

Ok,

i see what you are doing.  

Euhm,  The possibility to refer to a widgets id with the WidgetName.Id format, I don't know how to do that from a script attached to a screen, I do know how to do that from a RunJavaScript node.  

Don't really have time now to look further into this, but see attached oml, I had to strip out just about everything, to make it work.  So I created a const and var in the preparation inside a RunJavascript Node.  Inside that node, both are accessible, but if I try to refer to them from the window.onload, the var is still available, the const isn't.  As Daniel was already saying, maybe not use const...

Maybe this will help you solve what you want to do, if not, let is know, I'll have a closer look tonight.

Dorine

Hi Danny,

I did some check in my sample application and below listed are my observation

1) const and let can be used in the JS code (working fine)

2) document.querySelector() is returning null value, though I'm passing the proper element Id value

- instead use document.getElementBy();

Syntaxdocument.getElementBy('" + Element.Id+ "');


I just defined the onload function definition in the Footer placeholder of the screen - using the Expression widget (Escape Content property value Set as No)

Reason: The defined JavaScript statement is referring the Element runtime Id property value which is not available in the Screen JS editor section scope

It is better to initialize the Element Id with var instead of const (unchangeable) because there is a possibility that the element will change it's runtime Id value, if it gets refreshed using Ajax node by any means.

Please find the attached .oml file with updated code (please check the expression defined in the Footer Placeholder section of the screen)


Hope this helps!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Danny,

I did some check in my sample application and below listed are my observation

1) const and let can be used in the JS code (working fine)

2) document.querySelector() is returning null value, though I'm passing the proper element Id value

- instead use document.getElementBy();

Syntaxdocument.getElementBy('" + Element.Id+ "');


I just defined the onload function definition in the Footer placeholder of the screen - using the Expression widget (Escape Content property value Set as No)

Reason: The defined JavaScript statement is referring the Element runtime Id property value which is not available in the Screen JS editor section scope

It is better to initialize the Element Id with var instead of const (unchangeable) because there is a possibility that the element will change it's runtime Id value, if it gets refreshed using Ajax node by any means.

Please find the attached .oml file with updated code (please check the expression defined in the Footer Placeholder section of the screen)


Hope this helps!


Regards,

Benjith Sam

 Hi Benjith.Thanks for help. We are one step further. But I need also the messagebox which is generated automatically under the inputbox. Is there also a special syntax to catch in javascript the id of this box? The original generated messagebox looks always like this: 

ValidationMessage_wt48_OutSystemsUIWeb_wt5_block_wtContent_wtMainContent_OutSystemsUIWeb_wt51_block_wtColumn1_OutSystemsUIWeb_wt14_block_wtContent_wtCustomers_CustomerContactPhone

 

Danny Eeraerts wrote:

 Hi Benjith.Thanks for help. We are one step further. But I need also the messagebox which is generated automatically under the inputbox. Is there also a special syntax to catch in javascript the id of this box? The original generated messagebox looks always like this: 

ValidationMessage_wt48_OutSystemsUIWeb_wt5_block_wtContent_wtMainContent_OutSystemsUIWeb_wt51_block_wtColumn1_OutSystemsUIWeb_wt14_block_wtContent_wtCustomers_CustomerContactPhone

 Hi Danny,

To catch the Input ValidationMessage span element Id, use the below JS statement

document.getElementById('" + InputElement.Id + "').nextSibling.id;


Hope this helps you!


Regards,

Benjith Sam