2

I am developing an angular-node.js application where I have a button which when clicked triggers a post request. I am facing a strange issue where this post request is getting called the number of times the button is clicked. For example if I click button for first time - post request is called once, if I click again that is the second time post request executes twice and so on. I am clueless what is wrong with the code , here is the code I have :

angular.js:

$scope.addActivity = function(actor){

    AJS.dialog2("#impact-dialog").show();

    $(".dialog-close-button-impact").click(function(e) {
        //e.preventDefault();
        AJS.dialog2("#impact-dialog").hide();
    });

    var countClicks = 0;
    $(".SubmitImpact").click(function(e) {

        e.preventDefault();


        alert("I am being called again and again");
        countClicks++;
        alert(countClicks);
        AJS.dialog2("#impact-dialog").hide();

        var data = {
            productName: $scope.productName,
            actor: actor,
            activity : $('#activity').val(),
            checked: false
        };

        console.log("Input data for add impact" + actor)

        $http.post('/addActivity', data)
            .success(function(data){
                $scope.data = data;
                $scope.activities = [];

                for (var activity in data) {

                    $scope.activities.push({
                        text: data[activity].activity,
                        id: data[activity].actor,
                        checked: data[activity].checked
                    });
                }
                actor = "";


            }).error(function(data){
                console.log('Error in adding activity' + data)
            });

    });

};

node.js code:

app.post('/addActivity',function(req, res) {

    console.log("I am going to add activity");

    console.log("Checked value:" +req.body.checked)

    impactMapActivity.create(
        {productName: req.body.productName,
            checked: req.body.checked,
            actor: req.body.actor,
            activity: req.body.activity

        }, function(err,data){
            if (err)
            //{
                res.send(err);
            console.log(err);

            impactMapActivity.find({
                productName : req.body.productName
            }, function(err, data) {
                if (err)
                    res.send(err);

                console.log("Printing Data" + data)
                res.json(data);
            });
        }
    );

});

template code:

<span><button class=" aui-button dialog-show-button-impact div.actor-\{{$index}}"  style="float: left" title="$i18n.getText('add.activity')"
                                                                            ng-click="addActivity(actor.id)"><span class="aui-icon aui-icon-small aui-iconfont-add">Add</span>
                                                            </button>\{{actor.id}}</span>

updated code after removing jquery as suggested :

$scope.addActivity = function(actor){

        AP.require('dialog', function(dialog){
            dialog.create({
                key: 'activity-content',
                width: '40%',
                height: '30%',
                chrome: true,

            });
        });

        AP.require('events', function(events){
            events.on('customEvent', function(){
                console.log(arguments[0]);
                var data = {
                    productName: $scope.productName,
                    actor: actor,
                    activity : arguments[0],
                    checked: false
                };

                $http.post('/addActivity', data)
                    .success(function(data){
                        $scope.data = data;
                        $scope.activities = [];

                        for (var activity in data) {

                            $scope.activities.push({
                                text: data[activity].activity,
                                id: data[activity].actor,
                                checked: data[activity].checked
                            });
                        }

                        actor = "";

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.success('','Activity added');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });


                    }).error(function(data){

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.error('','Error in Adding Activity');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });
                    });
            });
        });

    };

But I still face the same problem.

5
  • Your angular code is quite confused. As a general rule, you should not be mixing jQuery with Angular. Either one or the other. All of the things you are using $ for should be using the Angular varients.
    – dmoo
    Apr 24, 2016 at 18:17
  • Yeah I know that but right now I am not in a position to refactor it . I just need to fix this issue. Anyhow let me try to explain you the angular part. It addActivity calls a dialog box to open , (.submitImpact ) is the code to submit the dialog form. I hope it helped.
    – user_dev
    Apr 24, 2016 at 18:21
  • If you just want to hack it to work, set a var inProgress = true before the post, wrap the post in a if(!inProgress) and set inProgress = false in the success/error callback of the post.
    – dmoo
    Apr 24, 2016 at 18:24
  • No that is not working.
    – user_dev
    Apr 24, 2016 at 18:41
  • I have similar problem but there is no concrete suggestion provided. stackoverflow.com/questions/33131714/…
    – user_dev
    Apr 24, 2016 at 18:42

2 Answers 2

2

The problem is that the addActivity function is calling a .click handler every time it is called. Hence, on the second click, there are two .click handlers attached to the element.

There are several ways of fixing this:

  • Refactoring the code in Angular and using ng-click (not possible)
  • Adding the click handler only once. This would involve moving the click handler outside the addActivity function. (best way)
  • Using jQuery.one (as suggested by Sampath).
  • Using name-spaced jQuery events.

After refactoring, the code should look like this:

AP.require('events', function(events){
    // ...
});


$scope.addActivity = function(actor){
  AP.require('dialog', function(dialog){
      // ...
  });
});
6
  • Thanks @musically_ut can you please elaborate the second approach.
    – user_dev
    Apr 25, 2016 at 10:53
  • 1
    I changed the entire code and removed jquery (updated the code)
    – user_dev
    May 3, 2016 at 13:52
  • But I still face the same problem. I have updated my question please have a look
    – user_dev
    May 3, 2016 at 14:17
  • so how am I supposed to handle this now as I removed jquery. please check the updated code in the question.
    – user_dev
    May 3, 2016 at 14:38
  • @user_dev have added what the code should look like. May 3, 2016 at 14:40
2

Please try as shown below.

$(".SubmitImpact").one("click", function () {

    //alert("This will be clicked only once.");

});

.one()

2
  • That worked, but can you please tell me why this is happening at all as I have other similar buttons that works fine.
    – user_dev
    Apr 24, 2016 at 18:56
  • I'm sorry,exactly I don't know why this is happening here and there.But if you use proper DOM element handling techniques like above then you can avoid such issues.
    – Sampath
    Apr 24, 2016 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.