227
Views
17
Comments
Solved
How to hide a container using javascript script?
Application Type
Reactive

Hello,

I'm trying to hide this grey container with javascript but none of the code i wrote is working regarding the "darkcontainer".

I tested with 'reactcontainer' and in did it work, my page was white, that's what supposed to happen.

document.getElementById('reactContainer').style.display = "none";

But using the same code on the container that i created, my page stays the same with the grey container.

document.getElementById('darkcontainer').style.display = "none";

or

document.getElementById('darkcontainer').style.visibility = 'hidden';

This is the error:

App example:

I think my problem is on the call of the container since it comes null.

Thanks


2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

So what I did I think we are getting the error in JS because, Our DOM is not loaded properly and before its loading, we are trying to hide the element, so Dom is not loaded that means no Id is returned

So I did a try with a set timeout funcion

setTimeout(() => {
let get = document.getElementById('abc123');
get.style.visibility = 'hidden';
},0);

So it worked.
I am attaching an Oml that you can check. hidecontainerjs screen

Thanks
Tousif Khan

SampleHideDiv.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Hi Bruno,

You can hide using the Visible property it's more easy.

Anyway seems your JS doesn't get the DIV. If you want share your URL, I can have a look.

What's the proposal? Or you are just playing?

I give a JS to do +/- the same you want:


UserImage.jpg
Bruno Parreira

Hello Paulo,

The premise of this problem is to make a popup appear after 15min, warning that the person will be logged off after 5min. And at the same time I have an "Onclick" function resetting this timer. 


Only I can't call a client action through javascript script (not the javascript element), it has to be a script. So I was going to use a container to show and hide this message.


But this function (document.getElementById) is not calling my "darkcontainer".

I can't use screen actions, only javascript script to hide and show the container.


2023-10-21 19-42-11
Tousif Khan
Champion

Hello

Why don't you use the JavaScript on a Screen life cycle event OnReady
It is working fine  you can just pass the Id to your Js code by taing input parameter in your JavaScript Widget, Just remember to give a name to the container or and widget you are using

check oml attached for your reference,

Thanks

Tousif Khan

SAmpleApps.oml
UserImage.jpg
Bruno Parreira

Hello Tousif,

I cant use screen actions, only javascriopt script.

I cant do what i want to do if i use screen actions :/

2023-08-28 07-00-10
Paulo Torres
Champion

If I understood well it's an exercise, right?

If you can't use client actions ok, but you can use JS placed in OnReady as Tousif told, right?

UserImage.jpg
Bruno Parreira

Actually is a work problem that nobody seems to have the solution.

I cant use actions, only javascript script.


My problem is on the id call of the container:

document.getElementById('darkcontainer').style.display = "none"; 

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

So what I did I think we are getting the error in JS because, Our DOM is not loaded properly and before its loading, we are trying to hide the element, so Dom is not loaded that means no Id is returned

So I did a try with a set timeout funcion

setTimeout(() => {
let get = document.getElementById('abc123');
get.style.visibility = 'hidden';
},0);

So it worked.
I am attaching an Oml that you can check. hidecontainerjs screen

Thanks
Tousif Khan

SampleHideDiv.oml
UserImage.jpg
Bruno Parreira

Hello Tousif,

Thank you very much, this is exactly what i wanted. 

I didn't think about the part about DOM not having loaded yet.


2023-10-21 19-42-11
Tousif Khan
Champion

You are Welcome,
I am glad that I was able to help, you with this :) and you get what you wanted to achive.

Best Regards
Tousif :)

2023-08-28 07-00-10
Paulo Torres
Champion

Share the URL

UserImage.jpg
Bruno Parreira

Hello Paulo, 

I can share the .oap file.

Testing.oap
UserImage.jpg
Rogier Fluitsma

Hi,


If the javascript returns a message like that there could be a number of reasons.
Most commonly it's a case of the identifier you're providing is incorrect; or the element you are referring to does not exist (yet). That last bit could be when the div is rendered in there later (for instance if it was in an if-clause that became true/false after a certain time or whatever).


I personally never use the name of a container in combination with getElementById as normally the Id is rendered at runtime.
What you can do is pass the darkcontainer.id as an inParameter into your javascript and use that.

Or alternatively:
Use document.getElementsByClassName("superdark")
Be aware that the last command can return more than one result; so you might want to use something like
document.getElementsByClassName("superdark") [0].style.display="none"


I hope this helps you

2023-08-28 07-00-10
Paulo Torres
Champion

I don't understand why you can't use actions and also I don't understand your problem.

Check the image:

2021-09-06 15-09-53
Dorine Boudry
 
MVP

his problem is not one of wrong name, but of timing

2023-08-28 07-00-10
Paulo Torres
Champion
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Bruno Parreira ,

first off, as others have said, it is incomprehensible why you wouldn't just use the platform itself, taking advantage of such things like an OnReady, that are there for your convenience as a developer, why insist on it being in a script ????  

If you are going to use a platform like Outsystems, your approach should be lowcode first, and only do in javascript what you can't achieve in actions.  Otherwise you have yourself an expensive and poor code editor.

If you do insist on the script solution, you have first off the problem of id, as suggested, use a class instead.  But more importantly, you have the problem of timing that you have to take care of yourself instead of relying on the OnReady of the platform.

The code in your script gets executed as soon as the script is loaded (determined by where it is in your html).  You can't just assume that the element you want to do something with, is already there.  Google it, as there is a wealth of javascript information out there.  You could wait for the whole dom to be loaded, or use MutationObserver.

Dorine

2021-09-06 15-09-53
Dorine Boudry
 
MVP

see attached a modification of your oml, look at NoScriptTimedPopup block used in NoScriptScreen.

The only javascript used, is setting an interval in the OnReady and clearing the interval in the OnDestroy.

Dorine

TestingModified.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.