Sweetalert is currently experiencing issues with its service functionality

I've searched around but can't find a clear solution to my issue. I need help with implementing sweetalert function in my component, specifically for data deletion using the service.

https://i.sstatic.net/o6W2n.png

Component

Swal({
    title: 'Are you sure?',
    text: 'You will not be able to recover this imaginary file!',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, keep it'
}).then((result) => {
    if (result.value) {
        this.bookingService.deletedata(data._id).subscribe(data => {
            console.log(data);
        });
        Swal(
            'Deleted!',
            'Your imaginary file has been deleted.',
            'success'
        )
    } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal(
            'Cancelled',
            'Your imaginary file is safe :)',
            'error'
        )
    }
})

Service

deletedata(param) {
        console.log(param);
        let searchUrl = Urlapi + '/pesan/remove' + param;
        return this.http.delete(searchUrl, this.jwt()).map(res => res.json());
    }

Answer №1

In order for the function to work properly, you must first set 'let me = this;' at the beginning.

let me = this;

Swal({
    title: 'Are you absolutely certain?',
    text: 'Once deleted, your imaginary file cannot be recovered!',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, keep it'
}).then((result) => {
    if (result.value) {
        me.bookingService.deletedata(data._id).subscribe(data => {
            console.log(data);
        });
        Swal(
            'Deleted!',
            'Your imaginary file has been successfully removed.',
            'success'
        )
    } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal(
            'Cancelled',
            'Your imaginary file remains safe :)',
            'error'
        )
    }
})

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

Questions about clarifying JS promises and async-await functions

After doing some reading on promises in JavaScript, I have come across conflicting information which has left me with a few basic questions. I have two specific questions that need clarification: Is it necessary for every function in JavaScript to be ca ...

Is there a way to simplify this condition down to just a single line?

In this scenario, I have set the condition as follows: <mat-chip-list> <mat-chip color="accent" *ngIf="letter.status == 'Completed'" selected> {{ letter.status }} </mat-chip> <mat-chip ...

Winston inquired about the process of log rotation

Is there a way to enable log rotation in Winston for managing logging in node.js? Specifically, is there a method to generate a new log file for each day the application is active? var logger = new (winston.Logger)({ transports: [ n ...

Flexible type definition including omission and [key:string]: unknown

When I write code, I like to explain it afterwards: type ExampleType = { a: string; b: boolean; c: () => any; d?: boolean; e?: () => any; [inheritsProps: string]: unknown; // If this ^ line over is removed, TypeNoC would work as expecte ...

Utilizing parameters for data filtering in VueX getters

I'm really stuck on this issue. I've been trying to retrieve a blog post object using a getter based on its "slug". Despite all my attempts, every time I try to use the getter, I keep getting an error saying "state.posts.filter" is not a function ...

Will upgrading jQuery UI 1.7.2 to 1.8.7 lead to enhanced performance?

My website relies solely on jQuery UI dialogs and buttons. Everything seems to be functioning well overall, but some users have reported occasional performance issues where the system is not as responsive as they would like. I noticed that upgrading from ...

Tips for keeping the menu in place: ensure it remains fixed and unaltered when adjusting the browser size or zoom level

Q: I have a navigation menu that seems to change position every time I adjust the browser zoom. How can I make the menu stay fixed in its place? The CSS: ul#topnav { margin-left:0; margin-bottom:50px; margin-top:5px; padding: 0; flo ...

Issues arising while passing a parameter to a Node.js module

I've been struggling with passing a variable to a module. In my node.js setup, I have the following structure: The main node.js server (server.js): // modules ================================================= var express = require('expr ...

Sending database data from PHP to JavaScript - mysql_fetch_array behaving unexpectedly

Forgive me if there is already an answer out there to my question, but after a week of searching online and experimenting, I decided to turn to the experts for help. Purpose: My goal is to query an SQL database using server-side code (specifically PHP), t ...

The buttons on the Bootstrap Carousel are unresponsive and the indicators are not displaying as they should

I am currently attempting to replicate a bootstrap carousel that includes indicators. However, in my code, I am unable to view the indicators, and the previous/next buttons are not functional. Although I came across a workaround that I could modify from th ...

Warning triggered Grunt cancellation

I've successfully installed "npm" on my local machine. When it comes to installing grunt in my Gruntfile.js directory, I follow these steps: npm install grunt npm install -g grunt-cli grunt watch Although the tasker is up and running, I en ...

Sending a JavaScript object to a JSP page via jQuery

I have an object in JavaScript var data = new Object(); It has attributes like: data.name = "mike"; data.id = 1; I am using jQuery to send this object to a JSP page var request = $.ajax ({ url: "test.jsp", type: "post", data: 'obj='+ dat ...

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

"Dynamic value changes in bootstrap multiselect dropdowns triggered by selection in another multiselect dropdown

I am trying to enhance the functionality of my multiselect dropdown in Bootstrap by updating the values based on another multiselect selection. Currently, the code works well with one selection, but as soon as I include the class="selectpicker", ...

How can you iteratively filter an array using JavaScript?

My goal is to create a function that can filter an array based on one or multiple conditions. Let's examine this example data and filter criteria: var data = [ {company: "Acme", fiscal_period: '01-2019', value: 10}, {company: "Acme", f ...

The Register Page is failing to load

I'm currently tackling a validation form project with NodeJS. However, I'm encountering an issue where register.ejs is refusing to render. Despite my attempts to tweak the paths and navigate through different folders, the problem persists. As a n ...

A guide on looping through an array enclosed within an object with the help of ng-repeat

I am trying to retrieve data from an API endpoint that returns a single object. Within this object, there is an array called video which I want to iterate over and display all the links stored in the array on the view. The JSON object returned by the API: ...

I am verifying the user's login status and directing them to the login page if they are not already logged in

My goal is to utilize ionViewWillEnter in order to verify if the user is logged in. If the check returns false, I want to direct them to the login page and then proceed with the initializeapp function. My experience with Angular and Ionic is still limite ...

Creating a custom function to extract data from an object and ensure the returned values are of the correct data types

Is there a way to ensure that the output of my function is typed to match the value it pulls out based on the input string? const config = { one: 'one-string', two: 'two-string', three: true, four: { five: 'five-string& ...

Modify the font color within a JavaScript countdown

I'm trying to create a timer that changes the font color of a div with the ID "clear" at the one-minute and two-minute marks. However, I'm having trouble getting it to work properly. var ho1 = document.getElementsByTagName('ho1')[0], ...