Tips for displaying a download prompt in a new window using a Bootstrap modal?

When attempting to implement a download functionality in a normal HTML page, the code provided below successfully starts the download in a separate window. However, when using the same code within a bootstrap modal form, it does not work. What other steps do I need to take to achieve the same functionality within a bootstrap modal?

 var newwin=window.open("",'newwindow','width=700,height=700, left=100,top=100,resizable=yes','_blank').document;
    var link =newwin.createElement('a');
    link.href = window.URL.createObjectURL(blob);                   
    link.download = fileName;
    link.click();
javascriptajaxbootstrap-modal

Answer №1

You have utilized the blob function within window.URL.createObjectURL, but it is not defined.

For a solution, you can refer to this helpful link.

Here is an example of how to correct this issue :

var newWindow = window.open("", 'newwindow', 'width=700,height=700,left=100,top=100,resizable=yes','_blank').document;
var link = newWindow.createElement('a');
var blob = new Blob([json], {type: "octet/stream"});
link.href = window.URL.createObjectURL(blob);                   
link.download = fileName;
window.location.assign(url);

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

Utilize a function on specific attribute values

I have a function in JavaScript that is designed to convert all relative URLs into absolute URLs. function rel2Abs(_relPath, _base); //_relPath represents the relative path //_base indicates the base URL Now, my objective is to implement this function on ...

javascriptjqueryajaxregexurl

Defeating the purpose of my input change directive with uib-tabset

There was a uib-tabset along with a directive that was waiting for a change in an input within the uib-tabset. The directive was being triggered, but when it was supposed to execute a scope.$broadcast, the function was not being called. Here is a look at ...

javascriptangularjsangular-ui-bootstrap

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax

streaming audio data from a MongoDB database to an HTML audio element

As part of my current project, I am delving into the realm of creating an audio player. The concept of database storage for files is relatively new to me, as my previous experience has mainly involved storing strings. Up to this point, here's what I ...

javascriptnode.jsmongodbhtml5-audiogridfs

Creating a custom jQuery selector

I've been struggling with a particular problem all day today, trying different approaches but still unable to find a solution. The crux of the issue is this: I have multiple JavaScript functions running to determine whether certain variables should b ...

javascriptjquery

Adjusting the properties of an element with Javascript

My goal is to dynamically set the value of a parameter within a <script> element using JavaScript. I am using the Stripe checkout.js and I want to populate the Email input field with a value obtained from another text box on the page. Here's how ...

javascriptjquerystripe-payments

Can you incorporate personalized icons in ReactJS?

Is there a way to incorporate my personally designed custom icons, available in both SVG and TTF formats, into a React project? I am interested in using these icons in my navigation bar, such as creating a unique home icon for the home button. ...

javascriptreactjsreact-nativereact-reduxicons

What is the method for displaying the props value in console.log?

Recently, I started learning React and was tackling a simple project. Below is the code snippet that I have been working on. While working on it, I came across a situation where I needed to print the value of listItem={people} which is passed as props in ...

javascripthtmlcssreactjs

In search of a screenplay that mirrors a specific scenario

I recently came across this website: One interesting feature is that all the content loads dynamically on the same page. Instead of loading separate pages, it pauses to fetch the content before smoothly scrolling to the correct section. ...

javascriptjqueryajax

Enhance the volume of an item within an array using JavaScript, React, and RecoilJS

When I check the console, the result is correct. However, when I try to replace that array in setCart, it doesn't work. This is using RecoilJS. const cartState=[ { id:1, productName:'Apple',price:100,quantity:1}, { id:2, productName: ...

javascriptreactjsrecoiljs

Proper method for extracting and sending the final row of information from Google Sheets

The script I have is successfully formatting and sending out the information, but there is an issue. Instead of sending only the latest data, it is sending out each row as a separate email. I specifically want only the last row of data to be sent. functio ...

javascriptformsgoogle-sheetsrow

Caution: flattenKids(): Two children with identical keys, `false`, have been detected in the ReactJS environment

Currently, I am working on creating a clickable list where each item redirects me to another page upon clicking. Below is the render method: render() { const quesItems = this.state.questions.map((question, i) => { return ( <li key={this.prop ...

javascriptreactjswarningsrender

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

After receiving a JSON post response, I am looking to iterate over the data and display it in image divs. Can anyone provide guidance on how to achieve this using JavaScript? Thank you. Here is the JavaScript code that handles the JSON post response: cor ...

javascriptjqueryparsingjson

Creating an element in jQuery without the need for a closing tag

My situation requires dynamically building HTML elements using jQuery. Firstly, I initiate the process with the following function: function createSection(divName) { $("#"+ divName).append("<section id='team' class='pb-5'>&b ...

javascriptjqueryhtmldom

Verification of data using PHP, MySQL, and jQuery

I'm currently working on a process to extract data from an Excel file and then pass it on to a PHP file for validation against a database. If the data doesn't exist in the database, a message will be displayed to notify the user of incorrect data ...

javascriptphpjqueryhtmlimport-from-excel

Adding a nested data structure in a Meteor application

In my mongo collection, I have a document named exam. // meteor:PRIMARY> db.exam.find() { "_id" : "RLvWTcsrbRXJeTqdB", "examschoolid" : "5FF2JRddZdtTHuwkx", "examsubjects" : [ { "subject" : "Z4eLrwGwqG4pw4HKX" }, ...

javascriptmongodbmeteor

Troubleshooting: Issue with Updating Prototype Ajax Function

I am currently utilizing Prototype within the pylons framework and attempting to execute an Ajax call. Below is the structure of my html: <form method="POST" action = "javascript:void(0)" onsubmit = "new Ajax.Updater('graph','/saffron_m ...

javascriptajaxprototypejspylons

Display a thumbnail image using a v-for loop

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is ...

javascriptvue.jsvuejs2bootstrap-vue

Utilizing null values within the map function in React JS

I am currently developing an application using React JS. The app displays a list of users along with the status of books (available, taken, or requested) for each user. However, I'm encountering an issue where even after filtering out the books based ...

javascriptreactjsecmascript-6semantic-ui

Setting the default value for Jquery AutoComplete

I have a scenario where I am using jQuery autocomplete with the following data being fed in: var data = [ { value: "AL", label: "Alabama" }, { value: "AK", label: "Alaska" }, { value: "AZ", label: "Arizona" } ]; My challenge i ...

javascriptjqueryautocomplete