ng-click not fire function in controller - html

The bug is very weird, I have been stucking here for hours just can find why my function in controller is fired.
Here is my HTML code:
<div class="col-md-9 clearfix" id="customer-account" ng-controller='ProfileController'>
<div class="box clearfix">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_old">oldpassword</label>
<input type="password" class="form-control" id="password_old" ng-model="passwordold">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_1">newpassword</label>
<input type="password" class="form-control" id="password_1" ng-model="passwordnew1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password_2">retype</label>
<input type="password" class="form-control" id="password_2"ng-model="passwordnew2">
</div>
</div>
<p>{{passwordnew2}}</p>
</div>
<!-- /.row -->
<div class="text-center">
<button type="submit" class="btn btn-primary">
<i class="fa fa-save" ng-click="changePwd(passwordold,passwordnew1,passwordnew2)"></i> save
</button>
</div>
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>
</div>
</div>
After I click the Button, which ng-click attribute as you can see, nothing happen.
Here is my controller code:
controller('ProfileController', ['$scope','UserFactory','SharedDataFactory',
function($scope,UserFactory,SharedDataFactory){
$scope.user = UserFactory.user;
$scope.passwordold;
$scope.errorMessageChangepwd='error';
$scope.showErrMsgChangepwd = false;
$scope.passwordnew1;
$scope.passwordnew2;
$scope.changePwd = function(passwordold,passwordnew1,passwordnew2){
console.log("aaaaaaaaaa");
if (passwordnew1!==passwordnew2){
$scope.showErrMsgChangepwd= true;
$scope.errorMessageChangepwd = 'error';
}else{
UserFactory.changePwd(passwordnew1)
.catch(function(err){
console.log(err.data);
}).then(function(response){
console.log(response);
});
}
};}]);
I called console.log("aaaaaaaaaa"); in the first line of my function, but after I click the button, nothing is shown on console.
And also
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>`
does not show error aaaa as expected but aaa on the browser.
what could be wrong?
Thanks.

You need to add ng-controller="ProfileController" in the top of your form.
Which looks like missing on your code.

Related

Update input type time based on updated FormControl using PatchValue or SetValue in Angular

I have a form group with 3 inputs. The first input is a time input and the other 2 are custom form components. I setup a form.patchValue which updates the form values as seen below, however it does not update the UI, the time input is still empty.
How can I use patchValue to update the input ?
this.scheduleAutoReportForm = new FormGroup(
{
reportAt: new FormControl( '12:00' , Validators.required),
days: new FormControl([],Validators.required),
email: new FormControl([],[Validators.required])
}
);
this.scheduleAutoReportForm.patchValue({
reportAt: '24:00',
days:["2","4"],
email: ['placeholder#gmail.com']
});
this.ref.detectChanges();
Update
I experimented and it turns out that the textbox gets updated but not the time.
<div class="modal-header">
<h4 class="h-primary modal-title">Schedule Auto Report</h4>
<mh1-icon-button [icon]="faTimes" [iconClasses]="['btn', 'btn-sm', 'mx-0']" iconSize="lg" (click)="closeModal()">
</mh1-icon-button>
</div>
<div class="modal-body card">
<!-- This is where the form starts -->
<form [formGroup]='scheduleAutoReportForm' (ngSubmit)='onSubmit()'>
<div class="row">
<div class="col-3">
<label for="reportAt" ><h5>Send Report At:</h5></label>
<input type="time" name='reportAt' formControlName='reportAt' class="form-control" required>
</div>
</div>
<div class="row">
<div class="col-3">
<label for="test" >test</label>
<input type="text" name='test' formControlName='test' class="form-control" >
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<sentryx-day-selector formControlName="days"></sentryx-day-selector>
</div>
</div>
<div class="row mt-2">
<div class='col-12'>
<sentryx-email-chips formControlName="email"></sentryx-email-chips>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<button type="submit" class="btn btn-md btn-secondary"
[disabled]="!scheduleAutoReportForm.valid">Submit</button>
<button type="cancel" class="btn btn-md btn-secondary">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer card">
{{scheduleAutoReportForm.value | json}}
{{schedule | json}}
</div>
Did you try calling updateValueAndValidity() after patching the value?
See
What is updateValueAndValidity

How to loop data into textarea thymeleaf?

Do you know how can we loop data into textarea in thymeleaf?
Please you help to me a sample or any suggestion to do this.
Thanks.
java code
#GetMapping("/import_billing")
public String getImportBilling(Model model) {
model.addAttribute("importBilling", new ImportBilling());
return "importBilling";
}
#PostMapping("/import_billing")
public String postImportBilling(ImportBilling request, Model model, BindingResult result) {
if (result.hasErrors()) {
for (FieldError error : result.getFieldErrors()) {
System.out.println(error.getField() + ": " + error.getDefaultMessage());
}
model.addAttribute("importBilling", request);
return "importBilling";
}
ApiResponse response = cardHolderService.importBillingData(request);
model.addAttribute("response", response.getData());
return "importBilling";
}
Html code
<div class="container-fluid" layout:fragment="content">
<div class="card shadow mb-4">
<div class="collapse show" id="collapseCardExample">
<div class="card-body">
<form class="page-information" th:action="#{/import_billing}" th:object="${importBilling}"
method="post">
<div class="row">
<div class="col-md-4">
<input type="number"
th:value="*{from}"/>
</div>
<div class="col-md-4">
<input type="number"
th:value="*{to}"/>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" type="submit">
<i id="_spinner">Execute</i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<label>Output console</label>
<div class="card shadow mb-4">
<div class="card-body">
<div class="chart-area">
<div class="form-group" th:each="temp:*{response}" >
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" th:text="${temp}"/>></textarea>
</div>
</div>
</div>
</div>
</div>
In this case, after on click button Execute I would like all response display in textarea
Use th:inline="text" and write your loop using textual syntax. For example, instead of:
<div class="form-group" th:each="temp:*{response}" >
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" th:text="${temp}"/>></textarea>
</div>
Do this:
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" th:inline="text">
[# th:each="temp: *{response}"]
[[${temp}]]
[/]
</textarea>
</div>

Error in Sending form data to Django views through AJAX

I have a HTML form, which takes in input from the user. On clicking the submit button, form data needs to be sent to the views.py in a JSON format, through AJAX. I tried out something, but I am getting an error the JSON object must be str, not 'NoneType' . The JSON data is being loaded in the views.py through:
form = json.loads(request.POST.get('form'))
The data is returned in form of a dictionary called 'searchdata'.
The form:
<form method="POST" id="inputForm">
<div class="container" style="margin-bottom: 50px;width:100%">
<div class="container-fluid mt-3">
<div class="card" id="statform">
<div class="card-header">
<div class="card-title">
<div style="font-size: 25px">Filter</div>
</div>
</div>
<br>
<div class="card-body">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
<label name="start_date" class="control-label" style="width:35%">Start date</label>
<input type="date" id="start_date" style="color:black;width:100px" ></input>
</div>
</div>
<div class="col-xs-6">
<label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
<input style="color:black;width:100px" id="end_date" type="date"></input>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<label name="fruit_name" class="control-label" style="width:35%; padding-left:15px">Select a Fruit</label>
<select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label name="vendor_test" class="control-label" style="width:35%">Select Vendor_TEST</label>
<select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="vendor_test" multiple="multiple">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label name="release_version" class="control-label" style="width:35%; padding-left:15px">Select Release version</label>
<select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="release_version" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label class="control-label" style="width:35%">Error Message</label>
<input type="text" placeholder="Type message here" style="width:210px">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" style="width:35%; padding-left:15px">Error Message List</label>
<select class="js-example-placeholder-single4 js-example-basic-multiple form-control" style="width:210px" id = "error_message" multiple="multiple">
</select>
</div>
</div>
<div class="text-center">
<button class="btn btn-md btn-default" type="submit" name="search" value="search" onclick="loadResults()">
<i class="fa fa-arrow-circle-right"></i> Submit
</button>
<button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
<i class="fa fa-arrow-circle-right"></i> Reset
</button>
</div>
</div>
</div> <!--form-->
</div> <!-- row -->
</div> <!--container main-->
</form>
The AJAX call I have written:
$.ajax({
url : window.location.href,
type : 'POST',
cache : false,
data:{form:JSON.stringify(formdata)},
success:function(res){
if(typeof res.searchdata != 'undefined'){
self.$dispatch('searchdataevent',res.searchdata);
}
if(typeof res.message != 'undefined'){
self.message = res.message;
}
self.loading = false;
},
error : function(err){
self.message = 'Error communicating with server';
self.loading = false;
}
});
Where am I going wrong? Any help is appreciated.

Angular form do not get submitted when dynamically adding row

I am trying to develop a page with a total of 6 input fields - 2 constant and 4 dynamic. A single form needs to send data with dynamic marks rows that will be added by users choice.
View :
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks()"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks(addBtnMarks)">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
Controller :
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:0,
subtwo:0,
subthree:0,
subfour:0,
});
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.delMarks = function (){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.pop();
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
Problem is:
When I click -save button form data for dynamic rows does not get shown up
in the console. Also, when adding more than one row, -delete button does
not deletes individual rows. The last row gets deleted by default. What might be the
problem in the code.
When using array.pop, it will remove the last element in the array. The solution is to pass the element index from the view through ng-click and splice the array based on the index , thus the element will be remove out from the array
View
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
Controller
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
console.log(rowConut);
console.log($scope.studentMarks);
};
Update
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:$scope.formData.regno,
subtwo:0,
subthree:0,
subfour:0,
});
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
//$scope.studentMarks.pop();
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="studentsApp">
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks()">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
</html>

bootstrap is not showing it's calendar

i have used bootstrap to make a calendar and to select a ranged date from and to, but the problem is for some strange reason, the calendar is not coming.
I have write my html and query code. But i think the script is wrong!
Html ---
<div class="row">
<!-- Hover Row Table -->
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="widget-content padded clearfix">
<table class="table table-hover">
<td>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
script --
<script>
jQuery(function () {
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery('#endDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery("#startDate").on("dp.change", function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>
Output ---
it should look like this ---
it shows the error ---
TypeError: jQuery(...).datetimepicker is not a function
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
How can i fix this error, anyone knows !
Thanks a lot in advanced.
I found this jsfiddle example.
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
You can also read more about this on github.