Angularjs+jquery bootstrap-datepicker delegate not firing on first click
Angularjs+jquery bootstrap-datepicker delegate not firing on first click
I have tried adding the datepicker dynamically on button click and I have delegated the datepicker click which is not working on the first click its getting fired on the second click the code I have tried are the following
$scope.add = function()
{
var body =angular.element(window.document.body);
body.append(`
<div class="input-group date">
<input class="form-control input-sm"
placeholder="dd/mm/yyyy"type="text">
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
`);
}
$(document).delegate("div.input-group.date", "click", function(){
$(this).datepicker({autoclose: true,orientation:"top"});
});
I couldn't find out the reason, thanks in advance.
<html ng-app="app">
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="jquery-1.11.3.js"></script>
<!-- Datepicker for Bootstrap v1.5.0 (https://github.com/eternicode/bootstrap-datepicker) -->
<script src="datetimepicker.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="test">
<input ng-click="add()" value="Add datepicker" type="button" />
</body>
</html>
plnkr sample
steps to replicate bug:
Add Datepicker
Observed
First click wont work, it will work from the subsequent clicks
$digest
@ShashankVivek the jQuery code isn't modifying
$scope, so lack of $digest or $apply is not the problem in this case.– georgeawg
Jul 1 at 15:55
$scope
$digest
$apply
You probably don't need to mix in jQuery, could you comment more on what you're trying to achieve?
– Edgar Quintero
Jul 1 at 15:58
This code uses an old version of bootstrap-datepicker (1.5) and an old version of jQuery (1.11). Instead of trying to fix the problem with jQuery delegate (which is deprecated), it would be wiser to use a bootstrap-datepicker that is integrated with the AngularJS framework. Consider the one by the AngularUI team: ui.bootstrap.datepickerPopup
– georgeawg
Jul 1 at 17:22
@Thirumalaimurugan : Ahhh... ok . lemme check it then
– Shashank Vivek
Jul 2 at 6:43
2 Answers
2
Finally I found the reason and work around for the same. I am giving that solution since it may help to others in future
Reason:
First mistake is I have bind the datepicker event on element click so binding happened on the first click and it started working in subsequent clicks.
Work around
We have to bind the datepicker immediately after the element created I have solved this using the following code
$scope.add = function()
{
var body =angular.element(window.document.body);
var element=angular.element('<div class="input-group date">
<input class="form-control input-sm"
placeholder="dd/mm/yyyy" type="text">
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>');
body.append(element);
$(element).datepicker({autoclose: true,orientation:"top"});
}
If you are just trying to make the date picker appear on click, then do it the AngularJS way:
Controller:
$scope.add = function() {
$scope.showDatePicker = true;
}
Template:
<button ng-click="add()">Add Datepicker</button>
<div ng-show="showDatePicker" class="input-group date">
<input class="form-control input-sm" placeholder="dd/mm/yyyy"type="text">
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
When you click on the button with add() the $scope.showDatePicker is set to true and the datepicker is shown. You could also add a button to "hide" the date picker:
add()
$scope.showDatePicker
$scope.remove = function() {
$scope.showDatePicker = false;
}
Or you could make a function that toggles it, where add and remove happen in the same function.
add
remove
This answer shows a Material Design datepicker, but the question is about a Bootstrap datepicker.
– georgeawg
Jul 1 at 17:11
Updated answer to use bootstrap
– Edgar Quintero
Jul 1 at 17:48
@EdgarQuintero thanks for the help, I want to add the component dynamically(n times) not static.
– Thirumalai murugan
Jul 2 at 5:48
Ok, I do not see the (n times) part in your initial question. Also I do not see in your question where you mention you cannot NOT manipulate the DOM from the controller, if that's a requirement it should be posted.
– Edgar Quintero
Jul 2 at 23:00
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Why are you doing the grave mistake of mixing angularJS and jquery. Why not use angular Date picker ?? You are missing
$digestwhen using jquery– Shashank Vivek
Jul 1 at 15:51