How can I clear the cache after updating the Server - javascript

I have developed an app, but when I push the latest version from the app to the Server, the CSS and JS files are not updated. The old files are showing. How can I clear the cache after updating the files?
EDITED like jcubic
Now I use the buster in this way.
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIS</title>
<script src="index.php"></script>
<link rel="stylesheet" href="<?= with_hash('style.css') ?>">
</head>
index.php:
<php?
function with_hash($url) {
return $url . "?" . md5(file_get_contents($url));
}
?>
Error message:
Refused to apply style from 'http://127.0.0.1:5500/%3C?=%20with_hash(%27style.css%27)%20?%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

You can use what's called cache buster. Add a unique ID to the URL of the JS and CSS in your application. I personally use the hash of the content of the file, you can get it you write the HTML file in PHP or any other server-side script, but PHP, if you have a single HTML file, is the easiest.
In PHP it can look like this:
<php?
function with_hash($url) {
return $url . "?" . md5(file_get_contents($url));
}
?><!DOCTYPE HTML>
...
<link rel="stylesheet" href="<?= with_hash('produktion.css') ?>">
If the application is for static hosting like Netlify you will need to generate an HTML file with the hash. You can easily do that with Webpack.

Related

How do I source javascript file on android?

This is my html and javascript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id = 'test' onclick= "switchtest()">Hello world</p>
<script src = 'phonetest.js'></script>
</body>
</html>
function switchtest(){
document.getElementById('test').innerHTML = 'Goodbye'
}
It works on visual studio code live server, but when I transfer these 2 files to my phone and open it on chrome there, the onclick function stops working. It only works if function is in the same html file. The path to my html file is "/Internal storage/TestCode/phonetest.html" and the path to my javascript file is "/Internal storage/TestCode/phonetest.js"
I read that I might need to specify file location or that I may need a xml file, but I am not sure what I must do exactly. Does anyone know a fix?

snipcart error: public API key not found. Attribute data-api-key must be set on #snipcart tag

I am having trouble loading snipcart correctly, it picks up the api key on localhost and shows the number of items in cart however when deployed to netlify, it will briefly flash up the number of items in cart when the page is loaded indicating that the api key is correct however it then comes up with the error
public API key not found. Attribute data-api-key must be set on #snipcart tag.
I am using react to render it, and have taken it down to the minimal boilerplate to see if anything in react could be causing this but I still have the same problem.
moving <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> to app.js file and it works, but in index.html it doesn't work
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href ="https://fonts.googleapis.com/css2?family=Open+Sans&family=Lexend+Zetta&family=Poppins:wght#400;500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
</head>
<body>
<div id="root"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
<script src="./index.tsx"></script>
</body>
</html>
Putting this in your html doesnt work since the {{API_KEY}} is I assume from your framework. Since the html code is not compiled using your framework, it doesnt do anything with the <div hidden id="snipcart" data-api-key={{ API_KEY }}> tag.
To make this work, put your api key instead of the {{API_KEY}} variable.
Cheers,
Lea from Snipcart

How to connect CSS and JS to HTML which is sent by Dart HttpServer?

I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.

My returned HTML from a webapi, that has CSS and Javascript, doesn't work

I'm following this code How to return html page from WebApi action?
I do get back HTML, because the result is a partially rendered HTML page, but the references to the CSS and JavaScript are ignored, resulting in a very basic and non-operating webpage.
I copied the code into Brackets to confirm that all of the indenting is correct. And if I copy the contents to a .HTML file and render that, the CSS and JavaScript run properly.
This suggests that the problem is unrelated to the generated HTML, but something else. I just don't know what. The generated code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel='stylesheet' href='http://example.com/src/rr4h.css'>
<link rel="shortcut icon" href="http://example.com/images/favicon2.png" type="image/x-icon">
</head>
<body>
...
<script src='http://example.com/src/rr4h.js'>
</script>
...
</body>
</html>
I am not sure where to look. The WebApi is "https" but the referenced files are "http" ... Could this be some sort of IIS or browser related security issue? Something else?
If you have https and http you may have mixed content problem this blocks http content, sure.
Try using relative urls in your code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel='stylesheet' href='/src/rr4h.css'>
<link rel="shortcut icon" href="/images/favicon2.png" type="image/x-icon">
</head>
<body>
...
<script src='/src/rr4h.js'>
</script>
...
</body>
</html>
As indicated by one of my comments, the issue is HTTPS vs. HTTP. To get around this problem, I created a PHP file to read and display the HTML:
<?PHP
$PARAM = $_GET["p"];
$HTML = file_get_contents('https://example.com?param=' . $PARAM . '&param2=others');
echo $HTML;
?>
That way the PHP doesn't have to be on an SSL certificate and the call is still secured with the https.

JQuery .html method character encoding

I have a similar problem to this: jQuery AJAX Character Encoding but any solution mentioned there works for me.
I've made three easy files to show the problem:
PHP File:
//prueba.php
echo "nº one two € áéíóú";
JavaScript File (I use JQuery)
//Javascript file
function prueba() {
$.ajax({
type: "GET",
contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",
url: "prueba.php",
}).done(function( data ) {
$("#prueba").text(data);
//$("#prueba").html(data); //It does the same encoding error
});
}
** HTML File:**
<html>
<head>
<title>E-COMMERCE</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/javascript.js" type="text/javascript"></script>
</head>
<body>
Prueba
<div id="prueba"></div>
</body>
</html>
And when you click the link Prueba it shows:
Prueba
n� uno dos � �����
The current website works perfectly but it does not use ajax and it is in the same server where i am doing this, so How can I tell to jquery to return ISO-8859-1 instead of whatever it is returning? I know that the ideal is to use always utf-8 but changing to utf-8 it will give us some problems we cant afford right now.
To make the browser use the correct encoding, you have to add an HTTP header to the php page :
header("Content-Type: text/plain; charset=ISO-8859-1");
or you could put the encoding in a meta tag of the html:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
In your php file you'll need to UTF-8 encode the output:
echo utf8_encode("nº one two € áéíóú");
And then in your html file you will need to set the charset:
<html>
<head>
<meta charset="utf-8"/>
...
And for good practice specify a document type as well:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
...
<!DOCTYPE html> is a legit HTML5 doctype.
And as Pranav Kapoor pointed out maybe you will need to specify the PHP-file charset aswell:
header("Content-Type: text/plain; charset=UTF-8");
I can see you have specified your charset to: ISO-8859-1. I always work with UTF-8 You can read more about it here: What is the difference between UTF-8 and ISO-8859-1?
But remove the contentType from your ajax call

Categories