Tips for preventing browser pop-up blockers

async payWithPaypal(context, id) {
  context.commit("set_busy", { data: true }, { root: true });

  var response = await ApiService.PAY_WITH_PAYPAL(id);

  if (response.code == 200 && response.data.success) {
      var invoice = response.data.invoice;
      AlertUtil.SHOW_SUCCESS_ALERT("Erledigt!");
      context.commit("updateInvoice", invoice);
      window.open(response.data.redirectUri, "_blank"); // Opening a new window here
  } else {
      AlertUtil.SHOW_SUCCESS_ALERT(response.data.message);
  }

  context.commit("set_busy", { data: false }, { root: true });
},

As shown above, I encounter an issue where the browser's popup blocker prevents the opening of a new window when the response is successful. How can I resolve this problem?

javascriptvue.jsjsx

Answer №1

With the asynchronous operation, the browser may block it for security purposes. A workaround to this issue is to simulate form submission.

const launchNewWindow = (url) => {
    let newForm = document.createElement('form');
    newForm.action = url;
    newForm.target = '_blank';
    newForm.method = 'GET';
    document.body.appendChild(newForm);
    newForm.submit();
    
    // cleanup
    document.body.removeChild(newForm);
    newForm = null;
}
launchNewWindow('https://www.example.com');

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

Guiding motion of a parental container using a button

This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...

javascripthtmlmouse

Tips for including a for loop within a return statement in React Native

I'm having trouble displaying multiple content on the screen using a for loop. The map method doesn't seem to work for me because I don't have an array. Here's what I've attempted: {() => { for (let i = 0; i < cart ...

reactjsreact-nativefor-loopjsx

Removing elements from an array in JavaScript using subtraction

I have 2 arrays structured like this : VM.dataTotalList = result.map(item => { return { idEquipment : item['0'], timestamp : item['1'], value ...

javascriptangularjs

What is the process for altering the text contained within a button?

My website uses Bootstrap and a KendoUI data grid where each row has a button like this... <button type="button" id="requestbtn1" class="btn btn-success">Request</button> I've written some JavaScript to handle the click events of these b ...

javascriptjquerycsstwitter-bootstrap

Attempting to divide the given web address

Is there a way to divide the URL below into components and extract only "store" from it? http://www.store.com/products.aspx/Books/The-happy-donkey If so, what would be the best method to achieve this? ...

javascriptangular

Information is not transferring to Bootstrap modal

I attempted to send a value to a modal by following the instructions on the Bootstrap documentation here. However, I am facing an issue where the data is not being successfully passed. To trigger the modal, use the following button: <button type=" ...

javascripthtmltwitter-bootstrapbootstrap-modal

Having trouble making radio buttons clickable with jQuery/JS?

Having a minor issue as a beginner, I am struggling to make buttons within a DIV clickable. The top line consists of 5 buttons that work perfectly. When clicked, a 2nd row appears as expected, but for some reason, I can't click on them. What could be ...

javascriptjquerycssradio-button

Service failure occurs due to the inability to inject a factory

I've been working on an angular seed project that includes services and a factory. Specifically, my companyService relies on a factory named company. However, I've encountered an issue when trying to inject company into companyService, resulting ...

javascriptangularjsdependency-injection

JavaScript - Calculate the streak of consecutive work days

Consider this array of plans: [ { _id: "1", project_id: "1", day: "2021-03-02" }, { _id: "2", project_id: "1", day: "2021-03-01" }, { _id: "3", project_id: "1", day: "2021-03-03" }, { _id: "4", project_id: "2", day: "2021-03-01" ...

javascriptarrays

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

Data retrieval is currently not functioning, as React is not displaying any error messages

One of the components in my app is as follows: import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { compose } from 'redux'; import { translate ...

javascriptreactjsecmascript-6

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

javascripthtmlcssfirefox-addonfirebug

NodeJS controller function to generate and send a response

I'm facing an issue with my controller method where I am unable to send a response to the user, even though the value is displaying in the console. Below is my code snippet: const hubHome = (req,res) => { const hubId = req.params.hubId; fetch ...

javascriptnode.jsexpress

Steps for inserting telephone numbers from a database into an <a href="tel:"> tag

<a href="tel:<?php echo $b2b_mec_num; ?>"><button type="button" class="btn" id="CallBtn">&nbsp;CALL</button></a> I am looking to dynamically add phone numbers from a database to the anchor tag provided in the code snippet ...

javascriptphphtml

Diminish, then lead to a fresh page

I have encountered an issue with my code. The wrapper performs a fade out effect before redirecting the user to a URL. However, it only fades out once and I suspect this is due to the browser caching or loading the page quickly. Is there a way to ensure t ...

javascriptjquery

How to prevent the default Highcharts pie from appearing on an Angular page during loading

After successfully displaying my HighCharts half-doughnut with hard-coded data, I ran into a problem when trying to fetch data from the database. The slight delay in loading the data caused an issue where a "Chart title" and a white box would appear on the ...

javascriptjqueryhtmlangularjshighcharts

The setTimeout function interrupts the event loop

Recently, I came across conflicting information regarding the usage of setTimeout to create nonblocking/asynchronous functions. One article suggested that using setTimeout is essential for this purpose, while another claimed that it actually blocks the eve ...

javascriptnode.jssettimeout

Utilizing ng-click within a tooltip

I've implemented Angular Bootstrap UI and successfully added a tooltip to my project. Snippet of HTML: <div ng-app="helloApp"> <div ng-controller="helloCtrl as hello"> <a tooltip-trigger="click" tooltip-placement="bottom" uib-t ...

javascriptangularjstwitter-bootstrapangular-bootstrap

Avoid using the 'exports' keyword when compiling in Typescript

I recently started learning Typescript, although I am proficient in JS. My inquiry pertains to utilizing modules in TS for coding purposes and then excluding the modules when converting to JS. In traditional JS, I segment functionalities into different fi ...

javascripttypescript

The `diff` command is causing issues in `execSync`, resulting in errors when the files do not

Why am I getting an error with the diff command when my files don't match? let {stdout,stderr,err} = execSync(`diff output.txt answer.txt`, { cwd: "/home", encoding: 'utf8' }); if (err) { console.log(err); } console.log(stdout); The ...

javascriptnode.jschild-process