When using WebBlock, i want to use javascript to hide a div(container), but im getting undefined funtion call and i dont get it why dont work
Marcio Carvalho wrote:
Nikhil Gaur wrote:
Hi Marcio,
I think you are using getElementById javascript method to get the container and then setting its style. So while using getElementById keep in mind that you have to use dynamically generated id of the contiiner not the name you entered in service studio for the container.
So you have to do something like this when adding your script in expression:
SyntaxEditor Code Snippet
"<script>var x = document.getElementById("+ContainerName.Id+"); if (x.style.display === ""none"") { x.style.display = ""block""; } else { x.style.display = ""none""; }</script>"
Note the parameter in getElementById. You have to use your container name and use its Id property to concatinate in script.
Yes thats It, im trying with id, but im newbie and i dont know how OS works with javascript, i already saw problems like this, and all of them was doing with nodejavscript, or run javscript action. I dont know how to do it in the simpliest way
If you are doing it in treditional web app then you have to add an expression in the screen and set its excape content property to No. In this expression just add this script as string and it will work like what you want. Just make sure that this expression should come after the container in your screen.
If you are using reactive web app then you can add an oninitialize event on screen and add this script using a js block in the event.
I would also recoment you to complete your web application development training first where you will find answers to most of the queries like this.
https://www.outsystems.com/learn/paths/2/becoming-a-traditional-web-developer/
https://www.outsystems.com/learn/paths/18/becoming-a-reactive-web-developer/
Hello Marcio,
Why dont you use for example, some if or "display:none" to hide it? Needs to be with javascript?
Regards
May I know why you want to do this via JS only? Because you can do that using Display (in treditional apps) or Visible (in reactive web apps) property of the containe. Just assign a variable to this property and you have to change value of this property to true and false to show and hide the container.
In Treditional you also have to use ajax refresh.
It appears that you're trying to invoke your function before it is actually defined...So the questions is, where the javascript is defined, and where are you invoking it?
Cheers,
Rúben
Ruben Goncalves wrote:
I built the function in either the web block or the template screen, and I called the function on the button, I already tried on the webblock and outside the webblock on the template screen
Hi,
I think you need to add some quotes to the get it to work, since it's a string you are passing.
so instead of
document.getElementById("+ContainerName.Id+");
you do :
document.getElementById('"+ContainerName.Id+"');