AngularJs - Unable to call click JavaScript click function of a tag

Question

I've two bootstrap tabs where I'm showing list on the first Tab and on the second tab there will be textboxes for adding new record.

<ul class="nav nav-tabs naviborder">
   <li class="active" ng-click="showTasksList()">
      <a class="icontab" data-target="#divTasks" data-toggle="tab">Tasks</a>
   </li>
   <li ng-click="addTask()" id="liCreateTask">
      <a id="aAddTask" class="icontab" data-target="#divCreateTask" data-toggle="tab">Create Task</a>
   </li>
</ul>

Now on the list, I've some edit button and on clicking that, I will populate the textboxes in the second tab and show the second tab automatically.

Now, My problem is : I'm able to populate the textboxes but uanble to switch to the second tab.

My AngularJs Code :

$scope.EditFieldForceTask = function (TaskData) {           
   $scope.TaskEditMode = true;
   $scope.TaskContactName = TaskData.CONTACT_NAME;
   $scope.TaskContactNumber = TaskData.CONTACT_NUMBER;
   $('#aAddTask').click();
   //$scope.tab2Click();
}

Upon calling this $('#aAddTask').click();, I'm getting three errors like

Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.8/$rootScope/inprog?p0=%24apply 
at Error (native)

I've also tried to define a ng-click event to that a tag, but even that's not working.

But when I try to call the function $('#aAddTask').click(); from console, it's working fine.

Can anyone please tell me the mistake I'm doing?

I think Your id aAddTask is not accessible inside EditFieldForceTask function. — shreyansh
– shreyansh, Commented Jan 7, 2016 at 5:03
why cant you call the method instead of simulating the click? — Cerlin
– Cerlin, Commented Jan 7, 2016 at 5:04
Why cant u just call the addTask function in EditFieldForceTask? Or try calling ur code in $timeout(function() {$('#aAddTask').click();}) — blessanm86
– blessanm86, Commented Jan 7, 2016 at 5:04
@blessenm : Finally, the timeout seems to be working.Thank you very much. setTimeout(function () { $('#abcAddTask').click(); }, 200); — RealSteel
– RealSteel, Commented Jan 7, 2016 at 5:28

blessanm86 · Accepted Answer · 2016-01-07 05:52:08Z

1

You are trying to execute a click function which may be triggering a digest cycle while a digest cycle is already in progress.

You can delay your click function to be executed after current digest cycle is executed using $timeout or setTimeout.

$timeout(function() {
  $('#aAddTask').click();
});

answered Jan 7, 2016 at 5:52

blessanm86

31.8k14 gold badges74 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs - Unable to call click JavaScript click function of a tag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related