I have a wordpress page where I want to create custom events.
I would like to measure how many people click on different links/entries on my page.
I have been reading and I should create in HTML an on click DOM event for those entries/links, but I am not sure how to set this up.
Then I also require the DOM selector.
Would somebody give me an example of how to do this?
Below is an example of how it looks an entry on HTML:
-Shoes: Click acá!
Thanks very much.
Sabrina C.
I think this is what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A better solution might be:
<a onclick="log(this)" href="https://www.paruolo.com.ar/" rel="nofollow noreferrer">Click acá!</a>
<script>
function log(e){
alert(e.href);
alert(e.innerHTML);
}
</script>
This would allow you to pass the item to a fetch call that you replace the alert with to log on your server or on the page. Just replace the alert with another function that handles your data and handle by link or the text in the link.
Related
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
I have an element in my product list page that I want to hide until the rest of the document has finished loading. (it's a list item with the class "hideme")
The JS solution doesn't work for me, so I'm looking for a scriptaculous method, which should work better in Magento.
Any help would be greatly appreciated.
Thanks!
If you want to make something client-side once the DOM has been loaded, you should try with this:
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
Is more like jQuery(document).ready();
Greetings.
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
I´m trying to add a click event via id to a div, so that when you click on it, it moves using effects.move, but after clicking on it the first time I want the id to be removed so that it doesn´t move anymore. So far I´ve tried using observe and stopObserving - and also removing the associated id so that it doesn´t move any more. I can´t figure out how to integrate a click event with an observe, without adding it directly to the div.
Any suggestions or relative links would be greatly appreciated!
link to jsfiddle:
http://jsfiddle.net/QN4TN/2/
Once you have set the observer removing the ID will not stop the event being handled. You should do something like this:
<div id="moveme">...</div>
<script type="text/javascript">
$('moveme').observe('click', function(ev) {
ev.stop();
ev.target.stopObserving('click');
... Call move function here ...
});
</script>
This will respond to the click by removing all the click handlers from the div (And then calling your scriptaculous code). If this is a problem, you should store the pre-bound handler and then pass that as the second parameter of the stopObserving method.
How can I know the url under the mouse cursor from a firefox extension?
I need to interact with the href from within the overlay.js file.
I'd want a lightweight solution, for example I don't want to attach some event to all hrefs found in a page.
I'd rate a mouseover solution but how can't find anything useful for me!
Thanks
You could use event delegation and attach single event listener to the document.body element, instead of all hrefs on the page. Then you need to check if the element which triggered your listener is a link or not. Here's a simple example that demonstrates the idea:
document.body.addEventListener( 'mouseover',
function(e){
if(e.target.nodeName=='A'){ alert( e.target.href ) }
}, false);
You don't really have a choice but to attach an event to all anchor tags on a page. Sorry.