JavaScript Validation for Balance Amount - javascript

I have MySQL Table that consist of initial_amount, used_amount & balance as follows.
fin_code initial_amount used_amount balance
1 500,000.00 275,000.00 225,000.00
2 212,000.00 125,000.00 87,000.00
3 455,000.00 455,000.00 -
02) If I enter to issue 300,000.00 as used_amount through the Bootstrap view under fin_code 1, there need to control over issues vs balance. That is 225,000.00.
03) I used the following JavaScript code to perform this task
$(document).on('keyup', '#used_amount', function () {
var bal = parseFloat($('#balance').val());
var amount = parseFloat($('#used_amount').val());
if (bal < amount) {
$('#save').prop('disabled', true);
$('#used_amount_div').addClass('danger');
alert("Can not proceed your request ..!!. Issue amount is higher than the available balance..");
} else {
$('#save').prop('disabled', false);
}
04) But it is properly working for the minus values / balances only. I can not understand what I am going wrong. Can any one help me on this task ?

Related

Laravel - JS [ajax] Var must be constant

i will be happy if someone know how to do this and why i m getting error , i would like to pass "var size" inside route() method inside forelse is it somehow passible ?
whot it do ?
based on radio box ( if size M and L are avaible there will be 2 radioboxes ), then if user click on add to card it gets Value of radio box for example ( 6 ) = L them pass it to ajax route
Error :
Use of undefined constant size - assumed 'size' (View: C:\xampp\htdocs\EcSc\resources\views\shop\home.blade.php)
JS :
<script>
var CartCount = {{ Session::has("cart") ? Session::get("cart")->totalQty : "0" }} ;
var size;
#forelse($products as $productsjs)
$("#product-{{$productsjs->id}}").click(function () {
var radios{{$productsjs->id}} = document.getElementsByName('radio-{{$productsjs->id}}');
for (var i = 0, length = radios{{$productsjs->id}}.length; i < length; i++) {
if (radios{{$productsjs->id}}[i].checked) {
// do whatever you want with the checked radio
size = radios{{$productsjs->id}}[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
$.ajax({
type: "get",
url: "{{route("product.addToCartAjax", $productsjs->id, size)}}", // insert product with specific size into session
success: function () {
CartCount++;
$("#shoppingCartCounter").html(CartCount);
console.log("Produkt bol pridani");
console.log("Velkost produktu je : " + size); // size contain value of checked radio box
}
})
});
#empty
#endforelse
</script>
You can't print the javascript variable in PHP. Think of {{ }} as <?php ?>. If you just insert it in there, it may look like <?php echo size; ?> which won't work, as obviously size will look like a constant here, which of course is undefined (your error).
Instead, you need to declare the variable in php. However, since you're doing this after run time, there's no way that you're going to be able to assign a PHP variable after the page has been rendered. So what are your alternatives?
1 - Construct the route manually: (recommended, easiest)
url: '/products/' + {{$productsjs->id}} + '/add-to-cart-ajax/' + size
2 - Use a client side route generator for Laravel, such as La Route (harder, but more dynamic and reusable)
laroute.route('product.{id}.addToCartAjax.{size}', {id: '{{$productsjs->id}}', size: size});
3 - Other generic solutions such as generating the route ahead of time and dynamically modifying it with javascript (ugly, non-portable)

How to do a Pug for loop with AJAX?

I am working on a Tinder clone web project for school using Node.js, Express, and Pug that needs to return potential matches with a priority on either distance from the current user or similar interests shared with the current user. When the user first enters their page of potential matches I have the site automatically show the user the best possible matches based on a distance of 5km from their current position. I am sending to the page I render an Array of matches called users and a size of that array called userslen that I pulled from my database in my node file. I then proceed to show the potential matches on the page using this pug for loop:
div(class='container', id='searchResults') <!-- SEARCH RESULTS -->
div(class='row')
- for (var i = 0; i < userslen; i++) {
div(class='col-lg-4 col-md-6 col-sm-12 col-xs-12 usertop')
div(class='row')
div(class='col-lg-12 col-md-12')
a(href='/users/' + users[i].username)
h1=users[i].username
- if (users[i].liked == true) {
span(id='youlikeglyph', class="glyphicon glyphicon-ok")
- } else if (users[i].disliked == true) {
span(id='youdislikeglyph', class="glyphicon glyphicon-remove")
- } else {
- }
div(class='row')
div(class='col-lg-12 col-md-12')
img(id='viewerphoto1', class='userpagephoto', src='/static/uploads/' + users[i].filename)
div(class='row')
- if (users[i].liked == false && users[i].disliked == false) {
div(class='btn-group')
button(id='dislike' + i, class='btn btn-danger btn-lg')
|Dislike
button(id='like' + i, class='btn btn-success btn-lg')
| Like
- } else if (users[i].liked == false && users[i].disliked == true) {
button(id='like' + i, class='btn btn-success btn-lg')
|Like
- } else if (users[i].liked == true && users[i].disliked == false) {
button(id='dislike' + i, class='btn btn-danger btn-lg')
|Dislike
- } else {
- }
div(class='row')
div(class='col-lg-4 col-md-4')
h5="Distance"
h4=users[i].distance + "km"
div(class='col-lg-4 col-md-4')
h5="Same Tags"
h4=users[i].cTags
div(class='col-lg-4 col-md-4')
h5="Popularity"
h4=users[i].popularity
- }
There are two buttons at the top of my page (not shown in the above code) that allow a user to choose to search based on distance or based on tags with a min and max distance/tags-in-common input. When they click on the button of their choice with the min max they have entered I send the data through AJAX to a post that then returns a new array of potential matches based on this new data. Is there a way to make the same for loop I have in the above code but using jQuery once my AJAX response is a success? If there is, what is the best way to go about it? Thank you in advance for your help!
You cannot go back to Jade/Pug once you're on the client. Jade is a templating engine that works on Node. Once you're on the client, it doesn't exist anymore.
You'll need to just loop over your HTML in jQuery, and won't be able to use Jade for this.
Another option is to use one of the client side templating frameworks like Underscore templates/Handlebars/Moustache JS etc.
Using these, you can handle the looping much more elegantly than you can using jQuery, but of course, that really is a call you should take, because this would mean additional payload over the wire.
With one of the templating frameworks, you can define your template in Jade and then reuse it for your iterations

Zimlets in zimbra, how to make a simple SearchRequest?

I'm a little desperate because I can not perform a simple search on my zimlet.
I just want to make a search in the custom folder.
The search should only display messages that are within my custom folder.
Like when I click on the custom folder in the left pane. exactly the same.
this is what shows the html header by pressing the icon of my custom folder in the left pane.
{"Header":{"context":{"_jsns":"urn:zimbra","userAgent":{"name":"ZimbraWebClient - FF39 (Linux)","version":"8.6.0_GA_1153"},"session":{"_content":150,"id":150},"account":{"_content":"admin#localhost.local","by":"name"},"csrfToken":"0_a3050edfdf238eadfdfdfdff2f14b4968e3"}},"Body":{"SearchRequest":{"_jsns":"urn:zimbraMail","sortBy":"dateDesc","header":[{"n":"List-ID"},{"n":"X-Zimbra-DL"},{"n":"IN-REPLY-TO"}],"tz":{"id":"America/Mexico_City"},"locale":{"_content":"es_MX"},"offset":0,"limit":100,"query":"in:\\"mycustomfolder\\"","types":"conversation","recip":"0","fullConversation":1,"needExp":1}}}
I'm trying with this code, within my com_zimbra_myzimlet.js
com_zimbra_myzimlet_HandlerObject.prototype._getShowResultFolderId =
function(t) {
var e=AjxSoapDoc.create("SearchRequest","urn:zimbraMail");
var cuery="raulicci";
e.setMethodAttribute("types","conversation");
e.setMethodAttribute("limit",100);
e.setMethodAttribute("offset",0);
e.set("query",cuery);
t.response=appCtxt.getAppController().sendRequest({
soapDoc:e,noBusyOverlay:false}
);
this.handleSearchResponse(t)
};
so far I can not find a way to make the consultation, although I imagine it is something easy as already implemented in zimbra comes when one gives click on the icon in my custom folder in the left pane.
I would like to use the default template that has zimbra to show INBOX, or the current folders.
When you click on the icon of the current folder in the left pane, us a list of emails appears as INBOX
I'm doing with my little zimlet one query with soap and json and I answered a JSON string.
This string json is a mailing list that are in the folder where you perform the query.
For request use:
var jsonObj = {SearchRequest:{_jsns:"urn:zimbraMail"}};
var request = jsonObj.SearchRequest;
request.sortBy = "dateDesc";
request.offset = 0;
request.limit = 100;
request.query = 'in:\"MYCURRENTFOLDER\"';
request.types = "conversation";
request.recips = "0";
request.fullConversation = 1;
request.needExp = 1;
var params = {
jsonObj:jsonObj,
asyncMode:true,
callback: (new AjxCallback(this, this._handleSOAPResponseJSON)),
errorCallback: (new AjxCallback(this, this._handleSOAPErrorResponseJSON)),
};
return appCtxt.getAppController().sendRequest(params);
For response use:
if (result.isException()) {
// do something with exception
var exception = result.getException();
return;
}
else {
response = { _jsns: "urn:zimbraMail", more: false };
}
// do something with response (in JSON format)
var response = result.getResponse();
var name = response.name;
var soapURL = response.publicURL;
var soapURL = response.soapURL;
var aller = result.getResponse();
var searchResult = new ZmSearchResult(this);
appCtxt.setStatusMsg("Response (JSON) success - "+name);
alert(aller.toSource());
JSON response to be displayed in the default template of INBOX integrated zimbra
({SearchResponse:{sortBy:"dateDesc", offset:0, c:[{id:"314", u:0, n:2, f:"s", d:1438663876000, su:"lokitox", fr:"lex", e:[{a:"admin#localhost.local", d:"admin", t:"f"}], m:[{id:"313", l:"300"}, {id:"312", l:"5", f:"s"}], sf:"1438663876000"}, {id:"-309", u:0, n:1, d:1438662639000, su:"Daily mail report for 2015-08-03", fr:"Grand Totals -- messages 91 received 117 delivered 0 forwarded 134 deferred (134 deferrals) 169 bounced 0 rejected (0%) 0 reject warnings 0 held 0 ...", e:[{a:"admin#localhost.local", d:"admin", t:"f"}], m:[{id:"309", s:"7232", l:"300"}], sf:"1438662639000"}], more:false, _jsns:"urn:zimbraMail"}})
Thankz, I hope someone has knowledge of how to do it

Angular performance issues, ng-repeat, unwanted callbacks

I'm facing some serious performance issues in my angular app, surely due to my bad ng-repeat implementation but I don't know how to do better. I've tried some other combinations but none give me the result I want, nor better performance. There have been some infinite loops, undefined variables due to asynch and $digest aborting.
This is how it should be looking (so that's the working result, but not optimized for now) : http://scr.hu/0ei9/8bpw9
Days with blue cells = user is present, red cell = absent. Beneath are the "shifts" per day (each shift can be done on various days).
When I console.log some of the functions, they are called way too many times than needed, for example isPresent (for checking if the user submited the day as available) is called 5x180 (180 being probably 5 users x 30 days of month) and getDayOfWeek (used in template for the shifts row) 28+840+812...there are 10 shifts. Whereas I would normally need to call isPresent only 1x180 for all cells and getDayOfWeek 1x30 days of month for one shifts row. That said, I don't really get why its called sooo many times and how to optimize it.
In addition, when I click on a blue cell, the setShift() function is called. I copied the function here but don't analyze it, I only wanted to show that it nowhere calls any of the previous functions, however I console.log an impressive 28x "days of the week" + 180 "is present" and + 812 "day of the week". No Idea where it comes from... to be frank, everything i click calls this same amout - if I change the month, year, click on an independent button...
I omitted some classes and css for better code reading.
Thanks for your help.
Edit
after commenting and decommenting some of the code I see that the most of those unwanted logs when I call the setShift() function come from the last sub-call : showPopover() where I open a $modal. When commented, there is like 1/3 of what I'm used to see. Before the modal appears there is the rest of this stuff. Furthermore I think that the temlpateUrl might be the cause because when commented it does not log all those houndreds of 'is present' and 'day of week'. And when I click anywhere on the modal, it recalls all those functions. Any ideas?
JS angular functions
$scope.isPresent = function(day, month, year, userId) {
console.log('is present')
var date = new Date(year, month - 1, day + 1)
var day = moment(date).format("D-M-YYYY");
for (var i = 0; i < $scope.presences.length; i++) {
var presentDay = moment($scope.presences[i].start).format("D-M-YYYY")
if (presentDay == day && userId == $scope.presences[i].coursierId) {
return true
}
}
}
$scope.getDayOfWeek = function(day, month, year) {
console.log('day of the week')
var date = new Date(parseInt(year), month - 1, day + 1)
var dayId = date.getDay();
return dayId;
}
/*
used for a limited ng-repeat
*/
$scope.getTimes = function(n) {
return new Array(n);
};
/*
Shows a list of sorted out shifts with corresponding
hours, cities and capabilities of coursier.
*/
$scope.setShift = function(day, month, year, userId, event) {
var date = new Date(year, month - 1, day)
var day = moment(date).format("D-M-YYYY");
var dayOfWeek = moment(date).day()
//SORT SHIFTs BY DAY OF WEEK clicked
var day_shifts = $scope.sortShiftByDayOfWeek(dayOfWeek)
//console.log(day_shifts)
//check if the day clicked is an dispo present day
for (var i = 0; i < $scope.presences.length; i++) {
var dispoDay = moment($scope.presences[i].start).format("D-M-YYYY")
//if yes, check the presence user id and the cell of user clicked
if (dispoDay == day) {
//then get all the shifts that fit into this coursier's time range
if ($scope.presences[i].coursierId == userId) {
var dispo = $scope.presences[i];
var dispoHours = $scope.getDispoHoursAndDay(dispo);
var time_shifts = $scope.compareDiposHoursAndShift(dispoHours, day_shifts);
//then sort the shifts by the dispo's and shift's cities
var time_city_shifts = $scope.compareDispoCityAndShift(time_shifts, dispo);
var time_city_able_shifts = $scope.compareUserAndShift(time_city_shifts, userId);
$scope.showPopover(time_city_able_shifts, event);
}
};
};
}
###Calendar table
<table class="table table-bordered">
<!--days of month-->
<tr class="mainHeader">
<th>coursier/jour</th>
##calendar.days = 30 days of month, for example
<th class="monthDay" ng-repeat=" numDay in [] | range: calendar.days">{{$index+1}} {{calendar.daysNames[$index]}}
</th>
</tr>
<!-- user name and days -->
<tr ng-repeat="user in coursiers">
<!-- <td class="coursierName">nom coursier</td> -->
<td>
{{user.name}}
</td>
<td ng-click="setShift($index+1, monthNum,year, user._id, $event)" ng-repeat="numDay in getTimes(calendar.days) track by $index" ng-class=" isPresent($index, monthNum,year, user._id) == true ?
'present' : isAbsent($index, monthNum,year, user._id) == true ?
'absent' : '' ">
</td>
</tr>
<tr>
<td>Shifts par jour</td>
<td class="shiftsParJourCell" ng-repeat="day in getTimes(calendar.days) track by $index">
<span ng-repeat="shift in shifts">
<span ng-repeat="jour in shift.jours">
{{jour.id ==
getDayOfWeek($parent.$parent.$index, monthNum, year) ? shift.nom : ''}}
</span>
</span>
</td>
</tr>
</table>
After a while, in my case the problem was that I wasn't using directives.
The scopes were having unwanted interactions (still don't know why) but after separing my html in angular directives there are no issues so far.

difficulty getting list of values from series of input elements inside table rows

I'm completely stumped. Granted, in java script i'm like that kid trying to jam a square peg into a round hole.
My high level objective: The admins want the ability to edit text surrounding some text boxes, as well as the ability to add and remove 'paragraph'. The reporters and users want the values that are in the textboxes to be used in comparisons, etc (which is the original functionality).
My Solution: This project uses a pretty messy value - attribute table (called an EAV?), which now has fields with associated fields and is self referencing. I decided to leverage this to minimize changes to the database, so the admin essentially creates a string, denotes the places a text box belongs using '{}', and assigns a name to the attribute into text boxes that appear directly below the paragraph.
My Problem: Textboxes generate fine, as soon as the admin stops typing the "{}" count is checked client side, and the correct number of textboxes are added/removed in rows below. However, when the "change" mode (and thereby save the new string) I also want to save the attribute names they selected. I can't seem to get the actual value out of the input. The java script below sends null to elementList. Closer inspection indicates that var fieldNames is getting two elements of "undefined" so it makes sense that I'm getting null. Its also apparent that Its hitting something, becuase the number aligns with there being two 'nameField' rows.
DOM (Hemed down to the essentials)
<tr data-editMode="TextMode" data-ordinal="0">
....
<td>
<a class="changeMode">
<tr class="nameField">
<td colspan='4'>
<input type="text" value="Testing">
<tr class="nameField">
....
Javascript
function getAssociatedTr(row) {
var associatedRows = [];
associatedRows.push(row);
row = row.next('tr');
var hasAnother = true;
while (hasAnother == true) {
if (row != null && row.hasClass("nameField")) {
associatedRows.push(row);
row = row.next('tr');
} else {
hasAnother = false;
}
}
return associatedRows;
}
$(".changeMode").live("click", function () {
var options = $(this).data("options");
var theRow = $(this).closest('tr');
var rows = getAssociatedTr(theRow);
var fieldNames = new Array();
rows.splice(0, 1);
for (var index = 0; index < rows.length; index++) {
{
fieldNames.push(rows[index].next('.nameField').val());
}
}
$(".modal-header", c.rowsModal).html("<h3>Changing edit mode" + options.table + "</h3>");
c.rowsModal.modal("show");
$.ajax({
type: "POST",
traditional: true,
data: { "Name": options.table, "Ordinal": options.row, "EditMode": options.editMode, "ElementNames": fieldNames },
url: "/contracts/changeeditmode/" + c.id.val(),
success: function (data) {
theRow.replaceWith(data);
$.validator.unobtrusive.parse("#supplementForm");
c.rowsModal.modal("hide");
for (j = rows.length - 1 ; j >= 0; j--) {
rows[j].remove();
}
}
});
});
Server side
public ActionResult ChangeEditMode(long id, AddTrackedRowViewModel model,
string editMode, List<string> elementNames)
{
}
As a side note, I'm open to constructive criticism on the JavaScript.
EDIT
I have updated the line to
fieldNames.push(rows[index].nextAll('input').first().val());
But still getting undefined.
SOLUTION
fieldNames.push(rows[index].find("input[type=text]").val());
In this line:
fieldNames.push(rows[index].next('.nameField').val());
you are using the selector ".nameField", but this get a "tr" element, if you want the textbox you need this:
fieldNames.push(rows[index].next('.valid').val());
or using other selector that give you the textbox.

Categories