Event Handler Stops Download Functionality

Ask the community
,
1

On my site, I have buttons that the users click to access pdf files. When they click on the button, the document is displayed. I wanted to add code to count the number of times the button is clicked but when I add an onClick event handler, the download functionality seems to be blocked (i.e., in Preview mode nothing appears to happen when the button is clicked; the document is not displayed.) I have reviewed the tutorial for adding the event handler. Do I need to include code there to actually do the download or something? Or is this something I need to test in production? Thanks.

2

Hi there …

First of all, it’d be much better if you share your code in a code block, I assume the button is connected to a dataset, right? Connecting it to the dataset, especially when you connect it to a file, the dataset actually creates a hidden onClick( ) event handler for that button, so whenever you click on it, the file gets downloaded, but when you create the onClick( ) event handler, it replaces the event handler the dataset has created.

I suggest disconnecting the button from the dataset, and get the download link from the dataset, and assign it to the button’s link , then use the button’s onClick( ) event handler to increase the number of clicks. - take a look at my recent answer here.

3

Thanks for your response. Actually, the button is not connected to a dataset, just to a document I have uploaded. It is “linked” but not “connected to data”, which works fine without adding the onClick event handler. What I am looking to accomplish is being able to track the number of times the button is clicked through google analytics.

4

I am trying to code a button to download a document and count the click of the button. The button is “linked” to the document but I am not using a dataset. I am using the following which clearly is not working. I have tried to understand Ahmad’s response but am still not able to get the document to download. This is my first attempt at coding outside the normal WIX code.

$w . onReady ( function () {

});

$w ( “#CastThyBurdenUponTheLordOrganButton” ). link = “Document link - I can’t sent links” ;
$w ( “#CastThyBurdenUponTheLordOrganButton” ). target = “_blank” ;

import wixWindow from ‘wix-window’ ;

export function CastThyBurdenUponTheLordOrganButton_click ( event ) {
wixWindow . trackEvent ( “CustomEvent” , {
event : “Document Download” ,
eventCategory : “CastThyBurdenUponTheLord-Organ-downloads” ,
eventAction : “downloads” ,
});
}

5

The import statement must be at the beginning of the code file.

The two lines of code that reference the button must be inside of the onReady() event handler.

Something like this:

import wixWindow from 'wix-window';

$w.onReady(function(){
    $w("#CastThyBurdenUponTheLordOrganButton").link= "Document link - I can't sent links";
    $w("#CastThyBurdenUponTheLordOrganButton").target= "_blank";
});
6

Thanks. I have adjusted the code as shown below, but it still doesn’t download the file. I think there must be some function that executes the download that I can’t find. I assume I put that function in the Export Function area that is created when I add an onClick handler.

I am also a little confused how to link my document in the code. It is a pdf file that shows in the media site files. When I click “copy url” I get
one link with a bunch of numbers and letters. But if I add this document to a dataset, it shows the document completely differently as …//v1/ugd/5f5a09_c66dd1ccab7247b8afc67f23aa3978df.pdf/Cast%20Thy%20Burden%20upon%20the%20Lord,%20Organ%20Prelude%20-%20Full%20Score.pdf, so I am unclear how to link it in the code.

I appreciate the help provided, but I am still struggling with this seemingly simple concept.

Code snippet below:

import wixWindow from ‘wix-window’ ;

$w . onReady ( function (){
$w ( “#CastThyBurdenUponTheLordOrganButton” ).link= “…/v1/ugd/5f5a09_c66dd1ccab7247b8afc67f23aa3978df.pdf/Cast%20Thy%20Burden%20upon%20the%20Lord,%20Organ%20Prelude%20-%20Full%20Score.pdf” ;
$w ( “#CastThyBurdenUponTheLordOrganButton” ). target = “_blank” ;
});

export function CastThyBurdenUponTheLordOrganButton_click ( event ) {

wixWindow . trackEvent ( "CustomEvent" , { 
    event :  "Document Download" , 
    eventCategory :  "CastThyBurdenUponTheLord-Organ-downloads" , 
    eventAction :  "downloads" , 
});

}