unable to simulate click event on element for example with `customerAddress.attr("size" , 5 ) ; ` – zlobul May 26 '18 at 10:12

Question

Have you tried:

let select = document.getElementById("thePage:form:pBlock:address:addressTypeSelectionDropdown")
select.addEventListener("change", (event)=>{
    console.log(event)
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.content = "onchangeofPicklist()"
    select.appendChild(s);
})

You need to intercept the change event using an event listener, and you should be able to call the existing change event handler (if necessary) from your new (extended) handler by injecting a script into the document.

JSFiddle

Michael.Lumley · Answer 1 · 2018-05-26T10:20:34.740

1

Have you tried:

let select = document.getElementById("thePage:form:pBlock:address:addressTypeSelectionDropdown")
select.addEventListener("change", (event)=>{
    console.log(event)
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.content = "onchangeofPicklist()"
    select.appendChild(s);
})

You need to intercept the change event using an event listener, and you should be able to call the existing change event handler (if necessary) from your new (extended) handler by injecting a script into the document.

JSFiddle

edited May 26 '18 at 10:20

answered May 26 '18 at 09:51

Michael.Lumley

2,345
2
31
53

yes , but as I said onchangeOfPicklist() is not part of my code , so I'm getting an error : [ts] Property 'onchangeOfPicklist' does not exist on type 'Window'. – zlobul May 26 '18 at 10:05
thanks , but this also doesnt seems to work , I have modified a little bit as using typescript : – zlobul May 26 '18 at 10:35
`select.addEventListener("change", (event)=>{ console.log(event); let s:any = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.content = "onchangeofPicklist()"; select.appendChild(s); }); customerAddress.change(); customerAddress.val("Closest to Customer");` – zlobul May 26 '18 at 10:36

score 1 · Answer 2 · answered May 26 '18 at 09:58

1

The change event is triggered at select element level not option, so :

let customerAddress = labelAddress.parent().next().first().find("select");
customerAddress.change();

should do the trick and trigger a change event for the select element. And if you want to set the value use val() :

customerAddress.val("Closest to Customer");

See Set an option value as selected

answered May 26 '18 at 09:58

Bertrand

1,840
14
22

this is only triggering the change of the value , but not triggering the change event . Doesn't work in my case ... – zlobul May 26 '18 at 10:01
Look at doc : https://api.jquery.com/change/ - "Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.". Use customerAddress.val("Closest to Customer").change() to set value AND trigger a change event – Bertrand May 28 '18 at 06:44

score 0 · Accepted Answer · answered Jul 12 '18 at 14:07

ok here is what I did to make this working, similar to Michael.Lumley's answer :

let execFunct = function () {
    let script: HTMLScriptElement = document.createElement("script");
    script.textContent = "onchangeOfPicklist()";
    (document.head || document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
}

once I change the dropdown I execute the execFunct().

3 Answers3