Why does my page keep refreshing even after I close the model?

I am facing the following issues:

1- Whenever I try to close my model by clicking 'cancel', it causes the page to reload.

2- Clicking 'OK' does not send the 'DELETE' request to the server, nothing is received, and the page reloads. Additionally, I don't get redirected to the intended page.

HTML

<div>
    <input type="button" class="btn btn-primary" ng-click="suppr()" value="ok"/>
    <input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />
  </div>

file js

(function() {
    'use strict';

    var progress = angular.module('demret.progress', ['ui.bootstrap.modal']);


    progress.directive('progressDem', function() {
        return {
            restrict : 'E',
            templateUrl : "progress/progress.html",
            controller : [ '$scope', '$http', 'Demande', '$window', '$modal', function($scope, $http, Demande, $window, $modal) {
                // TODO

                $scope.supprimerDemande = function() {

                    var urlSetDem = cfg.urlDDRRest + 'demande/' + Demande.get().id;
                    var config = {
                        method : 'DELETE',
                        url : urlSetDem,
                        jsonExpected : true
                    };
                    $http(config).then(function(http) {
                        $window.location.href = cfg.urlPortail;
                    })['catch'](function(http) {
                        $scope.errT= 'Une erreur technique'; 
                    })['finally'](function() {
                    });
                }

                // ==========================================
                // open fenetre modal 
                // ==========================================
                $scope.modalSuppressionDem = function(size) {
                    // déclaration de la fenetre
                    var modalInstance = $modal.open({
                        animation : true,
                        templateUrl : 'progress/suppression-modal.html',
                        controller : 'ModalSuppressionDem',
                        size : size,
                        backdrop : 'static',
                        resolve : {
                            functionSupp : function() {
                                return $scope.supprimerDemande;
                            }
                        }
                    });
                    modalInstance.result.then(function() {
                        // close
                    });
                };

            } ]
        }
    });


    // Controleur de la fenetre modale 
    progress.controller('ModalSuppressionDem', [ '$scope', '$modalInstance', 'functionSupp', function($scope, $modalInstance, functionSupp) {
        $scope.suppr = function() {
            functionSupp();
            $modalInstance.close();
        };
        $scope.annulSupp = function() {
            $modalInstance.close();
        };
    } ]);

})();

config.js

(function() {
    'use strict';
    window.cfg = {

        urlDDRRest : '/TOTO-rs/api/',
        urlPortail : '/TOTO/',

    };
})();

Can anyone provide insight into why these issues are occurring?

Thank you in anticipation!

Answer â„–1

Here's a helpful tip:

Make this change:

<input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />

to

<input type="button" class="btn btn-default" ng-click="annulSupp($event)" value="cancel" />

Also, update the $scope.annulSupp() function with the following code:

$scope.annulSupp = function(event) {
      event.preventDefault();
      $modalInstance.close();
};

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

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

Using JQuery to retrieve part of a className results in a null value being returned

I am facing an issue with a piece of code in codesandbox where it returns null when I attempt to retrieve part of the className from a div using JQuery. How can I troubleshoot this and make it work? Check out the Codesandbox Example import React, { Compo ...

Issues arise when using PHP4 in conjunction with Ajax, the json_encode function, and

I have been tasked with a project for my company that requires PHP4 development. The goal is to display a list of mobile phone brands and their prices, as well as the ability to filter them using multiple checkboxes. However, I am facing an issue where the ...

Error in THREE.js: Unable to access property 'lib' from an undefined source (THREE.ShaderUtils.lib["normal"])

I have been working on the challenges provided in the WebGL introductory book by Oreilly. Encountered a runtime error with the following code snippet. After searching online, it seems like I am the only one facing this issue. Could you please assist me in ...

Animating a Canvas to Follow Mouse Coordinates

I am looking for a way to animate a circle moving towards specific coordinates, similar to the game . I have attempted using the jquery animate() function, but it is too slow due to the constant updating of the target coordinates. Is there a faster metho ...

Deleting a model using RestAPI and referencing another model

UPDATE: My professor just advised me to access the driver only from within the admin, not from the admin. Currently, I am developing a project that involves using restAPI's, and one of the requirements is that an admin should be able to delete a driv ...

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

I am currently utilizing icoMoon to import a series of SVG icons. The structure of the html I'm trying to create using ngIf is as follows: <div class="contactIcon"> <svg class="icon icon-envelop"> <use xlink:href="symbol-d ...

The error message "TypeError: Unable to access the 'get' property of an undefined vue js object" appeared

Struggling to grasp the concept of vue.js, I am currently navigating my way through understanding how to fetch or call an API. Setting up my index.html and app.js, along with the required packages in the node_modules, has been relatively smooth. However, ...

Issue with by.cssContainingText function not performing as intended

I have a container that I want to be able to click on. Here's how it looks: <div class="CG-Item CG-B-Left ng-binding" ng-bind="SPL.showTitleText">My New SPL</div> So I am trying to use this code to click on it: element(by.cssContainingT ...

Switching between components in vue.js: A beginner's guide

In my project, I created a Dashboard.vue page that consists of three child components: Display, sortBooksLowtoHigh, and sortBooksHightoLow. The Dashboard component also includes a select option with two choices: "Price: High to Low" and "Price: Low to High ...

JavaScript validation function stopping after the first successful validation

Script: NewsletterValidation.js function formValidation() { var fname = document.getElementById('firstName').value; var lname = document.getElementById('lastName').value; var pnumber = document.getElementById('phoneNumb ...

The error message states: `res.Send function is not recognized as a valid

Recently, I've been working on a function that goes like this: app.get('/counter', function (req, res) { console.log('/counter Request'); var counter = 0; fs.readFile(COUNTER_FILE_NAME, function(err, data) { c ...

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...

Use jQuery to dynamically update a text field within a table row based on a selection from

My understanding of JS and jQuery is not very strong. This is the HTML Output I created using a foreach-loop: $('#ProjectOfferPosition0IsystemTypeVariantId').on('change', function () { var prices = []; prices[1] = 500.00; ...

How can you integrate Webpack loader syntax (including imports, exports, and expose) with ECMAScript 6 imports?

For my Angular 1.4 project, I am utilizing Webpack and Babel to write in ECMA6 syntax. While I prefer using ECMAScript 6 import/export default module syntax, there are instances where I need to employ Webpack loaders like expose to globally expose modules, ...

Is there a way to implement an onclick event for every iframe within a document using jquery?

I have a webpage containing two iframes that can be switched using a selector. My goal is to implement an onclick event that will trigger a URL for specific <rect> elements within the iframes. After reading a helpful post on accessing iframe childr ...

angular trustAsHtml does not automatically insert content

Two divs are present on the page. Upon clicking button1, an iframe is loaded into div1. The same applies to button2 and div2. These iframes are loaded via ajax and trusted using $sce.trustAsHtml. This is how the HTML looks: <div ng-bind-html="video.tru ...

What are the implications of an unidentified callback function with parameters?

Check out this snippet: const fs = require('fs'); fs.readFile('foo.txt', 'utf8', (error, data) => { if (error) { throw new Error(error); } console.log(data); }); Can you figure out where the anonymous callback is recei ...

What is the best method for storing a JavaScript widget with analytics - should it be done dynamically or statically?

My widget comes with a customizable boot loader that is used on websites. The boot loader file retrieves the settings for the widget and generates it accordingly. Normally, the content of the bootloader file remains static unless there are modifications ma ...

The error message 'mainController' is not recognized as a function and is undefined, version 1.4

When it comes to utilizing newer angular directives like ng-blur, ng-focus, and form validation, the examples abound. They typically perform well in a standalone page or interactive coding platforms like plinkr and jsfiddle. However, there's one commo ...