I attempted to utilize bootbox.confirm within my directive, but encountered an error during execution

HTML:

<a href="#!uploadstatus"><button type="submit" class="btn btn-primary" confirm-ng-click="Are you sure">Submit</button></a>

angular js is :

omapp.directive("confirmNgClick",function(){
    return {
        priority:-1,
        restrict:'A',
        link: function(scope,element,attrs){
        element.bind('click',function(event){

        var message =  attrs.confirmNgClick || "Are you sure?";
        if (message && !confirm(message)){
             event.stopImmediatePropagation();
             event.preventDefault();
        } //if
        }) // bind
        }//function
    }
})

When I click the button, it raises a confirm box. When I click "yes", the page go to next page. Everything is fine. I want to improve the design of the confirm box using bootbox.

I have made changes to the angularjs directive as shown below :

omapp.directive("confirmNgClick",function(){
    return {
        priority:-1,
        restrict:'A',
        link: function(scope,element,attrs){
        element.bind('click',function(event){
        var message =  attrs.confirmNgClick || "Are you sure?";
        bootbox.confirm(message,function(result){
            if (! result){
                event.stopImmediatePropagation();
                event.preventDefault();
            }

        })

        }) // bind
        }//function
    }
})

However, things are not working as expected. Can someone help me troubleshoot this issue?

Thank you for any assistance provided.

Answer №1

omapp.directive("confirmNgClick",function(httpPostFactory,$ngBootbox,$location){
    return {
        priority:-1,
        restrict:'A',
        link: function(scope,element,attrs){
        element.bind('click',function(event){
        var message =  attrs.confirmNgClick || "Are you sure?";
        event.stopImmediatePropagation();
        event.preventDefault();
        bootbox.confirm(message,function(result,$location){
            if (result){
                window.location.href = '#!/uploadstatus';
            }
        })
        }) // bind
        }//function
    }
})

The provided JavaScript directive handles confirmation of an action upon click.

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

What is the best way to retrieve data from init.js and use it in messageView?

Can someone help me retrieve the users_url from init.js in my messageView? init.js (function(global) { "use strict;" // Class ------------------------------------------------ function Config() { var users_url = "some_url"; }; ...

When navigating to a new page in Vue.js, automatically scroll to the top of the view

I attempted to utilize this.$router.replace(…) within the router-link, however it does not appear to be effective. Is there a built-in Vue method for achieving the same functionality without relying on any external libraries? ...

Improving code organization for handling multiple HTTP GET requests using angularjs

After carefully considering the 3 different methods for making HTTP GET REST calls with AngularJS, I ultimately chose to use $http. Despite being the simplest option and leading to more readable code, I am now encountering complications as my REST calls be ...

Tracking NWJS progress bar while executing lengthy loop in JavaScript

I'm currently facing some challenges with JavaScript as I attempt to create a desktop application using NW.JS. The issue arises when I drag and drop a .xml file into my app, triggering a function that reads the XML, performs certain tasks, and saves a ...

Data in the AngularJS directory is processed prior to the service being invoked from the controller

Hey there! I recently dabbled into Angular directives and came up with this creation... app.directive('customtable', function () { return { restrict: 'A', require: 'ngModel', link: function (scop ...

Link a timestamp to a datetime-local input using ng-model

My challenge is to display an <input type="datetime-local> field using the ng-model attribute to represent a timestamp: <input type="datetime-local" ng-model="object.value"> This is being achieved with: $scope.object.value = 1433109600000; ...

Error in Discord.JS: The function message.author.hasPermission is not recognized

As I was working on creating a new command for my discord.js bot to toggle commands on/off, I ran into some issues. Specifically, when I attempted to use the .hasPermission function, I encountered the following error message: TypeError: message.author.ha ...

The Verification Tool by Google is malfunctioning on the UI Bootstrap pop-up box

Below is the HTML code where the captcha element is added with comments: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="https://ajax.googleapis.com ...

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

I've been experimenting with creating a persistent dark mode feature for web pages. My goal is to remember the user's preference as they navigate between pages. Additionally, I included a toggle button for switching between dark and light modes t ...

Exploring the effects of applying textures to spheres in a three.js environment

After successfully creating a sphere using JavaScript and the three.js library, I encountered an issue when trying to overlay an image on top of the sphere. Unfortunately, every time I attempted to do so, the sphere just turned black without displaying the ...

The ReCaptcha and AJAX Integration

I am attempting to display the ReCaptcha image using its AJAX API. I have been following the instructions from this documentation and observing the behavior of this demo. Despite my efforts, I am still unable to create a functional fiddle. I have added jsf ...

How can you retrieve a C# variable within JavaScript while using Selenium?

When working with the code below, I encountered an error stating "Linklocation is not defined". How can I properly access the variable within my JavaScript code? IWebElement link = driver.FindElement(By.LinkText("soemtext")); String linkLocation ...

Delay the execution of a JavaScript function by a few seconds

<script type="text/javascript"> var timeout; function doAjaxFunc(){ alert("called"); $.ajax({ type: "POST", url: "searchSuggest.php", data: dataString, cache: fal ...

Using AngularJS Controller with Laravel 5's Eloquent Model Object

I have recently started working with AngularJS on a project involving Laravel 5 and AngularJS. My goal is to update the standings based on certain filters. This is how I am making the API call: $http.post('/api/standings', { category: ...

Tips for minimizing unnecessary rerenders in child components that rely on cached information from the parent component

check out the sandbox here Application maintains state to compute a memoized value, which is then passed as props to the Options. When a change occurs in the state triggered by a callback function in Option, it causes a rerender of the main Application, r ...

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

I've been utilizing MomentTimezone for time manipulation within the browser. My development stack includes TypeScript and Lodash. In my application, there is an accountTimezone variable set on the window object which stores the user's preferred ...

The comparison between the shasum output of the SHELL program and the crypto results from the JS library are revealing discrepancies

I have successfully obtained the following result using Unix: shasum -a 256 test.jpg df94ac3fd72415827f345b5fa22761f57d87e99c25d5345d2e8e9f6c91ef34a3 test.jpg However, I am facing issues with getting the same result in Javascript using crypto-browserify ...

"Is there a JavaScript code snippet that can retrieve information from a JSON file

Is there a way to create a custom JavaScript function that can extract specific data from a JSON object based on certain keywords? I am working with a Task Manager API and would like to automatically populate fields based on the task title. Here is an exam ...

Experiencing SyntaxError when utilizing rewire and mocha for Node.js testing. Unexpected token encountered

Trying to test a function exported from a nodejs file, I am utilizing q to manage promises. The function returns a promise that is either resolved or rejected internally through a callback. Within this callback, another function from a different location i ...