I am using zorro antd to implement multiple tabs feature, I would like to warn my user when they have unsaved changes, and only leave the tab if the user confirms. Seems there isn't a callback before leaving the tab, (nzSelectChange) is the call back after tab changed instead of before. So how can I implement a feature like this using nz-tabset of zorro?
NzTab has a (nzClick) EventEmitter to handler the tab title click event, but it does not emit the native mouse-event, so we cannot capture the native event. But I found the nz-tab [nzTitle] property can be a TemplateRef, so we can build our tab title and handler the click event before triggering tab-set's (nzSelectChange). For Example:
<ng-template #tabTitle1>
<div (click)="beforeActivateTab(0, $event)">Tab 1</div>
</ng-template>
And, I build an online example you can visit here:
https://stackblitz.com/edit/ng-zorro-antd-start-drc5uf
Related
I'm trying to set up a click event for a certain button in GA4 Analytics in GTM, but the event does not fire in the preview.
The button has a specific ID. I can see the ID in the DOM, I can see that the gtm.element contains the ID in the API call, but the debug information shows that the Click ID does not match.
I've tested with my front-end developers that the event click events are propagated through the DOM. On a simple image where I've set up the click event in the same way the click event is properly registered.
Any insight in how to solve this is greatly appreciated.
From you screenshots. Looks like GTM detect the click is fired on the <span> inside the button you want.
For this kind of case. I would suggest to use click element as your trigger.
Here is the selector
button#ga_welcome_start_print_job, button#ga_welcome_start_print_job *
This means we want to track the click for the button and all the element inside it.
TLDR; wrap text in an attribute that has id property. Make a custom variable in GTM, of type 'Auto Event Variable' -> Variable Type = Element ID. Then assign to tag.
I had a similar situation. I was using React MUI's Button and I noticed that the id attribute wasn't actually being assigned to GA4's elementId. My guess is the id attribute wasn't 'bubbling' up or it was being processed somehow in MUI which conflicts with GA4. Anyways, I literally just started using analytics, so here's what I did to get it working.
I had a MUI button with the following setup
<Button
id='location-filter-tag'
className='reco-filter-button'
variant={searchState === 'cumulative' ? "contained" : "text"}
size="small"
onClick={() => {
setQueryType('cumulative');
}}
>
<h6 className="some-class">
Location
</h6>
</Button>
Checking the the push event gtm.click below, you can see the id='location-filter-tag' is concatenated into one big string. under gtm.element.
At the time, the gtm.elementId was an empty string (image is of working instance)
I tried to hook into gtm.element and trigger the tag using contains = location-filter-tag but that didn't work. So I moved the id property to the child attribute to get it to register with GA4's gtm.elementId
<h6
id='location-filter-tag'
className="text-overflow reco-filter-text"
>
Then in google tag manager, I setup a variable like so:
Then I assigned it as a trigger. This is my location trigger
hope that helps.
I am implementing Google One Tap in my website, however I am unable to prevent the popup from spawning immediately after the logout. I know I could manually set a cookie for that, however the official documentation suggests to add the class g_id_signout to any link or button used for the logout. In my menu I have this entry:
<li>
<a id="public-logout" class="g_id_signout" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
but the popup still shows immediately after the logout. For reference, the "X" button on the One Tap popup triggers the cooldown regularly. Any idea?
Is the link dynamically created after Google One Tap library loaded?
If that's the case, the library cannot add correct event handler to this link.
You can try to add the click event handler by yourself with the example code below:
<li>
<a id="public-logout" onclick="google.accounts.id.disableAutoSelect(); return true;" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
Or, you can bind the click event hander by JavaScript code.
More details at: https://developers.google.com/identity/one-tap/web/reference/js-reference#google.accounts.id.disableAutoSelect
Please refer to the following https://github.com/CD1010/BlazorWizard.git for this question. The sample is in StepActivations Branch
I have a page called DemoWizard, which incorporates a 3 step wizard. When i click the "Toggle Enabled" button, the second and third steps links should go to enabled or disabled state. It seems however, that the first time takes 2 clicks to turn off the headers, and the state is always behind.
So it appears that StateHasChanged() is not refreshing child states properly.
Note that the refresh() method was an attempt to get at least step2 to refresh properly, but to no avail.
Any idea why?
the click handler that does toggle is below.
void OnClick()
{
step2Enabled = !step2Enabled;
step3Enabled = !step3Enabled;
StateHasChanged();
Step2.Refresh();
}
Your code isn't showing up exactly as advertised, but i think what you need to do is add an event callback to the Blazorize CheckEdit component:
<Blazorize.CheckEdit #bind-Checked="#Parent.IsValid" CheckedChanged="#VerifyEnabledTabs">Check Me</Blazorise.CheckEdit>
where VerifyEnabledTabs is a method on the top level Wizard that can assess where you are and what is complete / filled / checked / whatever, to allow certain links to be active.
i'm new with Odoo 8. I added a Button in my module (inherit sale order) to be able to execute the method calkulateEKNew. The function is calling how it should be, but it looks like that the button is doing more stuff in the background. After clicking the button it saves the sale order and calls the method calkulateEKNew.
Is it possible to trigger this button or to find the logic behind the button ?
Nice regards
Buttons are available to execute python methods on the Odoo server.
If you want to execute JavaScript code, you'll have to add a (client-side) widget, possibly a template and a JavaScript file to your module.
This URL points to further information about simple widgets:
https://www.odoo.com/documentation/8.0/howtos/web.html#widgets-basics
I have implemented tabbed browsing using this http://css-tricks.com/functional-css-tabs-revisited/
I have a click event inside one of my tabs(say tab1). Is there some way I can redirect from tab1 to tab3 inside this click event??Since, the link says 'no javascript', I am skeptical whether this can be done or not
Adding this inside the eventlistener code works:
document.getElementById("tab-3").checked = true;