Custom Code is working in console but not when put in WeWeb

Ask us anything
1

I have this custom code

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const radioButtons = document.querySelectorAll('input[type="radio"]');
    const newGroupName = 'newRadioGroup';

    setTimeout(() => {
        radioButtons.forEach((radioButton) => {
            radioButton.setAttribute('name', newGroupName);
        });
    }, 2000); 
});

</script>

It changes the radiogroup for all radio buttons, I need this code since I had to style the radion button individually. the code above works when copy pasted to the console on the staging link, but is not working when put on the custom code of the page settings, can anyone tell me what I am doing wrong here?

Thank you

2

Custom code won’t work in the editor, but probably will work in the published app. Have you published your app and checked if its working on the live version of the app?

3

when you use the code in the console all the elements are rendered in the page, but on DOMContentLoaded they may not be present in the page. you may want to use the “on mounted” event on the elements that you want to access.
you can also set attributes directly in weweb

4

@raelyn Yes it is published and not working.

@dorilama I have tried setting attributes, but you can either put the attribute on the parent of the <input> or the label of the <input>, not on the input itself. Question though, where should I put the on mounted event? I have tried putting it on the Radio Group element and Form Container but custom code is still not running on the published site. the only one I have not tried is putting it on the Option element, but that is just the text of the radio button.

5

right. it looks like there is no control over the actual inputs, and because the name attribute is set by the vue component any modification that you do is probably undone by the next render of the component.
You may want to contact weweb’s team for this.

6

Also, always use wwLib.getFrontDocument()

1 Like
7

@Broberto tried using wwLib.getFrontDocument() but got a console error stating

ReferenceError: wwLib is not defined

not sure where to point it if I do <script src="path/to/wwLib.js"></script>

8 
<script>

// Here you access the WeWeb's document instance
const _document = wwLib.getFrontDocument();

_document.addEventListener('DOMContentLoaded', (event) => {
    const radioButtons = _document.querySelectorAll('input[type="radio"]');
    const newGroupName = 'newRadioGroup';

    setTimeout(() => {
        radioButtons.forEach((radioButton) => {
            radioButton.setAttribute('name', newGroupName);
        });
    }, 2000); 
});

</script>

By the way I think you could achieve this by simply using WeWeb’s no-code settings, such as Settings → Attributes

9

@Broberto

still receiving the same error.

Settings attribute does not allow me to put the attribute on the input itself, it only allows me put it on text or the parent.

10

Hey @Beldion , more inforamtion would let people in this community - all volunteers - help you more in less time. I looked at your description and I don’t have quite enough information to figure out what your situation is, let alone give better advice than what you’ve received so far. You’re obviously thoughtful and responsive and want to get this problem solved. I recommend making a video showing the situation, applying the code, what works, what doesn’t.

Another alternative is to have a more interactive session via an office hours type model. You could bring to either weweb office hours (they are held every couple of weeks) or I hold office hours working on these kinds of hard low-code things just about every day on State Change.

1 Like
11

Hi,
the radiogroup element have internal logic to set the name, which may regulary erased what you are doing with your script.
Can you explain me more about why you need to change the name? Maybe having an option to set it directly in the setting of the radiobutton will be a much more better solution

1 Like
12

@raydeck @aurelie

Sorry for the late reply, here is the link.

create page

Trying to style each radio so I had to add 3 radio elements for me to achieve the style I want.

13

Hi Beldion,
I still do not see the link between style of the button and putting an attribute name on it? Can you explain me more what you are trying to achieve so i can help you better?

14

@aurelie

The default radio button cannot be styled the way we need it to be styled. Here is a comparison using 1 radio group element and 3 radio group. So the solution I thought of was to use 3 radio groups, style them individually then just manipulate the name of all 3 of them to a single one so that the user can only choose one radio button. Currently with me using 3 radio groups with 3 names. the user can select all 3 of them.

image

Thank you

15

Hello :wave:

I’m 99% sure you can accomplish what you want here without writing code :slight_smile:

Here are a couple of videos:

  • one very close to your use case with 3 separate radio buttons, custom states, and some logic to ensure people can only select one at a time
  • one about the switch formula that can be super helpful to style items in a repeated list differently

Can you give this a try and let me know if it helps?

16

All good here, used checkbox instead of radio buttons for this.