Prevent from dynamically changings with ng-model - javascript

I have some fields to edit user' data. One of the field is also used in breadcrumb:
I use ng-model to bind all the fields:
...
<ol class="breadcrumb">
<li>Home</li>
<li>{{user.name}}</li>
<li class="active">Profile</li>
<li class="active">Edit</li>
</ol>
<hr>
<form role="form" class="col-sm-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-model="user.name" placeholder="Username" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.city" placeholder="City" class="form-control">
</div>
<button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
</form>
...
The problem and also the right behavior of ng-model changes the name value of breadcrumb on input updating:
Is it possible to set value in breadcrumb as a static and prevent it from changing?
The actual result I want to achieve:

Answer is that I should use one-time data-binding using :: on my li element in the breadcrumb like so:
<li>{{::user.name}}</li>
It prevents data from future changing once it was rendered.

Related

Unable to Remove Class for Span Element

I'm trying do remove class "bg-color-disable" for #filenameRPT but nothing I tried work. I have used $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable"); and $("#filenameRPT").removeClass("bg-color-disable"); but no lucks. Any idea?
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
Crazy thing is I was able to remove "bg-color-disable" for #parentRPT using $("#parentRPT").removeClass("bg-color-disable"); but using $("#filenameRPT").removeClass("bg-color-disable"); didn't work for element #filenameRPT. Why?
I think your issue is with improper closing of anchor tag.
Removing class is straight forward.
window.onload = removeClass()
function removeClass() {
console.log('before removal',document.getElementById('filenameRPT').classList);
document.getElementById('filenameRPT').classList.remove('bg-color-disable')
console.log('after removal',document.getElementById('filenameRPT').classList);
}
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a>
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>

Angular JS ng-click does not work on search icon

Can someone please lead me into the right direction regarding my search icon? I need to make my search icon clickable within the input field to display results.
Please see the following code listed below.
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-enter="runUserSearch()" />
</div>
</div>
Use ng-click instead of ng-enter
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-click="runUserSearch()" />
</div>
</div>

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

Dynamic TextFields in JSP with data from MYSQL database upon item selection

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>
You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)
I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.

Preventing bootstrap from breaking between two form elements

I am using bootstrap with the bootstrap datetimepicker and have a bit of a problem.
My problem is best explained by this JSfiddle.
What I want to do is to have three separate form divs in a row and for them to stay in one row no matter the screen size. I would usually acchieve this by simply having a form-group div (as seen in the "situation I want" of the JSfiddle), however in this case, that is not possible because if I do that, then the second input messes with the javascript of the bootstrap datetimepicker, so I cannot touch the form group div.
Is there any way of acchieving what I want to do?
The HTML in which my problem is isolated is:
<div class="container">
<div class="row">
The situation right now:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-inline">
<div class="form-group">
<div class="input-group date date-filter" id="start-date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="text" class="form-control" id="end-time" />
</div>
</div>
</div>
<div class="row">
The situation I want:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-group">
<div class="input-group date date-filter" id="end-date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="end-time"/>
</div>
</div>
</div>
</div>
</div>

Categories