How to open a PDF in new browser window, making the active browser window the displayed PDF.

Discussion Ask a question
,
1

I have a website where the user can download PDFs. The owner of the site wants to keep track of how many people have download a pdf via the site.

I know WixCode (or coding at all) very little, but I understand how to add prewritten WixCode to a site, and label buttons and site elements, etc.

In order to do this, I received a method and code from a WixCode expert and it is working well. I have code on the site that creates a timestamp for each button click and adds it to a data base, and then displaying the PDF in the browser. I am keeping the Wix button that is linked to the PDF, and then I am created a new button that hides the original button, and this new button as code to create the timestamp.

The problem is: With a standard Wix button with no code linked to a PDF, the PDF opens in a new browser window, making the ACTIVE browser window the page displaying the PDF.

With the code I am using to create a time stamp in my database, the PDF does open in a new browser window, but the browser then makes the ACTIVE browser window the website, not the newly launched browser tab that displays the PDF.

Does anyone know how I can change the code I have, so when a PDF is downloaded, the active browser window is the window displaying the PDF?

Note I tested this in Chrome, Safari and Firefox, all on a mac.

I have a live site that explains what I am doing and comparing how the two button methods work:

https://dacreativedesign.wixsite.com/test-download-pdf

Here is the code on the page I am using for the button to open the PDF and add the timestamp to a database that is named “Analytics”:

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

let Button1;

$w.onReady( function () {
Button1 = $w(“#Button1”).link;
$w(“#Button2”).target = “_blank”;
});

export function Button2_click (event) {
let toInsert = {
“title”: “PDF Downloaded”
};
wixData.insert(“Analytics”, toInsert)
.then( (results) => {
wixLocation.to(${Button1});
} )
. catch ( (err) => {
let errorMsg = err;
} );
}

2

I played with your test site and I’m not sure if I understand. What I did was move #Button2 away from #Button1 (that is, I don’t use #Button2). Then, in the onReady() , I added this line:

$w("#Button1").target = "_blank";

I also added a click event handler for #Button1:

export function Button1_click(event) {
   let toInsert = {
      "title":        "PDF Downloaded"
   };
   wixData.insert("Analytics", toInsert)
   .then( (results) => {
      console.log(results);
   } )
   .catch( (err) => {
      let errorMsg = err;
   } );
}

I run the site and when I click on #Button1, a new browser window displaying the test PDF is opened and active, and a record is added to the Analytics DB collection. From what I understand, this is what you want.

3

Thank you so much Yisrael, this worked perfectly! To confirm two things:

My onReady() section looks like this, as I deleted the first line I had, and only used the line you suggested:

$w.onReady(function () {
$w("#Button 1 ”).target = “_blank”;
});

For the event handler, you suggested using console.log(results); which did not work when I tested, so I kept my original line of wixLocation.to (${Button1}); - which appears to be working. PDFs are opening in my preferred browser tab behavior, and the time stamps are being added to the database on the button click.

So my event handler section now looks like this:

export function Button 1_click (event) {
let toInsert = {
“title”: “PDF Downloaded”
};
wixData.insert(“Analytics”, toInsert)
.then( (results) => {
wixLocation.to(${Button1});
} )
.catch( (err) => {
let errorMsg = err;
} );
}

Can you confirm what i did is correct? As I said, it appears to be working, but I wanted to make sure what I did does not cause any other issues.

FYI:
As far as creating #Button2, I do not not know why it was being used, I got this method from this video here and was following suit:

#Button1 was the button linked to the PDF and then hidden on the page by positioning it under #Button2. #Button2 was a duplicate of #Button1, but #Button2 did not link to a PDF, but had the onClick event added.

Your method of just one button is working the way I would like.

Thanks so much for taking the time to troubleshoot this, much appreciated.

4

Re: #2…

Here is my onReady() function:

$w.onReady(function () {
    $w("#Button1").target = "_blank"; 
});

In addition, #Button1 is linked to open a doc:


So, when you click on the button, the doc is opened. The only reason for the Button1_click() event handler is to insert the record into the Analytics database collection. I only used console.log(results) to display the returned results of the insert(), not to open the PDF doc. The doc opens as a result of the above link.