Google Tag Manager Button - vue.js

I have a button which has padding however it is wrapped in a span tag. I'm using Click - All Elements as a trigger in Google Tag Manager.
<button id="gtm-id" class="gtm-class"><span>Click here</span></button>
So if I now click the span instead of the button element in the DOM, the span is "this" it's the element being clicked, so now it doesn't get the id="gtm-id" because it's not the element being clicked.
How can I get Google Tag Manager to bubble up and get the data from it's wrapping parent element?

I set pointer-events:none on my span effectively hiding this from a click event to expose the <button> wrapping layer underneath

Related

Extending vuetify v-btn component, adding custom click event

I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.
It would be ideal for the button to change color while disabled.
This is a problem, since color is a property, and I can't overwrite it's value...
Also, when I try to invoke super.click(e), I get an error.
You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx
Your Btn component should just "use" v-btn rather than extending it.
v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>.
#click event is captured and reemited as-is after doing what needs to be done
See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56

Apex buttons in Interactive Reports break when built-in search filter used

In Apex 5.0.2. I have created a copy-to-clipboard function in my interactive report. The user can copy the value of a hidden column by clicking on this button that is set in a column and is repeating in every row (see image below).
The copy column is edited with an HTML Expression which does the following:
<button class="copytoclipboard
t-Button
t-Button--noLabel
t-Button--icon
t-Button--stretch" customid="#COPY#" type="button">
<span class="t-Icon fa fa-copy" aria-hidden="true">
</span>
</button>
My Dynamic Action with the event 'click', jQuery selector .copytoclipboard has 2 true actions. 1 sets the value of a page item (text_field) by getting the customid from that row with:
this.triggeringElement.getAttribute("customid")
The second one then copies this value to the clipboard.
This works fine and when I inspect the button element, I see the correct HTML output, with the correct value. However, as soon as I use the built-in search filter in the Interactive Report, my button breaks and clicking this button does not trigger my dynamic actions anymore, however, inspecting the element still returns the expected HTML output.
Can somebody please clarify why this is happening, and how this could be avoided?
Thank you in advance.
I found the solution. I had to put the Event Scope of the Dynamic Action to Dynamic, which is set to Static by default. Using the built-in page filter does a PPR of the report, thus when static, the event handler is longer bound to the triggering element.
Static (default) - Binds the event handler to the triggering elements
for the lifetime of the current page, but will no longer be bound if
the triggering elements are updated via Partial Page Refresh (PPR).
Dynamic - Binds the event handler to the triggering elements for the
lifetime of the current page, including any triggering elements that
are recreated via Partial Page Refresh (PPR).
Once - Binds the event
handler to the triggering elements for a once only event.

Dynatree - How to enable onActivate on <a> tag rather than <span> tag?

Based on the sample tree above, I would like to enable the <a> tag for the event onActivate rather than <span> tag.
I had been using the onActivate and onClick function based on Dynatree documentation. But whenever I clicked the span area, the function still activate the onActivate and onClick, whenever you click them.
Is there any way to just click the <a> tag?
Thank you.

Click DIV doesn't make a “real” click operation in IE

Browser: Internet Explorer 8 with compatibility view turned on (the tested application was written for IE7). I have a div element, which looks like a checkbox in the browser. When I manually click it the checkbox ticks itself. Here is how this looks like: http://img593.imageshack.us/g/divunchecked.jpg/ When clicked manually the div element also changes it's class attribute from "x-grid3-check-col" to "x-grid3-check-col-on". When I run a Watin test and make a Div.Click() operation the element doesn't check itself. Html of that element:
<DIV class=x-grid3-check-col onclick=booleanInterviewColumnRender_OnClick(this);> </DIV>
I have tried to:
- click 2 of the div's parents (it is placed in 2 other divs)
- Div.MouseDown();
Div.MouseUp();
- Div.Firevent("onclick");
- NameValueCollection eventProperties = new NameValueCollection();
eventProperties.Add("button", "0");
Div.FireEvent("onmousedown", eventProperties); //left mouse click
- Div.SetAttributeValue("class", "x-grid3-check-col-on");
Div.Refresh();
without luck.
Any ideas how to workaround this would be great.
The last workaround is to run directly the javascript call.
if you put an id on your div element: elementID
then you call
div.Document.Eval("document.getElementById(\"elementID\").fireEvent(\"onclick\")");
And it will call the onclick call back you put in your attribute (you can first try in the console to be sure that the javascript call your callback).
However, I think that the WatiN mehod .FireEvent on the Element does the same thing, so I don't understand why you need this workaround.

Scroll until a specific point or element will be visible of page

I have a button which I use the click element to press it. It is a show more button.
webElem$clickElement()
However in some pages the r selenium gives this error:
Selenium message:unknown error: Element <button class = "mybutton">...</button> is not clickable at point (462, 24). Other element would receive the click: <div id="etype">...</div>
Is there any idea if I can make RSelenium go to the specific point or if there is another option than click? Or generally scroll until the element is available?
Try using
remDr$mouseMoveToLocation(webElement = webElem)
before webElem$clickElement(). If the element webElem is not on screen you can't click on it. You must move it into view with the method mouseMoveToLocation.