|
Hi,
I am not the best at Javascript but have been using it more to avoid web forms postbacks at my users requests. The user also requested commas inserted in an numeric field (no decimal digits) as they type. I used toLocaleString(). The insertion of commas works fine until I get to the eighth digit. At that point the number shrinks in size and goes back to four digits, There is a valid comma in this but obviously I need to be able to put in more than 7 digitis.
Here is the seven digit state of the field:
1,234,567
And here is the field when I add the number 8 to the end of the above number:
1,234
The following code fired from on the onkeyup event handles this number:
var word = txtbox.value;
word = word.replace(“,”, “”);
let num = word;
formatted = parseInt(String(num)).toLocaleString();
txtbox.value = formatted;
I have also tried functions i found on web posts and regex values. Some cases didnt work at atll but many of the cases involving regex also seemed to break once the eighth digit is entered. Oddly all the examples I’ve seen on the web seem to involve no more than seven digits.
I tried adding “en-us” to the toLocaleString() as well as setting maxiumnsignificantdigits to 9. The result was the same.
8 seems to be a magic number and the solution is probably buried in some obscure documentation somewhere.
Any help would be appreciated.
Neil
|
|
|
|
|
If you pass a string to the replace method, only the first match will be replaced:
A string pattern will only be replaced once. To perform a global search and replace, use a regular expression with the g flag, or use replaceAll()[^] instead.
Given the input "1,234,567", after the replace(",", "") call, the value will be "1234,567".
Passing that to parseInt will stop at the first non-numeric character, so the result will be 1234.
Thus you need to replace:
word = word.replace(",", ""); with either:
word = word.replace(/,/g, ""); or:
word = word.replaceAll(",", ""); Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thank you so much for the reply. It seems obvious now that I see it but you don't always see that there can be variations of functions until you accidently run into them.
Sorry to pile on another question. This one is weirder as far as I can see. I don't know how many digits I may need so I tried putting in more than 8. I kept going past the eighth digit which worked using your fix. I kept going and got to
12,345,678,901 . Oddly when I added a "2" after this numg34 the "2" was simply ignored and did not appear in the text box at all. I did try doing some alerts but it seems that this last digit is not showing up as a typed key in the textbox, almost as if it is being ignored. Am I still missing some details or is there some further issue I'm not aware of.
Thanks,
Neil
|
|
|
|
|
That's odd - on the demo link I posted[^], I can get up to 1,234,567,890,123,456 without any issues.
It then won't recognise any odd numbers; if I type an 7, it becomes an 8. There's an exhaustive explanation as to why on this StackOverflow thread[^].
Anything I type beyond that gets appended as 0. That's because the parsed number exceeds Number.MAX_SAFE_INTEGER (9,007,199,254,740,991), so anything larger will have its least-significant digits truncated.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Mr. Deeming,
I saw your experiments using very large numbers and the weird behavior with negative numbers and, as you said, eventual replacement of numbers with zeros. I will read the JS documentation you gave me. I will ask however it you found that this JS documentation helped you solve the problem or if a mystery to you and you have no fix for it. I ask because I am considering not using tolocalstring and all that and simply using brute force parsing of the number as it is typed (e.g. dividing the number of digits by three and using that to place the commas in through parsing code and not to local string). I hesitate to do this but it may be my only answer. Just let me know if, as it seems from your post, that you have been unable to solve the problem of weird behavior adding a high number of digits.
You also describe a demo you set up to test this; is it possible for you to post it. Due to the high number of digits you were able to use, that may be enough for me to handle this cases I have in my code (I believe it don't need to use more than 12 digits which is far smaller than the example you showed us that worked. Thanks again for all your help.
Neil
|
|
|
|
|
fig0000 wrote: You also describe a demo you set up to test this; is it possible for you to post it.
I've already posted the link twice - here it is a third time for luck:
Demo[^]
NB: If you need to support more digits than a JavaScript number can safely represent, then you've got two options: switch to using BigInt[^], or manually parse and format the number yourself.
Here's a demo using BigInt:
Demo[^]
const formatNumber = () => {
const word = txtbox.value.replaceAll(",", "");
const number = BigInt(word);
const formatted = number.toLocaleString();
txtbox.value = formatted;
}; That doesn't suffer from the same problems as the original, since BigInt can support obscenely large numbers.
Formatting the number manually is not quite as simple, but it can be done:
Demo[^]
const formatNumber = () => {
const word = txtbox.value.replace(/[^0-9]/g, "");
const chars = word.split("").reverse();
for (let index = 3; index < chars.length; index += 4) {
chars.splice(index, 0, ",");
}
txtbox.value = chars.reverse().join("");
};
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks for handling this reply. Just a couple notes to help make the magic happen. parseInt should always have the second radix param specified. Otherwise, it'll attempt to guess it and not always possible to guess octal vs decimal, etc.
It's still safer to use replace over replaceAll. Edge support is only a few years old, for instance. Adoption just be a slow thing.
No need to convert the input to a string for parseInt. It's already a string. Check the fiddle below for proof.
Annnnnnnnnnd, JS now has a data type called BigInt. Which won't help for floating points / money type inputs. But if you're looking to do this with a much larger integer... Behold!
Edit: Awww crap, I just read your BigInt post. Never mind. 
Jeremy Falcon
modified 18-Jul-24 11:04am.
|
|
|
|
|
Your original question said (my emphasis):Could that be related to why you have issues putting in more than
fig0000 wrote: I tried adding “en-us” to the toLocaleString() as well as setting maxiumnsignificantdigits to 9
Could that be related to why you have issues putting in more than 8?
|
|
|
|
|
Thank you for replying. This inability to put 8 digits in has already been spotted by Mr. Deeming. With my lack of experience with Javascript I didn't realize that I needed to use "replaceall" instead of replace. To use tolocalstring I have to clear all the commas out of the field as I add new digits. I was using replace which only replaces the first comma meaning the other commma stays in field and the code rejects that comma and all the digits after it truncating the number when tolocatstring is used to fill the field.
The new issue can be seen above from Mr. Demming which has to do with other issues. While we can get farther along he found that there is a point where negative digits are ignored and I've found some other issues. He suggested that I read a web page describing this problem but it's not clear that I can make it work as it is. I may have to write code that does not use tolocalstring and do brute force slicing and dicing to put the commas in the right place. I will look at his information and see what I have to do.
|
|
|
|
|
fig0000 wrote: While we can get farther along he found that there is a point where negative digits are ignored and I've found some other issues.
Keeping in mind that that is not a 'javascript' issue but rather a computer issue. Most languages, for performance reasons, have limits on the support for native numeric values. All numeric values.
The posted article explains the specifics for javascript but that is going to apply to other languages with some variation.
As noted there is a specific solution BigInt. That is slower, probably significantly, in general numeric processing and there will also be other issues such as storing it, for example to a database. Other languages will likely also have a solution like that and they will have the same limitations.
|
|
|
|
|
In the end it DID turn out to be a JavaScript issue. Last week someone pointed out that I was using replace instead of replace all which I missed not knowing much JaxaScript. This caused only the first comma to be replaced by a blank and second comma was left as a comma. When that string was put into tolocalestring there was a comma left and to locale string received at least one comma which made it fail. Once I used replaceall everything worked fine and I was able to type up to 12 digits with commas inserted correctly.
|
|
|
|
|
I am migrating the API tests from C# .Net framework to the JavaScript based WebDriverIO framework. Some of the APIs need support of .Net libraries and developers have created private NuGet Package of it. I am not able to use this NuGet Package in my JavaScript based framework. I am using VS Code for scripting and I tried to add the NuGet package using NuGet Gallery Extensions feature of VD Code. But I am getting error "Failed to fetch the packages: searched URL could not be found".
|
|
|
|
|
I upload a files in my website
I have this javascript code integrated to show the progress of upload
But the issue is that this bar has value of 100% before the upload is completed
How can i resolve this
function uploadFile() {
const fileInput = document.getElementById('file1');
const file = fileInput.files[0];
const xhr = new XMLHttpRequest();
xhr.open('POST', 'index.php', true);
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
const progress = document.getElementById('progress');
progress.style.width = percentComplete + '%';
progress.textContent = Math.round(percentComplete) + '%';
}
};
xhr.onload = function () {
if (xhr.status === 200) {
alert('File uploaded successfully.');
} else {
alert('Error uploading file.');
}
};
const formData = new FormData();
formData.append('file1', file);
xhr.send(formData);
}
|
|
|
|
|
My best guess is that event.loaded and event.total are integers, not floating point numbers as you expect, so it's performing integer math.
The difficult we do right away...
...the impossible takes slightly longer.
|
|
|
|
|
Except that JavaScript doesn't really have a concept of "integers", unless you use the BigInt class. 
Number: used for all number values (integer and floating point) except for very big integers.
BigInt: used for arbitrarily large integers.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Red Kipling wrote: const percentComplete = (event.loaded / event.total) * 100;
You might try the following. Mathematically it is the same but the order of operations changes how it computes the result.
const percentComplete = ((event.loaded * 100) / event.total);
|
|
|
|
|
Red Kipling wrote: upload a files in my website
I have this javascript code integrated to show the progress of upload
But the issue is that this bar has value of 100% before the upload is completed
How can i resolve this
See what happens if you replace this code:
xhr.upload.onprogress = function (event) {
};...with this
xhr.upload.addEventListener("progress", function (event) {
});Although your code is correct, try using the addEventListener method to see if that makes any difference. I believe that event listeners need to be assigned before the xhr's "open" method is called.
|
|
|
|
|
I have to add progressbar to kleeja upload script
I have a three inputs wich contain the files to upload
this is the css code for progressbar
#progress-bar {
width: 100%;
background-color: #f3f3f3;
}
#progress {
width: 0%;
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
}
and this is the javascript code
function uploadFile() {
const fileInput = document.getElementById('file1');
const fileInput2 = document.getElementById('file2');
const file = fileInput.files[0];
const file2 = fileInput2.files[1];
const xhr = new XMLHttpRequest();
xhr.open('POST', '/index.php', true);
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
const progress = document.getElementById('progress');
progress.style.width = percentComplete + '%';
progress.textContent = Math.round(percentComplete) + '%';
}
};
xhr.onload = function () {
if (xhr.status === 200) {
alert('File uploaded successfully.');
} else {
alert('Error uploading file.');
}
};
const formData = new FormData();
formData.append('file1,file2', file);
xhr.send(formData);
}
i save this file in folder 'progressbar'
this is the form to submit for uploading
<pre> <form id="uploader" action="<?=$this->vars['action']?>" method="post" enctype="multipart/form-data">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#fileUpload" role="tab"><?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?></a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<?php if($this->vars['config']['safe_code']){ ?>
<!--
<div class="safe_code card">
<div class="card-body">
<h4 class="card-title"><?=$this->vars['lang']['VERTY_CODE'] ?? '{lang.VERTY_CODE}'?></h4>
<h6 class="card-subtitle mb-2 text-muted"><?=$this->vars['lang']['NOTE_CODE'] ?? '{lang.NOTE_CODE}'?></h6>
<p class="card-text">
<img style="vertical-align:middle;" id="kleeja_img_captcha" src="<?=$this->vars['captcha_file_path']?>" alt="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" title="<?=$this->vars['lang']['REFRESH_CAPTCHA'] ?? '{lang.REFRESH_CAPTCHA}'?>" onclick="javascript:update_kleeja_captcha('<?=$this->vars['captcha_file_path']?>', 'kleeja_code_answer');" />
<input type="text" name="kleeja_code_answer" id="kleeja_code_answer" />
</p>
</div>
</div>
<?php } ?>
<!--
<div class="tab-pane active" id="fileUpload" role="tabpanel">
<?php foreach($this->vars["FILES_NUM_LOOP"] as $key=>$value){ ?>
<div class="input-group mb-2" style="" id="file-block-<?=$value['i']?>" onclick="document.getElementById('file<?=$value['i']?>').click();">
<div class="btn btn-primary file-button-browse">
<img src="<?=$this->vars['STYLE_PATH']?>images/folder.png" width="20" height="20">
<?=$this->vars['lang']['OPEN'] ?? '{lang.OPEN}'?>
</div>
<input type="file" class="example" name="file_<?=$value['i']?>_" id="file<?=$value['i']?>" data-number="<?=$value['i']?>" style="display:none" >
<input type="text" id="file-text<?=$value['i']?>" disabled="disabled" placeholder="<?=$this->vars['lang']['NO_FILE_SELECTED'] ?? '{lang.NO_FILE_SELECTED}'?>" class="form-control">
</div>
<?php
} ?>
<div>
<br>
<div class="agree text-muted"><small><?=$this->vars['terms_msg']?></small></div>
<input type="submit" id="submitr" onclick="uploadFile()" name="submitr" value="<?=$this->vars['lang']['DOWNLOAD_F'] ?? '{lang.DOWNLOAD_F}'?>" class="btn btn-outline-primary">
</div>
</div>
</div>
</div>
<script src="progressbar/progress.js"></script>
</form>
how can i modify the codes to make the progressbar show the three files upload progress
Thanks a lot
|
|
|
|
|
It is taking around 3-4 seconds to load 500 records which is very slow as it is hampering my app performance.
var source = { datatype: "json",
datafields: [ { name: "Rid", type: "int" },
{ name: "ParentRid", type: "int" },
{ name: "Name", type: "string" },
{ name: "Text", type: "string" } ],
id : "Rid",
localdata : dataSource,
async: true,
hasThreeStates: false };
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy("Rid", "ParentRid", "items", [{ name: "Text", map: "label" }, { name: "Rid", map: "value" }, { name: "Name", map: "Name" }]);
$("#jqxtree").jqxTree({ checkboxes: true, source: records, width: '100%', height: 220 });
I want to load 'JqxTree' control in such a way that other things won't wait for it to load. Is there any way in the jQuery to load 'JqxTree' control in the background?
Or something we can do which won't affect performance of whole application
|
|
|
|
|
The obvious question is why are you trying to load 500 records into a tree? Are your users really going to dig through that many tree nodes to find the one they want? Surely there must be a better way to help them find what they're looking for?
Beyond that, you need to profile your code to find out where the bottleneck is. If it really is the call to the jqxTree method, then the problem is likely the browser struggling to handle DOM updates, and there will be nothing you can do to improve that. You would need support from the authors of the library, which means waiting for them to reply to your GitHub issue[^].
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: why are you trying to load 500 records into a tree?
Good question.
I have seen others try to load 3,000 and even 300,000. First one is when I learned years ago as a backend developer to never write queries that do not have a paging limit. At least that way if the front end tries to load everything it won't blow up my code.
|
|
|
|
|
Thank you for the information.
|
|
|
|
|
|
Why not run it for yourself and find out?
Since none of the cases match 0, none of the return statements will execute. The return value of the function will be undefined.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
C++, Java and now Javscript. Maybe you should focus on one language and learn it completely before moving to the next one. Especially as the code in the above question would behave exactly the same (including doing nothing for zero) in all three.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
