CODEWITHSUNDEEP
angularjsalertng-tags-input
Ramkishan Suthar
Ramkishan Suthar

Reputation: 401

How to show alert on tags remove using angularJs?

I am using ng-tags-input library for showing tags but I would like to show a sweetAlert while user remove tags. I try this but I noticed that tag removed before alert shown on screen. see below screenshots.

enter image description here

enter image description here

From second screenshot you can see when I remove tag July-2017 it will remove July-2017 tag before confirmation on alert box. In this case there is no means of using alert box.

At coding level I did this

HTML

<tags-input ng-model="monthTags" display-property="text" placeholder="{{ ''}}" add-from-autocomplete-only="true"  on-tag-removed="removeDiv($tag)" add-on-paste="true" on-tag-added="addDiv($tag)"  ng-required="true">
    <auto-complete  min-length="1" source="loadTags($query)"> </auto-complete>
</tags-input>

JS

$scope.removeDiv = function (tag) {

    if (tag.id) {
        swal({
            title: "Are you sure?",
            text: "You want to remove this.",
            showCancelButton: true,
            type: "warning",
            confirmButtonColor: "#37BC9B",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: true,
        },
        function () {
            //Ajax request
        });
    }
}

Now What I need to do to achieve this. Please help

Upvotes: 0

Views: 1803

Answers (5)

labu4bd
labu4bd

Reputation: 701

You need to use promise because here a dialog on the screen waiting for the user to decide what to do. I try to give you some hints with your code, like:

HTML

<tags-input ng-model="monthTags" display-property="text" placeholder="Add Months" add-from-autocomplete-only="true"  on-tag-removed="removeDiv($tag)" add-on-paste="true" on-tag-added="addDiv($tag)"  ng-required="true">
    <auto-complete  min-length="1" source="loadTags($query)"> </auto-complete>
</tags-input>

JS

$scope.removeDiv = function (tag) {
    let promiseDivRemove = new Promise(function(resolve, reject) {
        if (tag.id) {
            swal({
                title: "Are you sure?",
                text: "You want to remove this.",
                showCancelButton: true,
                type: "warning",
                confirmButtonColor: "#37BC9B",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true,
            },
            function (isConfirm) {
                if (isConfirm) {
                    //Ajax request
                    resolve(true);    
                } else { reject(false);}
            });
        }else{ reject(false);}
    }).then(
        function(result) { return result; },
        function(error) { return error; }
    );;
    return promiseDivRemove;
}

Upvotes: 1

Rejneesh Raghunath
Rejneesh Raghunath

Reputation: 1724

<tags-input ng-model="tags" on-tag-removing="validateRemoval($tag)"></tags-input>

  $scope.validateRemoval = function(tag) {
     alert('Are you sure you want to delete?');
  }

Upvotes: 0

Agam Banga
Agam Banga

Reputation: 2693

You can use the onTagRemoving callback of ngTagsInput. It's in the documentation. It states that

Expression to evaluate that will be invoked before removing a tag. The tag is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected promise is returned, the tag will not be removed.

You need to change the on-tag-removed to on-tag-removing & returns the boolean true to remove or false to revert.

Upvotes: 1

Jenny
Jenny

Reputation: 663

You need to check for confirmation from user is true or false like this:

$scope.removeDiv = function (tag) {
  if (tag.id) {
      swal({
        title: "Are you sure?",`enter code here`
        text: "You want to remove this.",
        showCancelButton: true,
        type: "warning",
        confirmButtonColor: "#37BC9B",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: true,
    },
    function (isConfirm) {
             if(isConfirm){
                    Ajax request
              }
    });
  }
}

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222682

You should show the alert inside the success function of the request.

$http.get(url).remove().then(function (response) {
   showAlert();
})
.error(function(error){

})

Upvotes: 0

Related Questions