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 Node.js error message reads: "Cannot set headers after they have been sent" while trying to make a post request

Yes, I understand this issue has been addressed multiple times on stackoverflow, but unfortunately, I haven't found a solution that works for me. The problem arises when trying to make a post request on my nodejs server. The error message states &apo ...

Utilizing JSON and Javascript to dynamically generate and populate interactive tables

Here's how I've structured my JSON data to define a table: var arrTable = [{"table": "tblConfig", "def": [{"column": "Property", "type": "TEXT NOT NULL"}, {"column": "Value", "type": "TEXT NOT NULL"}], "data": [{"Property ...

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Hey there, I'm currently struggling with an unexpected unicode character issue. Let me provide some context: I've created a simple class called HashFunction.js that hashes a string: var crypto = require('crypto') module.exports=class H ...

The majority of my next.js website's content being indexed by Google consists of JSON and Javascript files

I’m facing an issue with Google indexing on Next.js (utilizing SSR). The challenge lies in ensuring that .HTML files are effectively indexed for SEO purposes. However, it seems that Googlebot predominantly indexes JSON and JavaScript files. To illustra ...

Exploring the Usage of sessionStorage within the <template> Tag in Vue.js

Is it possible to access sessionStorage in the script section of a Vuejs component like this? <template> {sessionStorage} </template> Whenever I try to call it this way, I consistently receive the error message "cannot read property &apo ...

Obtain information from the get request route in Node.js

I've been diving into nodejs and databases with the help of an online resource. As part of my learning process, I have been tasked with replicating the code below to fetch data from app.use('/server/profil'); However, I'm encountering ...

How can I submit a form or retrieve HTML content using JavaScript without using an iframe?

Background: My current job involves transcribing paper reports using a webapp that is quite old and cannot be updated or connected to a database directly. The system only checks for duplicate unique IDs once the entire form is submitted. This often leads ...

What could be causing the issue with Collection.find() not functioning correctly on my Meteor client?

Despite ensuring the correct creation of my collection, publishing the data, subscribing to the right publication, and verifying that the data was appearing in the Mongo Shell, I encountered an issue where the following line of code failed to return any re ...

Unlock the power of JavaScript and jQuery by utilizing inner functions

Here's some JavaScript and jQuery code with an ajax request included. Can you solve the mystery of why success1() can be called, but not this.success2()? Any ideas on how to fix this issue? function myFunction() { this.url = "www.example.com/ajax ...

Having trouble accessing functions in Typescript when importing JavaScript files, although able to access them in HTML

Recently, I started incorporating TypeScript and React into my company's existing JavaScript code base. It has been a bit of a rollercoaster ride, as I'm sure many can relate to. After conquering major obstacles such as setting up webpack correc ...

How to transfer data from JavaScript to PHP using AJAX

After spending countless hours attempting to make this function properly, I have come to you for assistance :) I have created a PHP page that can exhibit files from a server. I am able to modify the files using an editor plugin, where the Textarea tag is ...

The "util" module has been extracted to ensure compatibility with browsers. Trying to use "util.promisify" in client code is not possible

Currently, I'm in the process of scraping LinkedIn profiles with the help of this library: https://www.npmjs.com/package/@n-h-n/linkedin-profile-scraper. Listed below is the code snippet that I am using: <script> import { LinkedInProfileScraper ...

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

function request2API(option){ const XMLHttpRequest = require('xhr2');//Cargar módulo para solicitudes xhr2 const request = new XMLHttpRequest(); request.open('GET', urlStart + ChList[option].videosList + keyPrefix + key); request. ...

What's the best way to organize a list while implementing List Rendering in VueJS?

Currently, I am working on List Rendering in Vue2. The list is rendering correctly, but it appears ordered based on the data arrangement in the array. For better organization, I need to sort each item alphabetically by title. However, I am facing difficult ...

I am facing an issue with my useFetch hook causing excessive re-renders

I'm currently working on abstracting my fetch function into a custom hook for my Expo React Native application. The goal is to enable the fetch function to handle POST requests. Initially, I attempted to utilize and modify the useHook() effect availab ...

Utilizing Ajax and Jquery/JavaScript to dynamically generate HTML elements when data surpasses zero

I have a unique situation where I am dynamically populating an HTML element with divs and data retrieved from a PHP script using JSON. The data is constantly changing, so I am utilizing EventSource (SSE) for real-time updates. <div class="row state-ove ...

Encountering an issue with resolving 'create-react-class'

I have some files with hobbies listed in Data.js. I am attempting to add these hobbies and display them in a list format within my App.js file. However, I keep encountering an error stating that the create-react-class module cannot be found. Does anyone k ...

Set up npm and package at the main directory of a web application

Currently, I am in the process of developing a web application using node.js. Within my project structure, I have segregated the front-end code into a 'client' folder and all back-end logic into a 'server' folder. My question revolves a ...

The choice between using "npm install" and "npm install -g" for

New to the world of node, and feeling a bit lost when it comes to all this "install" stuff. Could someone clarify for me, what sets apart install from install -g? If something is installed with install -g, can it be accessed from anywhere, or is it restr ...

Can you explain the distinction between the controls and get methods used with the FormGroup object?

I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...