How to get placeholder ID in Reactive Javascript

I'm taking baby steps to working with Outsystems Reactive and mobile.   One big difference I'm seeing are the steps required to use Javascript.   I thought a good exercise would be to work on making this carousel into a reactive widget.

https://kenwheeler.github.io/slick/

I have attached my OML but I'm doing something wrong.   I have the Jquery and slick scripts pulled in and have created a block that leverages the proper script.  Those files all seems to be loading as expected.   I'm running into an issue when I create my OnReady event.    

I need to add the code below and I believe I really need to swap the .your-class with #slickcontent.id.   But I don't see a way to get that ID in Reactive/mobile.   In traditional web it's in scope because I can just add an escaped expression to the block.

$(document).ready(function(){  $('.your-class').slick({    setting-name: setting-value  });});


The other issue I'm hitting, when I use input Params in my JS.  Most of the time it's fine, but when I pull them into my selector the $parameters.value is being treated as a literal.   So I get an error saying $parameters.value is not defined.   Any help would be greatly appreciated.

Hi Josh,

You need to concatenate your jQuery selector like this: $('#'+$parameters.WrapperID)

Currently your parameter is inside the quotes so it's being treated as part of the string.

As for why the slick library doesn't work, my guess is that the slick.js library isn't 100% compatible with React.  I've had trouble with jQuery DOM manipulation with React in the past.


Greg

Thanks!   The other thing I can’t figure out, in my web block that contains my logic I have a placeholder for content.   But I can’t see that placeholder ID in my onready function.   Any idea when/how I can get that?   (Or how I can just assign a class to the placeholder?)

Hi Josh,

Place holder is not a DOM element so you can't use its id or other properties in your js or other logic. But what you can do is just enclose your placeholder in a container, give this container a name and then use its ID in your onready where ever you need.

Solution

Josh Herron wrote:

Thanks!   The other thing I can’t figure out, in my web block that contains my logic I have a placeholder for content.   But I can’t see that placeholder ID in my onready function.   Any idea when/how I can get that?   (Or how I can just assign a class to the placeholder?)

Hi Josh,


The placeholders are translated to <div>. So the approach that I take in my codes is to assign a  class js<Placeholdername>

For example: The placeholder Breadcrumbs has been assigned a class jsBreadcrumbs.

Then use the following JS:

var x = document.getElementsByClassName('jsBreadcrumbs');


Regards,

Saugat


Solution

Thanks all!   I believe I'm on the right track now.