CodeProject Latest postings for JavaScript

toLocaleString() works to insert commas in a asp.net textbox until I enter the eighth digit. The eight digit breaks the insertion of commas

fig0000 — Sat, 06 Jul 2024 22:10:00 GMT

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

Can we use the NuGet package of .Net in WebDriverIO (JavaScript) framework?

Anand Sabley — Fri, 21 Jun 2024 06:44:00 GMT

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".

Progressbar has a value of 100% before upload progress is finished

Red Kipling — Tue, 04 Jun 2024 19:34:00 GMT

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

JavaScript

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);
}

Progressbar get only the size of first input

Red Kipling — Sun, 02 Jun 2024 10:43:00 GMT

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

CSS

#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

JavaScript

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

PHP

<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']){ ?>
                    <!-- verification 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 } ?>


                <!-- files upload  -->
                <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

JqxTree control is taking time to load with 500 records

yadta — Wed, 07 Feb 2024 05:57:00 GMT

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

passing 0 to a function

mike7411 — Fri, 12 Jan 2024 12:53:00 GMT

Does anyone know what happens if you pass 0 to this function?

https://pbs.twimg.com/media/GDh5G70XcAAyqTv?format=jpg&name=small

Thank you.

How to Reference a local image file to display it

Tom Mort — Sun, 31 Dec 2023 18:00:00 GMT

I have a project that is to involve opening several image files onto the same place on the screen to overlay or not overlay them. I know nothing about java script, but someone gave me a sample script that sort of does what I'm trying to do.

In that script the files are all located on the web and it references the html links for them. I'd like to be easily shareable and not really have to rely on the images being hosted somewhere. I thought I could include the image files and along with the script all in one folder so they't all be installed in the same place. I tried the full path to that place and it doesn't seem to work.

I wish I knew more terminology, etc but like I said I really have know knowledge of javascript.

So that is the first part of my project.

I see that I can specify where on the screen to place the object and size.

The second part will be to add controls for pan and zoom for the section of the screen where the images will be displayed.

But, for now I simply want to see how to display a local file.

Thanks.

drop down list and submit button

prasad penkey — Mon, 04 Dec 2023 13:33:00 GMT

how to set drop down down list and submit button in JavaScript

dropdown

prasad penkey — Mon, 04 Dec 2023 12:39:00 GMT

dropdown list and submit button

javascript alert() not showing

Ashish Tiwari Aug2023 — Sun, 03 Dec 2023 17:00:00 GMT

alert() not show

Inserting HTML from a fetch gives me extra blank rows..?

William Morris 2021 — Wed, 25 Oct 2023 04:58:00 GMT

Making a fetch call and getting html back, like so:

HTML

<tr>
	<td class="heading">JGServices</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="99.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">ShippingHandling</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="25.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">District</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="123.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">Penalty</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="250.00" onfocus="this.blur()">
	</td>
<tr>

...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:

JavaScript

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;

...and...

JavaScript

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);

And in both cases, the browser renders it like this:

HTML

<tr>
	<td class="heading">JGServices</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="99.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">ShippingHandling</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="25.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">District</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="123.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">Penalty</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="250.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>

I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?

- Bill

Measure with a micrometer. Mark with a crayon. Cut with an ax.

Inserting HTML from a fetch gives me extra blank rows..?

William Morris 2021 — Tue, 24 Oct 2023 18:31:00 GMT

Making a fetch call and getting html back, like so:

HTML

<tr>
	<td class="heading">JGServices</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="99.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">ShippingHandling</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="25.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">District</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="123.00" onfocus="this.blur()">
	</td>
<tr>
<tr>
	<td class="heading">Penalty</td>
	<td class="numeric-amount">
		<input type="text" size=10 value="250.00" onfocus="this.blur()">
	</td>
<tr>

...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:

JavaScript

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;

...and...

JavaScript

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);

And in both cases, the browser renders it like this:

HTML

<tr>
	<td class="heading">JGServices</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="99.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">ShippingHandling</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="25.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">District</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="123.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>
<tr>
	<td class="heading">Penalty</td>
	<td class="numeric-amount">
		<input type="text" size="10" value="250.00" onfocus="this.blur()">
	</td>
</tr>
<tr></tr>

I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?

- Bill

Measure with a micrometer. Mark with a crayon. Cut with an ax.

Moving a <div> from right edge of screen to left slowly?

Blake McKenna — Thu, 28 Sep 2023 03:51:00 GMT

I have been racking my brain trying to figure this out. All I want to do is have a

element come from the right edge of screen into the center of the screen slowly. I'm trying to use the "transition" method via javascript and I'm just lost. I want this to happen as soon as a click on a button control. Please help!!!

Thanks!

Jasmine - monitor all calls of a method?

NoMoreStackOverflow — Fri, 22 Sep 2023 10:25:00 GMT

Dear all,

I'm currently dealing with unit tests using Jasmine/KarmaRunner.
I'm wondering whether it is possible, that I can be shure,
that a tested method does not make other calls than the monitored.

I'v learned so far, how I can check the count, arguments and order
of calls from the tested method, which I expect.
But what if someone inserts a new line into the tested method,
that is unknown in the test und does "strange other things"...

Is there something like "Jasmine.allCalls( object, 'method')...?

Thx in advance and best regards!

Please stay objective and friendly

Mutation Observer, editing a value

jkirkerx — Tue, 15 Aug 2023 21:49:00 GMT

I wrote a function, where one can update an invoice. So the user clicks edit, the modal pops up, they change the price, and the function calls an API, updates the database, and processes the returned data.

Then it calls a function within, that changes the invoice price on the page, and creates a mutation observer to detect the price change, and tallies up the invoice cost, and changes the total at the bottom.

The purpose of this mutation observer, is to wait for the DOM to update the cost, and when the DOM signals it's been done, then go back to the DOM and tally up the cost, and change the total cost span element value.

Everything works, but it only works if you do this twice. Like if I edit using the modal, submit, the observer doesn't fire. but if I edit the invoice again, then it works.

Should I call my function within my function again?
Or am I missing something here, and need to redesign the whole thing.

I'm reluctant to post any code, because the function is huge, I'll post the basics here.

I'd hate to have to split code up here, but might have to. move the mutation observer outside the posted function, to inside the API function call.

I want to do this the correct way, so it doesn't come back on me and works every time.

Calling function

function callApi() {

   Prepare to send data

   fetch {
     .then(data => {
        process data
        call the function below
  }
}

The function called after fetch, I can target the entire invoice within the DIV, but I targeted the single span element that contains the cost.

export function updateAnyTypeInvoiceInvoiceRecordMutationObservable(classCode, catalogId, invRecordId, jsonData, data) {

       Javascript that changes the invoice values

        const observer = new MutationObserver(mutationsList => {
            for (const mutation of mutationsList) {

                // Text content within one of the observed nodes has changed
                // You can respond to the change here
                console.log('Text content has changed:', mutation.target.textContent);

                Code that adds up all the invoice cost, and changes the total at the bottom

                // get a list of unprocessed mutations
                // should be called before disconnecting,
                // if you care about possibly unhandled recent mutations
                let mutationRecords = observer.takeRecords();
                console.log(mutationRecords);

                // After a reasonable time, disconnect the observer even if the element wasn't found
                observer.disconnect();

            }
        });

        // Specify the options for the observer
        const config = { childList: true, subtree: true, characterData: true };
        const targetNode = document.getElementById('invInvoiceAmount_' + classCode + '_' + invRecordId);<br />
        observer.observe(targetNode, config);

        Perhaps, call this function again here?

    } catch (error) {
        console.log('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error', error);
        alert('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error: ' + error);
    }
}

If it ain't broke don't fix it
Discover my world at jkirkerx.com

[Learning/Beginner] Confused about await, async and fetch.

Maximilien — Tue, 02 May 2023 13:09:00 GMT

Still learning.

I'm using the SWAPI - The Star Wars API for my test data.

I can fetch the data from https://swapi.dev/api/people (no problem)

But I'd like to be able to iterate over the films array to fetch each movie name.

I'm not sure what the syntax I should use, or if it is the proper way to do it.

the getFilmName function returns

[object Promise]

I tried adding an await before the call to getFilmName and give does not "compile" :

const filmName = await getFilmName(filmURL);

Thanks.

async function getFilmName(url) {
  const res = await fetch(url);
  const data = await res.json();
  return data.title;
}

async function getPeople() {
  console.log("fetchNames");
  // get list of people.
  const url = "<a href="https://swapi.dev/api/people">https://swapi.dev/api/people</a>";
  const res = await fetch(url);
  const data = await res.json();

  console.log(data);

  const results = data.results;

  // loop all people
  results.map((person) => {
    console.log(<code>${person.name} stars in :</code>);
    // loop all films for each person
    person.films.map((filmURL) => {
      console.log(filmURL);
      const filmName = getFilmName(filmURL);
      console.log(<code>filmName: ${filmName}</code>);
    });
  });
}

getPeople();

Thanks.

CI/CD = Continuous Impediment/Continuous Despair

Axios

darlina — Tue, 02 May 2023 08:47:00 GMT

I'm trying to show progrees bar while uploading a file using axios, according to this youtube channel : OpenJavaScript("Axios upload progress with progress bar tutorial"). If I use 'https://httpbin.org/post' for the axios post parameter it run well, but if I change to my destination folder (D:\laragon-portable\www\cv\public\uploads) it result with error 'POST http://localhost:8080/uploads 404 (Not Found)', I tried 'http://localhost:8080' and 'http://localhost:8080/uploads'(I use local development server in CodeIgniter 4), but it error too,....what should I write for the url ?

json and json-server with weird be valid json file.

Maximilien — Fri, 21 Apr 2023 12:17:00 GMT

(not sure where to ask this).

Still learning...not for work.

I have a valid json (geojson) file like this : (reduced for visibility, original : Murales subventionnées - Site web des données ouvertes de la Ville de Montréal )
it's a list of features but the id is in a sub field of the feature.

{
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "annee": "2007"
      },
      "geometry": { "type": "Point", "coordinates": [-73.622218, 45.58041] }
    },
    {
      "type": "Feature",
      "properties": {
        "id": 2,
        "annee": "2007"
      },
      "geometry": { "type": "Point", "coordinates": [-73.558029, 45.506855] }
    }
  ]
}

I can fetch the whole list with the following and it works :

fetch ("http://localhost:4000/features );

I'm trying to use fetch to get a single "feature" from the file:

fetch ("http://localhost:4000/features/1");

But this does not work, it returns nothing.

I tried different format for the fetch URL.

If I move the id property to the root of each item, it works, but I don't want to do that.

Am I missing something ?

Is there anything I can do ?

Thanks.

CI/CD = Continuous Impediment/Continuous Despair

Application is "dead" when I open it in a browser

arnold_w — Fri, 17 Mar 2023 09:23:00 GMT

My colleague, who is on vacation, wrote a Javascript application that I need to port to C#. I know nothing about Javascript so at this point I'm happy if I'm just able to execute it successfully. There is a file called "index.html" and when I open this in Chrome I can see buttons, textboxes, comboboxes, etc but everything is "dead" , nothing happens when I e.g. click a button. Does anybody know how I can bring the application to life? Also, does anybody know if there exist a free IDE where I can edit the source code (it would be a bonus if I can step the code as well)?

Updated information: I installed "Visual Studio Code" and opened the project folder there and when I click "Start Debugging" I see the GUI flashing by quickly and then nothing happens. In the "Terminal" window I see the following:
"npm run start
Debugger attached.

> firmwareprogrammer@1.0.0 start
> electron .

Debugger attached.

Main process started
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect..."

Updated information again: I'm now able to step the code in "Visual Studio Code" and when the following function is executed, the GUI-windows are showing (but they are all white), but as soon as the function is finished executing the GUI-windows disappear:

JavaScript

function createWindow () {
  mainWin = new BrowserWindow({
    width: 1100,
    height: 870,
    minWidth: 1100,
    maxWidth: 1100,
    minHeight: 870,
    maxHeight: 870,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
//      preload: path.join(__dirname, "preload.js")
    }
  })

//  mainWin.removeMenu();
//  win.loadFile('index.html')
//require("@electron/remote/main").enable(win.webContents);
//mainWin.webContents.openDevTools()
devtools = new BrowserWindow();
mainWin.webContents.setDevToolsWebContents(devtools.webContents)
mainWin.webContents.openDevTools({ mode: 'detach' })
  
mainWin.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
  }))
  mainWin.webContents.openDevTools()
  mainWin.on('close', () => {
    mainWin = null;
  })
}

Javascript Form Validation - Help needed

Kobraz — Sat, 11 Mar 2023 23:43:00 GMT

I'm studying Front-End Development and I try to Validate this form: https://rfh-js1.netlify.app/contact.html

The validation script is: https://rfh-js1.netlify.app/js/validation.js

I have tried to set 4 global variables (value = 0) first on validation.js, then Im doing the validation in 4 separate functions and set the variable to 1 if validation rules is succsessful and 0 if they fail.

Then after validation I sum the values of these global variables and set the submit-button to display if sum = 4 else display="none"

but logging the global variable in console.log only give me 0…