<a onClick={this.props.clickFunction.bind(this, type, route)} href='#'>LinkText</a>
The only way I can get the onClick to work, is to add # to the href.
But this means that # appears in the browser status bar and it's not much use to screen readers.
<a onClick={this.props.clickFunction.bind(this, type, route)} href='{route}'>LinkText</a>
If I use {route} in the href, I get the url in the status bar, but the clickFunction is not getting the route passed to it. So the onClick is getting overrode by the href
Is there anyway to get the second scenario to work and have the clickFunction perform its function and determine the routing rather than the href?
event.preventDefault() does not work in this case as it is forcing the page to refresh completely.
Related
I'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.
I am using meteor with iron router and meteors standard blaze tempting.
I have an ul set up so that when one of my li items is clicked its containing anchor tag is clicked on using the function click. The only problem is that when that a is clicked with the function it counts as another click on my li and my menu isn't toggling right.
I am wondering if there is a way to call the pathFor without actually calling a click function.
Thanks for any help!
Update, here is the code its working along with a pretty standard drop down nav. I am not sure if I can catch that event the same as a jquery event since I think it is the standard browser click event working on the [0], but I think I should be able to make a function that matches href to route and call Router.go
Template.nav.rendered = () ->
# set initial page view and take care of refeshes
currentPageHtlm = getCurrentPage(window.location.pathname)
$('#currentPage').find('span').html(currentPageHtlm)
$("li").on "click", () ->
#simulate anchor click and set currentPage session
$(this).find("a")[0].click()
Session.set 'pageName', getCurrentPage($(this).find("a").attr("href"))
currentPageHtlm = Session.get 'pageName'
$('#currentPage').find('span').html(currentPageHtlm)
# toggle nav and arrow if mobile view
if $('.smOnly').css('display') != 'none'
$('#nav').slideToggle('slow')
$('#dropArrow').toggleClass('fa-caret-square-o-down fa-caret-square-o-up')
It sounds like you're looking for a way to programatically redirect from JS rather than via UI interaction, in which case you need to use Router.go('ROUTE_NAME'), as per the docs (you can use the route name as in pathFor as an alternative to supplying the actual path).
I'm trying to use the Buttonset widget in JQuery UI. I've got the package loaded and my template renders the radio buttons fine. I have a "rendered" function to call the JQ UI routine to setup the buttonset:
Template.teamList.rendered = function () {
$("#buttonsetID").buttonset();
}
But it looks like the rendered function is being called before the template is rendered! I stick a console.log in the function and it prints out to the console before there's anything on the screen. So none of the radio buttons are set up, therefore the .buttonset() call does nothing. If I make that call in the console after the page is rendered, JQuery UI does the right thing and my button set appears.
Isn't the .rendered function supposed to be called after everything's set up? Am I doing something wrong?
Thanks!
edit:
As an example, the same thing is seen in the leaderboard example.
If you add:
Template.leaderboard.rendered = function() {
alert($('.player').length);
}
When the page is displayed, it will show 0. This makes it difficult to access the DOM items if you need to add some JQuery events or, in this case, a JQuery UI element.
rendered only works for elements which will appear in the DOM the very first time the template is added to the page. Assume that subscription data takes infinitely long to arrive, then look at the template and see which elements would appear in the default state.
Using the leaderboard example, we can't assume that players are available when the leaderboard template renders (it depends on a subscription). To target a player, you should use the rendered callback on the player template.
It's hard to generalize a strategy for when to apply jQuery plugins, but here are some ideas:
Use the rendered callback if the element will always be added in the default state (e.g. the element is hard-coded and doesn't depend on a conditional).
Use the rendered callback of the most specific child template to target that child (e.g. the player template from above).
Consider using an event handler callback to target the element if it's appearance depends on an event (e.g. a button click).
Consider using a template autorun callback to target the element if it's appearance depends on reactive state. See this question for an example.
I am using FullCalendar to embed a Google Calendar into this webpage
Since the colours of the Google Calendar events aren't being brought into Full Calendar, I'd like to style each of the events locally with different background colours.
Easiest solution would be to add a class name to each event. I would like the event title to be generated into the class name.
I have tried to use ClassName, but can't get it working.
Hope to hear from someone with some advice.
The className has to come back in the JSON, so you will need a proxy PHP/ASHX that you will call, pass parameters to it, that it will call the Google Cal, transfomr it and return something like this..
[{"title":"News that will blow you away!","url":"news.aspx?i=1657","start":"2011-11-22T00:01:00","end":"2011-11-22T23:59:00","color":"rgb(232,157,0)","className":"data-newsevent clickable","newsEvent":"True","EventName":null,"description":null,"EventCompTypeMSP":null}]
Proxy-Req: your request to the proxy
Proxy-Res: response from your proxy to you
Notice color, you can use that to define the colour of the event directly.
Notice my classNames data-newsevent and click able, i used those with jQuery to do certain special click events- they don't actually contain any colour styles, but you can do it, you might have to use !important because fullCaldner applies a default colour.
I first load the page with empty feed, then request the feed using client side, it seems more dynamic, using cache it can be quick enough if they navigate allot.
I would like the event title to be generated into the class name.
So you may use the eventRender callback like this :
eventRender: function(event, element) {
/**
* #params
* event : fullcalendar event
* element : jQuery container
*/
// be aware of whitespaces !
element.addClass("fc-" + event.title.replace(/\s+/g, "_"));
}
I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();