[Question] How to add value to a field dynamically in the UI?

20 views
Skip to first unread message

Parichay Barpanda

unread,
May 21, 2020, 5:26:46 PM5/21/20
to Jenkins Developers
Hi,

I want to set value of a Describable field using an UI button. There is a text box Token and there is a button Generate, if Generate Button is clicked then Token text box should be filled with a desired value. 

Thanks and Regards,
Parichay

Gavin Mogan

unread,
May 21, 2020, 5:40:37 PM5/21/20
to Jenkins Developers
document.getElementById("buttonid").addEventListener(function(e) {
       document.getElementById("idname").value = "foo";
});

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/f24e4719-9050-4470-bbb0-f09cde79d8ad%40googlegroups.com.

Parichay Barpanda

unread,
May 21, 2020, 6:11:49 PM5/21/20
to Jenkins Developers
Thanks Gavin. That was helpful. :)

Gavin Mogan

unread,
May 21, 2020, 6:21:45 PM5/21/20
to Jenkins Developers
Sorry, I got distracted when i hit enter.
you want a click event for the button

document.getElementById("buttonid").addEventListener('click', function(e) {
       document.getElementById("idname").value = "foo";
});


Parichay Barpanda

unread,
May 21, 2020, 6:37:28 PM5/21/20
to Jenkins Developers
Np. 

I am trying to create a button element:

f.entry() {
    raw("""
        <button class="gen-secret">
            Generate Secret Token
        </button>
    """)
}

then the listener:

raw("""
    <script>
        document.getElementByClassName("gen-secret").addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementByClassName("secret-text").value = token;
        });
    </script>
""")


So when I click on the button it takes me to home page. How can I prevent this behaviour?


On Friday, May 22, 2020 at 3:51:45 AM UTC+5:30, Gavin Mogan wrote:
Sorry, I got distracted when i hit enter.
you want a click event for the button

document.getElementById("buttonid").addEventListener('click', function(e) {
       document.getElementById("idname").value = "foo";
});



On Thu, May 21, 2020 at 3:11 PM Parichay Barpanda <parichay...@gmail.com> wrote:
Thanks Gavin. That was helpful. :)

On Fri 22 May, 2020, 03:10 'Gavin Mogan' via Jenkins Developers, <jenkin...@googlegroups.com> wrote:
document.getElementById("buttonid").addEventListener(function(e) {
       document.getElementById("idname").value = "foo";
});

On Thu, May 21, 2020 at 2:27 PM Parichay Barpanda <parichay...@gmail.com> wrote:
Hi,

I want to set value of a Describable field using an UI button. There is a text box Token and there is a button Generate, if Generate Button is clicked then Token text box should be filled with a desired value. 

Thanks and Regards,
Parichay

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkin...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkin...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkin...@googlegroups.com.

Gavin Mogan

unread,
May 21, 2020, 6:47:04 PM5/21/20
to Jenkins Developers
Get element by class name returns an array. It should have spit out an error in your browser console.

Id = one
Class = sharable = many

I'm guessing the button is inside a form or something? A button by itself won't do any page navigation, and it should need to be a submit button to submit a form, but maybe by default if there's only a single button browser treats it as a submit.

I would say if you fix your errors, then it shouldn't redirect with prevent default


To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/39bc0fbb-4657-4ef4-9625-d776a2a4d498%40googlegroups.com.

Parichay Barpanda

unread,
May 21, 2020, 6:54:32 PM5/21/20
to Jenkins Developers
Yes having adding an Id to the element instead of class solves the problem. But this config is inside a repeatableHeteroProperty which means there could be multiple buttons with the same ids which will change multiple fields so it is an issue. Can I some way get the index of individual properties?

Gavin Mogan

unread,
May 21, 2020, 6:59:43 PM5/21/20
to Jenkins Developers
So it looks like forEach doesn't work in ie11 - https://caniuse.com/#feat=mdn-api_nodelist_foreach, so you'll have to use a normal loop, something like

var buttons = document.getElementByClassName("gen-secret")
for (var i = 0; i < buttons.length; i++) {
   buttons[i].addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementByClassName("secret-text").value = token;
        });
}
To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/04e13fad-3502-4645-8d98-4b14b2b0b7fe%40googlegroups.com.

Parichay Barpanda

unread,
May 21, 2020, 7:06:36 PM5/21/20
to Jenkins Developers
I am kinda confused bcz this doesn't solve my problem. If I click on a button then the secret-text of that particular property should change but if all buttons have same listener then all secret-text fields will change. I want some ability to set different id to buttons in different properties(read: array inside repeatableHeteroProperty).

Parichay Barpanda

unread,
May 21, 2020, 7:27:11 PM5/21/20
to Jenkins Developers
I made a hacky solution for this by padding a random 4 digit number to secret-textbox and gen-button with RandomStringUtils.randomNumeric(4). The possibility of conflicts is less as number of properties added is usually 1-2 (max 5). What do you think?

Gavin Mogan

unread,
May 21, 2020, 8:01:12 PM5/21/20
to Jenkins Developers
Thats probably fine

you can also use like element.parentNode and classlist (https://stackoverflow.com/questions/31608928/event-target-classlist-doesnt-have-indexof-method) to find the right node, but depending on your dom structure your way is probably easier)

buttons[i].addEventListener('click', function(e) {
            e.preventDefault();
var container = e.target;
while ( container.parentNode &&  container.parentNode.classList.indexOf('repeatable-property');
container =  container .parentNode;
}
           container getElementByClassName("secret-text")[0].value = token;
        });

To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/286e1495-fc66-44a0-a751-ccbec0ead06c%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages