Javascript not working

Need help Plugins
1

I am using the javascript toolbox and the javascript is not executing as expected.

I want to programmatically select text from a rich text input. I followed the steps:

  1. changed app settings in the app to expose the option to add an ID attribute to HTML elements

image
image2465×874 129 KB

  1. added an ID attribute to a rich text editor

image
image341×825 37.3 KB

  1. added a JS to the worflow

image

  1. not working. this is the js code - appears to be correct as per online help on how js works

    const input = document.getElementById(‘YOUR_INPUT_ID_GOES_HERE’);
    input.focus();
    input.select();

I got the tip here Handy tip: Here's how to highlight input text using JavaScript and everything appears to be set up correctly, but the text is not selected.

1 Like
2

You’re probably running that script before the element actually exists in the page. Insert a console.log() statement to examine the value of input.

You may be able to easily defer this action to the appropriate time by waiting for “Page is Loaded (entire)” (or whatever it’s called) to be true.

1 Like
3

hi there,

I think the element exists because the page was loaded way before the js was triggered.

I did check the console and this is what comes up. any ideas?

image

thanks a lot again.

4

What I was suggesting is logging the value of input. It is probably undefined or null. (And hence it is not an HTML input object and so does not have the select method.)

You’re running this code on the page loaded event, aren’t you…

5

correct, input is not defined.

image

apologies, I am a bit of a noob in this matter. what does “you’re running this code on the page loaded event” mean?

What I am doing is showing a focus group and as part of the workflow the js is triggered. But the page was loaded in a previous step.

6

Yeah you can’t do this until the input actually exists. Use the Expression element from toolbox (script empty by default) and then change its script once the input in question becomes visible via the conditions tab.

1 Like
7

thanks a lot Keith. I do not want to abuse, but I did not understand a thing.

How do I use the expression element?

and how do I change the script once the input becomes visible?

and how do I know when it becomes visible?

8

If you share your editor, a Good Samaritan may help here. At the moment, I’m away from keyboard and so am just providing general advice.

Your issue is that you are attempting to find (via getelementbyid) an element that does not yet exist in the page. And so your script fails. If you trigger it on “the input in question is visible” it will work, most likely.

9

Pretty sure he’s just saying you need to delay your running of that workflow until the page is rendered.

Test that theory by running the script from a button click. If it works, you can figure out the rest from there.

10

Well until that specific element is rendered, @troy.roberge - so yes you are correct!

There are bulletproof ways of doing this (put a mutation observer on the page), but I can’t write them on my iPhone.

1 Like
11

So, I’m not sure how what you’re doing is really different from just setting the input’s focus when it’s visible:

image
image1280×746 54.9 KB

If you really want to set the initial content to be selected, like I was saying, you just fire the script when the input becomes visible:

image
image1108×1000 73.4 KB

… but if you did want to execute some script on page load that waits for an input and then, whenever it first shows up on the page, set focus to it and select its contents, you could run the following script in a Run JavaScript action.

What this does is uses a mutation observer to watch for the element specified with selector (which should be a CSS selector - in this case an ID selector which is a string like '#element-id', so in your case you called your element ‘cus-input’, so the selector for it would be '#cus-input'). In my example code below, my element is called ‘#hidden-input’ (so you’d replace that with your input’s ID.

The first part of the code defines the function waitForElement and then in the last line, we call that function. It waits until the specified element appears in the page and executes the code in the .then() clause (which here just calls the element’s .focus() and .select() methods.

Here’s the code - you’d trigger this on the Page Loaded event:

function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }
        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector))
                observer.disconnect();
            }
        })
        observer.observe(document.body, {
            childList: true,
            subtree: true
        })
    })
}

waitForElement('#hidden-input').then((elm) => (elm.focus(), elm.select()))