Ways to stop the default action in a confirm dialog while using Angular JS

Within my save function, I have the following:

$scope.saveData = function () {

   if (confirm("Are you sure you want to save") === false) {
       return
    }


// do saving

When using the above code and clicking "yes," I encounter an error. Interestingly, even if I click "cancel," the same error appears in firebug. However, the data does get saved when I click "yes" despite the error persisting. This issue seems to be specific to Firefox as I do not experience it in Chrome.

If I remove the confirm dialog, the error disappears. This leads me to believe that the issue is related to the dialog box.

Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.2.25/$rootScope/inprog?p0=%24apply

Therefore, I thought perhaps I need to

e.preventDefault();

How can I incorporate this into the above function? Currently, I am utilizing it like this

ng-click="saveData()"

javascriptangularjseventspreventdefault

Answer №1

<button ng-click="addInfo($event)">Add</button>

Chrome sometimes fails to automatically pass the event, so you need to pass it in from the HTML code.

$scope.addInfo = function (event) {

   if (confirm("Do you really want to add this information?") === false) {
       event.preventDefault();
       return;
    }
    // adding process
};

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 MaterialUI value prop not updating after dynamic rendering of components when value state changes

As I dynamically generate Material UI form components, I encounter an issue with updating their values. The value prop is assigned to a useState values object, and when I update this object and the state, the value in the object changes correctly but the M ...

javascriptreactjsmaterial-uireact-propsreact-state

Utilizing Dynamic IDs within an AngularJS Template

Incorporating a jQuery plugin within an AngularJS directive is the task at hand. The directive is intended to be called like this: <my-dialog data-trigger-id="myTriggerId">My dialog content...</my-dialog> Within the directive template, it app ...

angularjsangularjs-directive

What is the best way to choose all elements from an array based on their key and then combine their values?

Currently, I am working on an application that allows users to read articles and take quizzes. Each article is assigned to a unique category with its own _id. Quiz attempts are stored in a separate table that references the articles, which in turn referenc ...

javascriptarraysobjectmultidimensional-array

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

javascripttypescriptvue.jsvuetify.js

CSS classes designed to mimic JavaScript object attribute-value pairs

I stumbled upon some interesting css class-value combinations within HTML tags. It seems like a specific JavaScript code is interpreting this, but it's something I haven't encountered before. I came across this on www.woothemes.com/flexslider/ (y ...

javascriptcss

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

javascriptjqueryhtmlangularjs

Unable to retrieve JSON data from the remote URL

I have been attempting to retrieve information from but unfortunately, I am not receiving any data in return. Despite this, I can see the data in my response tab using Google Chrome. My attempts include running it on both a webserver and locally for test ...

javascriptajaxjsonjsonp

AngularJS table not properly sorting date and time

After retrieving some data from my backend, I am facing an issue with sorting the date column in an angularjs table. Instead of sorting based on the full date format, it seems to be using the formatted date string that was generated using a date filter. S ...

angularjssortingfilter

Enhance your Vue.js 3 tables with sorting, filtering, and pagination capabilities using this custom component

After extensive research, I am still unable to find an updated Vue.js 3 component that offers sorting, filtering, and pagination for tables without the need for additional requests to a backend API. The options I have come across either seem outdated, are ...

javascriptvue.jsvuejs3

Is the webdriver.io waituntil method designed to return a boolean value of true or false

I am working on an automation framework using webdriver.io v5. I need to receive a boolean response from the code snippet below: waitAndCheckForContactToBePresent(contactName) { return browser.waitUntil((value) => { return this.chec ...

javascriptnode.jsselenium-webdriverwebdriverwebdriver-io

What is the best way to embed a variable within a Directive HTML block for seamless access by the Controller?

I am facing a challenge with my custom directive that inserts an HTML block onto the page. The issue is to have a variable within this block that can be manipulated based on an ng-click function in my controller. This is what my directive looks like: .di ...

javascriptangularjsangularjs-directiveangularjs-scope

The URL dynamically updates as the Angular application loads on GitHub Pages

Encountering an unusual issue when trying to access my angular website on GitHub pages. The URL unexpectedly changes upon opening the page. Please check it out at this link: The original expected URL should be However, as the page loads, the URL gets alt ...

javascriptangularangular-cligithub-pagesangular-cli-ghpages

What is an alternative way to show the contents of a JSON file without directly accessing it

Recently, I stumbled upon an amazing website - where I have been exploring to learn something new. The website prominently features the use of Ajax and some fascinating javascript without any additional libraries. Within a single javascript file on this ...

javascriptajaxjson

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Check out my StackBlitz demo where I am experimenting with dynamically instantiating the HelloComponent using the ReflexiveInjector. The HelloComponent is added to the app modules entryComponents array. Despite this setup, I am still encountering the foll ...

javascriptangulartypescript

The resolver function fails to provide a result

My resolver function includes a loop that makes calls to an HTTP service in each iteration: function detailedReportDataResolver($stateParams, reportService) { var promises = []; var frequenciesArr = $stateParams.frequencies.split(',').ma ...

angularjsangular-ui-router

Identifying the initial object with a duplicate property within an array of objects using JavaScript

In my code, I have an array structured like this: var myArray = [ {id: 1, entry_id: 1, name: 'test', email: 'email1'}, {id: 2, entry_id: 1, name: 'test', email: 'email2'}, {id: 3, entry_id: 2, name: &ap ...

javascriptarraysjson

Avoid triggering onClick events on all rows when clicking, aim for only one row to be affected per click

I have a unique situation where I have a table containing rows with a button in each row. When this button is clicked, it triggers an onClick event that adds two additional buttons below the clicked button. The Issue: When I click on a button, the onClick ...

reactjstypescripteventsrendermaterial-table

Is my JSON data causing the error of invalid React child components?

Although this question has been asked multiple times on Stack Overflow, the solutions provided have not worked for me. My main goal is to retrieve notifications from a JSON file located here: I suspect that my JSON file may be poorly structured, especial ...

javascriptarraysjsonreactjs

Executing a message in Azure Service Bus using Javascript/Node.js

I am utilizing the @azure/service-bus library in a Node.js application to receive messages. The code I am using is as follows: const { ServiceBusClient } = require("@azure/service-bus"); const sbClient = new ServiceBusClient(connectionString); ...

javascriptnode.jsazure

Generate 2 configurations for webpack

Currently, I am facing a challenge while building a webpack file. The issue arose when I needed to incorporate the 'node' target due to conflicts with an 'fs' function that reads certain files. Subsequently, I decided to split my config ...

javascriptvue.jswebpack