How do I stop a JavaScript file from downloading twice in JavaScript? - javascript

I have two user controls and both the user controls refer a same script path:
<script type="text/javascript" src="test.js"></script>
then what happens when the first user controls load then test.js will download in client and when second user control loads then test.js file will download again.
How do I check to see if the JavaScript file is already downloaded so it doesn't have to be downloaded again?
If I include the JavaScript file from the server side:
Page.ClientScript.RegisterClientScriptInclude("test",
Page.ClientScript.GetWebResourceUrl(this.GetType(),
"test.js"));
then how could I make sure it isn't included twice?

If the path is exactly the same, the client's browser should realize it already downloaded the file and not download it twice anyway. Can you confirm that the browser is indeed downloading it twice? If so, which browser(s)? Also check the browser cache settings.

Related

Beginner Question - How do I get my JS code to show on a browser?

I'm using VS code as my code editor (not sure if it's relevant). My first project is on Changing Background Color. Once I'm done writing my codes, how do I get them to show on a browser?
I'm not sure how to get it to show on a browser.
You want see your code in browser you will open live server of the code docoument -
open a HTML file and right-click on the editor and click on Open with Live Server .
or just type this url in browser
http://127.0.0.1:5500/
5500 is a default port
or just install an extensions live server it will directly open the browser.
The best way in my opnion to execute JavaScript in your browser is to put it inside a script element inside an HTML document.
I mean that in the same folder that you have the js file, create an html file and in there put the script link of the file.
<script src="script.js" defer></script>
This need to be in the <head></head>
hi in vscode download live server then click html file with right click and open with browser

JavaScript path doesn't load on Live Server extension (VS Code)

HTML and CSS files are working perfectly on my live server. But every time I lead to a .js script it will not be shown on my live server. If I try to load the .js file directly through the URL it shows "Cannot GET /line.js". I already tried out everything I've found on the internet but it's still not working. Here are the points I checked/did:
Installed Code Runner
Installed Node.js = node.js system path done
Settings = Live Server Config = specified browser
"liveServer.settings.CustomBrowser": "chrome" on JSON settings
.js file is in a separate folder and accessed via <script src="line.js"></script> on index.html
Chrome is set as default browser on my system
Thanks for your inputs.
If the js file is in a separate folder, you need to provide the exact route to the folder in the script tag, since in the current form it is trying to find the js file in the root directory. The script tag should look like this:
<script src="FOLDER_NAME/line.js"></script>
It's possible that your javascript file is being loaded before the HTML page is rendered. You can try adding "defer" to your script tag like this:
<script src="demo_defer.js" defer></script>

Can't load javascript file in localhost using xampp

I am new at web development and I want to upload a main.js scrip in my PHP file but it gives me this error
I used a script tag to upload the js file like this:-
<script type="text/javascript" src="../assets/js/main.js"></script>
This could be due to many things:
Check ad/script blocker
Check if the browser can load it from the view page source option
Try pasting it before all scripts call it could be due to some functions in previous scripts, I faced this issue before.
This might help.

Js - Cache file, open it, detect changes and upload

I have a file structure on a web page, and look for a solution for the following scenario:
The chosen file should be downloaded in browser cache and opened (if it's an excel document, open with excel, etc.).
Now when the user changes the file, it should be detected and the file should be uploaded again.
Is this even possible with JavaScript?
If yes, where do I store the file (temporary internet folder?) and how do I detect the changes?
The only way for this to work you would need to have the user select the downloaded file, and then check for modification.
HTML
<label for="excelFile">Select the excel file: </label><input type="file" id="excelFile" />
JS
//Change event to detect when the user has selected a file
document.querySelector("#excelFile").addEventListener("change",function(e){
//get the selected file
var file = this.files[0];
//get the last modified date
var lastModified = file.lastModified;
//check lastModified against stored lastModified
//this assumes you store the last mod in localStorage
if(localStorage['excelLastMod'] < lastModified){
//It has modified update last mod
localStorage['excelLastMod'] = lastModified;
//do upload
}
});
If you know your user is using Chrome you can use Chrome's FileSystem api
The way you describe it: No, that is not possible in JavaScript.
It sounds like you want an FTP client.
When the user changes the file, it should be detected and the file should be uploaded again.
That is not possible due to JS having almost no access to the file system.
The only way you can access a file at all is by requesting the user to select one, see:
How to open a local disk file with Javascript?
So the most you could do would be:
File is downloaded.
Based on browser & settings, file may be opened automatically, or not.
User is presented with a file selection dialog that they can use when they are done editing.
Compare selected file to file on server and upload if changed.
After downloading a file, you have no control over it.
For applications that have a protocol registered (such a steam://, for example), you might be able to request the URL being opened in a program, but that would require an if per file type/program.
Detecting file changes is not at all possible (because you have no access to the file), and uploading again requires the user to select the file manually, using a file dialog.
Thanks for your help and ideas. I saw a software (https://www.group-office.com/) which includes this function so there has to be way to do it.
New Idea, using chrome filesystem api (#Siguza already said it):
Create file from servers database on users local filesystem with filesystem api
open file locally (should work with filesystem:http://www.example.com/persistent/info.txt, or?)
poll last changes of file every x seconds
if change detected, upload file back to servers database
I saw some problems with excel locking the files Check if file has changed using HTML5 File API
but except of that this should work, shouldn't it?

How do I execute some javascript after a file is downloaded?

I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:
$('#TerritoriesToExcelLink').click(function() {
$('#TerritoriesToExcelLoading').show();
window.location.href = $(this).attr('href');
});
I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.
I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.
How can I hide the loading message once the file has been completely downloaded?
Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.
If you aren't opposed to using flash...
You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.
This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.
I don't think tracking the progress can be done with server side languages either.

Categories