I'm have a Bootstrap 3 DateTimePicker input filed on my webpage and I'm trying to enable 'Edit' button whenever change is made to existing data. The problem is that change of datetime using datatimepicker is not marking my form as 'dirty', so button is greyed out permanently.
<input type="submit" value="{{!myCtrl.thing.id ? 'Add' : 'Update'}}" class="btn btn-primary btn-sm" ng-disabled="myForm.$invalid || myForm.$pristine">
I know how to catch datatime change event using JQuery, but I don't have any idea how to access 'myForm' to change it's state to dirty.
<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal">
<label class="col-md-2 control-label" for="date">Date:</label>
<div class="col-md-7">
<div class="input-group date" id='datetimepicker'>
<input class="form-control" name="date" id="datetimepicker1" placeholder="select date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
});
});
$("#datetimepicker").on("dp.change", function(e) {
//CODE TO set myForm to 'dirty' state.
});
</script>
</form>
You can manually set it using the general form [formName].$setDirty(). So for you it would be: myForm.$setDirty().
Why don't you try to set a directive to handle jQuery stuff?
mainModule.directive('datePickerHandler', function () {
return {
restrict: 'A',
link: function (scope, el) {
angular.element(document).ready(function () {
$(el).datetimepicker({}).on('dp.change', function(e) {
scope.myForm.$setDirty();
});
});
}
}
});
Then you can have access to the scope directives like form.
Related
The following is the chose I am using to let the user manually choose working/starting time.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>
By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?
Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/
The code is only changing the visibility after clicking the #beastmode element. There's no explicit default otherwise.
You can hide it when the page loads:
$(function () {
$('#id_1,#id_2').hide();
});
Or, even better, style it to be hidden by default in your CSS:
#id_1,#id_2 {
display: none;
}
That way it's hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.
Example
Almost you code is fine. Try this it will work definitely.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>
First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that's the reason which not show/hide your content.
I have a script that disables links with a class "disabled"
//disabled links
$(document).ready(function() {
$(".disabled a").click(function() {
return false;
});
});
Additionally, I have a script that when the ".edit" button is clicked toggles the disabled state of the inputs in it's own form. It also does a removeClass('disabled') on any matching links in the form.
//toggle form edit
$("#edit").click(function(e) {
e.preventDefault();
$(this).closest("form").find("input").prop('disabled',false);
$(this).closest("form").find(".input-group-addon").removeClass('disabled');
$("#save").prop('disabled',false);
$("#edit").prop('disabled',true);
$(".alert").hide(400, "swing");
});
Then there is a script for adding and deleting input fields
//add input fields
$(".form-group").on('click', 'a.addInput', function() {
var original = $(this).closest(".input-group");
original.clone().insertAfter(original);
});
//remove input fields
$(".form-group").on('click', 'a.deleteInput', function() {
var original = $(this).closest(".input-group");
if($(this).closest(".form-group").children(".input-group").length > 1) {
original.remove();
}
});
HTML:
<form class="edit">
<div class="panel">
<div class="panel-heading">
<span><i class="fa fa-user" aria-hidden="true"></i> Basic Information</span>
<span class="pull-right"><input id="save" class="btn btn-success" type="submit" value="Save" disabled></span>
<span class="pull-right"><button id="edit" class="btn btn-default">Edit</button></span>
</div>
<div class="panel-body">
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<input type="email" class="form-control" placeholder="Email" name="email" value="engelo#dingosoft.us" disabled required>
<div class="input-group-addon disabled"><span class="fa fa-plus"></span></div>
<div class="input-group-addon disabled"><span class="fa fa-minus"></span></div>
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<input type="tel" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="Format: 555-555-5555" name="phone" value="419-555-1212" disabled required>
<div class="input-group-addon disabled"><span class="fa fa-plus"></span></div>
<div class="input-group-addon disabled"><span class="fa fa-minus"></span></div>
</div>
</div>
</div>
</div>
</form>
The problem I am having is that when the class "disabled" is removed from the links, the links ('a.addInput') & ('a.deleteInput') do not function. What am I missing here?
Click handlers are attached to elements, not to selectors. So when you do this:
$(".disabled a").click(function() {
return false;
});
You are assigning that behavior to all elements which match at that moment (in this case, when the document loads). No matter what changes you make to the DOM after the fact, any elements which were matched when you invoked the above code will still have the above click handler.
One approach here could be to assign the click handler to a common unchanging parent, instead of to the elements themselves. By using .on() in this way, you can evaluate the selector dynamically when the click event happens instead of just once when the page loads. Something like this:
$(document).on("click", ".disabled a", function() {
return false;
});
Then the second selector (".disabled a") will be evaluated with each click. So if the DOM has changed such that an element no longer matches that selector, this click handler won't be used.
You need to add prevent the event.
$(".form-group").on('click', 'a.addInput', function(e) {
e.preventDefault();
var original = $(this).closest(".input-group");
original.clone().insertAfter(original);
});
//remove input fields
$(".form-group").on('click', 'a.deleteInput', function(e) {
e.preventDefault();
var original = $(this).closest(".input-group");
if($(this).closest(".form-group").children(".input-group").length > 1) {
original.remove();
}
});
or you can add a href="javascript:void(0);" to addInput and deleteInput.
I hope it will be help to achieve your goal...
I need one help. I am implementing jquery.timepicker.js to get the time interval in my Angular application but i am not getting any value like that.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">From Time :</span>
<input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM" ng-model="time" ng-change="clearField('time');" maxlength="30" time-picker="" />
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">To Time :</span>
<input type="text" name="time1" id="time1" class="form-control oditek-form" placeholder="E.G-9.00AM" ng-model="time1" ng-change="clearField('time1');" maxlength="30" time-picker="" />
</div>
</div>
<div style="text-align:center; padding:10px 0px;">
<input type="button" class="btn btn-success" ng-click="addTimeDetails();" id="saveData" value="Add" style="margin-right:20px;" />
</div>
my controller side code is given below.
var app=angular.module('spesh',[]);
app.controller('formController',function($scope,$http){
$scope.addTimeDetails=function(){
console.log('time',$scope.time,$scope.time1);
}
})
app.directive('timePicker', [function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel'
},
link: function ($scope, element, attrs, ngModelCtrl) {
element.timepicker();
element.on('changeTime', function () {
$scope.$apply(function () {
$scope.model = element.val();
});
});
}
}
}]);
Here i need when user will click on text field the time drop down will come and click on add button the selected time will show in console.MY complete code is here in plunkr.Please help me.
Change <html ng-model="spesh"> to <html ng-app="spesh">
Here is better solution: https://plnkr.co/edit/A0sSqXzx73XYn0f7UVGD?p=preview
When you require ngModel, you can use it's methods or read value. You don't need to read ngModel attribute.
$setViewValue(value, trigger); Update the view value.
This method should be called when a control wants to change the view
value; typically, this is done from within a DOM event handler. For
example, the input directive calls it when the value of the input
changes and select calls it when an option is selected.
I am using this code to fire the popup:
HTML
<div class="popover-markup">
Track
<div class="head hide">Track #item.FullName [#item.Id]</div>
<div class="content hide">
<div class="form-group">
<label>Date Called:</label>
<input type="text"
class="form-control dtp"
placeholder="Date called…">
</div>
</div>
<span class="btn btn-info rr" id="abcd">Submit</span>
</div>
</div>
And my jQuery:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
});
My intention is to use Bootstrap DateTimePicker widget when the user clicks on the input inside the popover. I have tried using the solution offered in this SO question.
My modified jQuery code now looks:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
}).on('shown.bs.popover', function () {
$('.dtp').datetimepicker();
});
I still get to see the datetimepicker NOT at the bottom of the input field but at the bottom of the whole popover. what am I missing? Please guide.
You are missing some required div elements,
Depend your needs, possible solutions show the datepicker at bottom of input, the correct HTML....
If with icon
<div class="form-group">
<label>Date Called:</label>
<div class="input-group dtp">
<input type="text" class="form-control" placeholder="Date called…">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Fiddle Example
And Without Icon
<div class="row">
<div class='col-sm-12'>
<label>Date Called:</label>
<input type="text" class="form-control dtp" placeholder="Date called…">
</div>
</div>
Fiddle Example
Rest of the code & approach is all good.
I have one issue here.I have a form in my app and my requirement is while user is navigating to another page without submit this form one confirmation message will display to alert user using angular.js.I am explaining my code below.
<form name="billdata" id="billdata" confirm-on-exit enctype="multipart/form-data" novalidate>
<span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">First Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="first_name">
<span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">Last Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="last_name">
<div style="text-align: center; padding-top: 10px;">
<input type="button" class="btn btn-success" ng-click="addUserData(billdata);" id="addProfileData" value="submit" />
</div>
</form>
And i have the following code in my controller page.
dashboard.directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
window.onbeforeunload = function(){
if ($scope.billdata.$dirty) {
return "The form is not saved, do you want to stay on the page?";
}
}
$scope.$on('$locationChangeStart', function(event, next, current) {
if ($scope.billdata.$dirty) {
console.log('next',next,current);
if(!confirm("The form is not saved, do you want to stay on the page?")) {
event.preventDefault();
}else{
console.log('hii');
}
}
});
}
};
});
Here i am getting the confirmation message while user is totally leaving the page site.But my requirement is while user is navigating to another page without submit this form the confirmation message should display.Please help me.
Ok so I created a small project with two routes. to demonstrate how to do what you wanted... this is with your pieces of code so just take from it what you need
the directive has been changed to:
.directive('confirmOnExit', function() {
return {
require:'form',
link: function($scope, elem, attrs,formController) {
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form is not saved, do you want to stay on the page?";
}
}
$scope.$on('$locationChangeStart', function (event, next, current) {
if (formController.$dirty) {
if (!confirm("The form is dirty, do you want to stay on the page?")) {
event.preventDefault();
}
}
});
}
};
});
not that I added the require form to make it generic to all forms you want to use.
this will only consider $dirty so if you want also $invalid add the condition and $submitted as well
**HERE IS A ** PLUNKER with the working example...