13
Views
2
Comments
Solved
Help to translate in Outsystems Javascript
Application Type
Mobile

Hi,
I'm newbie in Javascripting,would you help me convert the javascript code into OS javascript,


$( document ).ready(function() {

    $('.read-more').click(function(){

        $(this).parent().toggleClass('expanded');

    });


});


I'm doing a component with  an expandable container, the original script is here: https://jsfiddle.net/smo5vz67/


Thank you


Rank: #171
Solution

Jeriel,


Here you go.

Check the attached .oml

I though it was a TextArea, but actually you wanted a container right? So I did as a container for you.


Let me know if it helped.

Cheers and Regards,

RR :)

ExpandableTextArea.oml

Rank: #171

Hi Jeriel, 


Actually there is no such thing as OutSystems javascript, OutSystems use the default javascript language as it is.


Your code however, is using a Javascript Framework named JQuery (Check the link for more info).

JQuery is a Javascript library to accelerate some common codes. 

OutSystems Reactive and Mobile Apps do not include JQuery by default so you would need to use a pure Javascript approach.

You can even include some full libraries in your module as a "resource", check more about it here.


To be able to use the code you posted, the main change you need to do is about the selector '$()'. This is a JQuery sintax and is not available in pure JS.


Check here alternatives for the '$()' in pure JS, and other common things that you have to change.


With all this said, just to explain the difference between JS and JQuery... to implement what you want in OutSystems you would not need to use a '$( document ).ready'.


If you have a button, you can use it to call just a line of JavaScript and add a class in your text area.

I will implement a sample for you and will upload here for you.


Cheers and Regards,

RR :)

Rank: #171
Solution

Jeriel,


Here you go.

Check the attached .oml

I though it was a TextArea, but actually you wanted a container right? So I did as a container for you.


Let me know if it helped.

Cheers and Regards,

RR :)

ExpandableTextArea.oml