Download PDF using Ember.js nested under an <li> element that triggers a specific action

Is there a way to successfully download a pdf file on click with specific syntax?

<a href =   "http://www.pdf995.com/samples/pdf.pdf" download >Click to download!</a>

In the context of a model associated with a <li> item like below:

<script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li {{action action1}}>{{item}}
        <a href =   "http://www.pdf995.com/samples/pdf.pdf" download >Click to download!</a>
      </li>
    {{/each}}
    </ul>
  </script>

The issue arises when trying to make it work inside the <li> tag which has an action. It seems the action is always called first, causing interference.

Check out this demo for more information.

Answer №1

UPDATE:

Give this a shot:

App.IndexController = Ember.Controller.extend({
  actions: {
    action2: function(selection){
      alert(selection.size);
      window.document.location.href = selection.url;
    }
  }
});

This will automatically redirect to the PDF after displaying an alert.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with HTML dropdown functionality

I’m facing an issue with my dropdown menu. Clicking on a button should toggle the dropdown menu, showing it if closed and hiding it if open. However, the dropdown menu does not close when I click the button again. I suspect the problem lies with the clos ...

Navigating through content with scrollable views while utilizing the popular Angular framework

Being relatively new to famous and somewhat familiar with angular. Question: Given that everything in famous is fixed positioning, how should I go about creating a scrollable section using famous angular? HTML: This code snippet creates a grid of square ...

Passing Props from _app.js to Page in ReactJS and NextJS

I recently made the switch from ReactJS to NextJS and am encountering some difficulties in passing props from _app.js to a page. My issue lies in trying to invoke a function in _app.js from another page. In ReactJS, this process was simple as you could cr ...

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

JavaScript code for sorting a list of objects alphabetically according to a different list

I am looking to alphabetically sort a list of objects based on another list of characters and the 'name' property. Below is the sorting order I would like to use: const SortingArray = [['a','á','à','â', ...

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

Generate a spreadsheet file in xlsx format by using the exceljs library in Node

I am currently working with exceljs 3.8 in an attempt to generate a new XLSX file, but unfortunately the code below seems to be malfunctioning. createNewExcelFile: function (excelFilePath) { //excelFilePath: Path and filename for the Exce ...

How to efficiently eliminate redundant entries from an object array using JavaScript or React

I've been struggling to implement the solutions provided in this thread on removing duplicates from an array of objects. Unfortunately, I haven't found a satisfactory way to do so. In my current approach (which involves adding new iconsProps to ...

Can a web application determine if Microsoft Excel has been installed?

Currently, I am developing a web application using ASP.NET that includes certain functionalities which rely on Microsoft Excel being installed on the user's device. In case Excel is not available, I would prefer to deactivate these features. I am foc ...

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

I am dynamically creating an editable div using the code snippet below. <div class='reflection-field' contenteditable="true" data-number="${index}"></div> Expected Outcome: When I click on the generated div, I anticipate that the c ...

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

Error received when querying Firebase database: TypeError - object does not have a hasOwnProperty function

I have been attempting to access my Firebase database using the following code: const lastCrawl = admin .database() .ref('/crawls') .orderByChild("dateAdded") .limitToLast(1) .once('value') .then((snapshot) => { retu ...

Changing a callback function into a promise in Node.js for OpenTok integration

MY FUNCTIONAL CODE (SUCCESSFULLY WORKING!) I have developed a function with callback to generate tokens and create sessions for OpenTok. This function is then exported to the application. The function //Dependencies var opentok = require('./ot&ap ...

Track user engagement across multiple platforms

Looking for solutions to log system-wide user activity in my Electron app. I want to track mouse-clicks and keystrokes to determine if the user is inactive for a certain period of time, triggering a timer reset within the application. I believe I may nee ...

Creating a dynamic Three.js fullscreen application with a responsive web form and text overlay

(Just to clarify, I'm seeking advice on how to make my app responsive, not asking how to create it) I've been developing a web application that utilizes Three.js to display a scene across the entire window. My goal is to incorporate a configurat ...

Select element click event not functioning on Mac computers

My <select> element is not responding to the click event in MacOS Chrome when using Javascript. This issue has been discussed on platforms like Stack Overflow. Check out this example <select id='hodor'> <option>Jon Snow< ...

Issue with voice in matrix synapse JavaScript VoIP system

I am currently working on creating a video call using Matrix Synapse and the matrix-js-sdk library. I have been able to successfully make the video call work, but I am facing issues with voice transfer. The user making the call is not receiving any audio, ...

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

Guide to implementing dynamic conditional rendering in Vue.js loops (utilizing v-if within v-for)

I am currently working on a table component in a .vue file where I want to display icons based on the direction of the order clicked. For example: <th v-for="(column, index) in columns" :key="index" @click="sort( index )"> <span& ...

Main navigation category as parent and secondary category as a child menu in WordPress

Hello there, I am looking to create a navigation menu with parent categories displayed horizontally and child categories as corresponding submenus. For example, The parent categories would be Apple, Orange, and Mango Under Apple, we would have apple1, ...