CODEWITHSUNDEEP
javascriptjqueryhtml
Tim AtLee
Tim AtLee

Reputation: 1009

jQuery click() to trigger HTML's OnClick property

I have (had?) this Greasemonkey script that uses quite a bit of jQuery to set some defaults in a web form. The web form is a from an HP Wireless network controller, so I don't believe I can modify the HTML being generated.

The script was working just fine, until a Firefox update came along. Now, all jQuery click() and dblclick() calls are not working. They throw an exception:

Permission denied to access property 'length'

The HTML that I'm trying to "click" is:

<input id="plan_selection-1" type="radio" onclick="UpdateSectionStates();" value="valid_time" name="plan_selection">

I am using the follwoing jQuery to click:

$('#plan_selection-1').trigger("click");

I have tried a few different things (using .click(), which I gather is the same as .trigger("click"), sending an actual mouse event as described on jQuery click() not working in a Greasemonkey/Tampermonkey script, however this failed, as dispatchEvent() "is not a function".

This had been working up until a few weeks ago, but I haven't gone back to figure what exact version of FF last worked on.

Any direction or help is appreciated.

Upvotes: 0

Views: 118

Answers (2)

ShaneQful
ShaneQful

Reputation: 2236

Have you tried to dispatch the events manually i.e. pure js

var input = $('#plan_selection-1')[0];
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 80, 20, false, false, false, false, 0, null);
input.dispatchEvent(evt);

Explanation: this is the way you would trigger the event in pure js. Also you don't need to recreate the mouse evet you can dispatch the same one multiple times to different elements so if this works, you can create one mouse event and just replace every $('#plan_selection-1').trigger("click") with $('#plan_selection-1')[0].dispatchEvent(evt) in order to get your code to work.

Upvotes: 0

Cheruvian
Cheruvian

Reputation: 5877

There are a couple workarounds to this issue.

You can try to see if click events are working for pure JS

 document.getElementById("plan_selection-1").click();

Otherwise if you just want to set the element to selected and call your function...

document.getElementById("plan_selection-1").checked = true;
UpdateSectionStates();

You may want to test to see if JQuery is working at all by checking if the selector returns an element or not.

Upvotes: 2

Related Questions