When declaring font-face : browsers tends to wait to have text WITH this font to load the .ttf or .otf ...
I discovered this code
document.fonts.ready.then(function () { });
When I try
function myAajax () {
var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax.php", true);
...
xhr.send(params);
}
document.fonts.ready.then(function () { myAajax (); });
I get
[Deprecation] Synchronous XMLHttpRequest... in chrome console log...
Will this eventually blocked ?
The workaround I found is to make a div with display hidden
<div id="ajaxContent" style="display:none;"></div>
then call my ajax, and when fonts ready, show the div...
myAajax ();
document.fonts.ready.then(function () {$("#ajaxContent").show(); });
Related
I have following lines of code in my service-worker.js to handle an incoming push notification on chrome and mozilla:
var httpHeaders = new Headers();
httpHeaders.append('pragma', 'no-cache');
httpHeaders.append('cache-control', 'no-cache');
var fetchInit = {
method: 'GET',
headers: httpHeaders,
};
// Version 0.1
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
var urlToRedirect='';
self.addEventListener('push', function(event) {
console.log('Push message', event);
//var title = 'Push message2';
event.waitUntil(
fetch("http://abc/xyz/latest.json", fetchInit).then(function(res) {
res.json().then(function(data) {
// Show notification
urlToRedirect = data.data.url;
self.registration.showNotification(data.data.title, {
body: data.data.body,
tag: data.data.tag,
icon: 'images/icon.png'
});
});
}));
//}));
})
When i change something in latest.json and send a push notification, it still loads data from the old json file. How do i make sure it takes data from the updated json. For this, i used pragma and cache-control headers, and it works fine in chrome but does not work in firefox. How to make it work in firefox.
You can use the cache parameter for the fetch call.
For example, by setting it to no-store, you can bypass the cache entirely.
Read the description of cache mode in the specification of the Fetch API for more details.
How do I write a script to permanently change a static html file after making an ajax call to the node.js server? Any examples would be greatly appreciated :)
I agree with NikxDa that this is probably not the best solution for you, but this code should do the trick.
/write.js
var http = require('http');
var fs = require('fs');
var url = require('url');
//Lets define a port we want to listen to
const PORT=8080;
function handleRequest(request, response){
var path = url.parse(request.url).pathname;
if(path=="/write"){
fs.appendFile('message.html', 'Node.js!', function (err) {
if (err) throw err;
console.log('It\'s saved!');
});
} else {
fs.readFile('index.html',function (err, data){
response.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
response.write(data);
response.end();
});
}
}
// Create a server.
var server = http.createServer(handleRequest);
server.listen(PORT, function(){
console.log("Server listening on: http://localhost:%s", PORT);
});
/index.html
<!DOCTYPE html>
<head>
<script>
function writeIt()
{
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://localhost:8080/write", true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
string=xmlhttp.responseText;
document.write(string + ": Saved change to message.html");
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<p>Click the button to send an AJAX request to `write.js`<p>
<br><button onclick="writeIt()">Click Me</button>
</body>
/message.html
Node.js!
Editing the file directly via node would probably be really bad, I do not even know if it is at all possible. I think the better solution is for your Node Server to make the data you want to change accessible and then use jQuery or Angular to update the HTML-File when it is actually loaded.
Another approach would be to use a templating engine like https://github.com/tj/ejs, and then serve the file via Node directly, so you can change the data in the Node-Application itself every time.
We are using Cordova 3.4.0 to develop an app. Everything works fine on Android and iOS and also if we launch our app in a desktop browser. But we are stuck with really strange issue on Windows Phone 8.1.
Here is a simplified code example to test.
index.html in the application root:
<!DOCTYPE html>
<html>
<head>
<title>Mobile sandbox</title>
<meta charset="UTF-8">
<script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
</head>
<body>
<div id="redbox" style="width:100px;height:100px;background-color:red;">
</div>
<div id="greenbox" style="width:100px;height:100px;background-color:green;">
</div>
<script>
$(function () {
alert("Requesting data for redbox...");
$.ajax("test/redText.html")
.done(function (text) {
alert("Filling redbox with contents " + text);
$("#redbox").html(text);
})
.fail(function () {
alert("Error in redbox");
})
.always(function () {
alert("Complete redbox");
});
alert("Requesting data for greenbox...");
$.ajax("test/greenText.html")
.done(function (text) {
alert("Filling greenbox with contents " + text);
$("#greenbox").html(text);
})
.fail(function () {
alert("Error in greenbox");
})
.always(function () {
alert("Complete greenbox");
});
});
</script>
</body>
</html>
test/greenText.html:
<span>GREEN</span>
test/redText.html:
<span>RED</span>
The only dependency to run this test is jQuery which we have put in libs/jquery/ folder.
Now, if we run this code in every desktop browser and in iOS and Android, no matter if from local folder (with browser flags for local AJAX) or from server, we get the right sequence of alerts and AJAX loads correct data in appropriate boxes:
Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents <span>RED</span>
Complete redbox
Filling greenbox with contents <span>GREEN</span>
Complete greenbox
We get the same result if we run the index.html on Windows Phone through its Internet Explorer.
But when we deploy the same code to Windows Phone as Cordova app, strange thing happens. The redbox request never receives any data, nor any errors. The greenbox request receives data of redbox, and thus we have empty red box and green box with text "RED" in it.
Here is the sequence of alerts:
Requesting data for redbox...
Requesting data for greenbox...
Filling greenbox with contents <span>RED</span>
Complete greenbox
What's going on there, why one AJAX request does not return and the other receives wrong response? How do we fix it?
EDIT 1:
Our nest step will be to find out if it's Cordova specific issue (I see there is some XHRHelper object in the Corodva WP8 template) or it's Microsoft's phone:WebBrowser fault.
EDIT 2:
It seems, WebBrowser itself does not support AJAX requests to local files (I got "Access denied") and that's why Cordova invented XHRHelper class. But I found a related bugreport which they closed as "Cannot reproduce":
https://issues.apache.org/jira/browse/CB-4873
Is there any Cordova developer here who could suggest a fix for XHRHelper, so it supports multiple sequential AJAX requests?
Again, I cannot reproduce your results. I quickly put together a version which I will post to the JIRA issue: https://issues.apache.org/jira/browse/CB-4873
Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents
<span>REd</span>
Complete redbox
Filling greenbox with contents
<span>GREEN</span>
Complete greenbox
I modified your source a little just to make sure there were no issues with alert interfering ...
var eventLog = [];
var oneDone = false;
$(function () {
eventLog.push("Requesting data for redbox...");
$.ajax("redText.html")
.done(function (text) {
eventLog.push("Filling redbox with contents " + text);
$("#redbox").html(text);
})
.fail(function (e) {
eventLog.push("Error in redbox" + JSON.stringify(e));
})
.always(function () {
eventLog.push("Complete redbox");
if (oneDone) {
console.log(eventLog.join("\n"));
alert(eventLog.join("\n"));
}
else {
oneDone = true;
}
});
eventLog.push("Requesting data for greenbox...");
$.ajax("greenText.html")
.done(function (text) {
eventLog.push("Filling greenbox with contents " + text);
$("#greenbox").html(text);
})
.fail(function () {
eventLog.push("Error in greenbox");
})
.always(function () {
eventLog.push("Complete greenbox");
if (oneDone) {
console.log(eventLog.join("\n"));
alert(eventLog.join("\n"));
}
else {
oneDone = true;
}
});
});
Error: The connection to <websocket> was interrupted while the page was loading.
Source File: localhost/socket.io/node_modules/socket.io-client/dist/socket.io.js
Line: 2371
I am new to socket.io and I have tried to search for this, but I didn't get an answer.
Websocket is interrupted when I refresh page on Firefox. That's why server side is waiting to authorise client.
Here is code:
server.js
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs')
app.listen(8080);
function handler(req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', {
hello: 'world'
});
socket.on('my other event', function (data) {
//alert(JSON.stringify(data));
console.log(data);
});
});
index.html
<script src="node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('news', function (data) {
alert(JSON.stringify(data));
console.log(data);
socket.emit('my next event', { my: 'data' });
});
</script>
It happens because, you are not closing your open websocket.
This code would remove this error:
$(window).on('beforeunload', function(){
socket.close();
});
This seems to be an open bug in Firefox (as of 2015-03-29):
https://bugzilla.mozilla.org/show_bug.cgi?id=712329
The workaround (for now) is to call close() on the websocket on beforeunload, as Alexander pointed out.
Update 2016-04: According to Bugzilla, this will be fixed in Firefox 48
I was just running through the Socket.IO tutorials and I ran into this exact problem. I tried the posted solutions but they didn't seem to work at all.
After some fiddling and some screaming and some rubber-ducking, I finally figured out what the issue was. The issue is that it's trying to connect to the socket before the socket variables have been properly initialized. Javascript boo boo #1.
If you will ammend your file to include jQuery and then wrap your functions like so:
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function(){
var socket = io.connect('http://localhost:8080');
socket.on('news', function (data) {
alert(JSON.stringify(data));
console.log(data);
socket.emit('my next event', { my: 'data' });
});
});
</script>
You will have much more success.
What impact does this have on your application? My guess is that it's just not great to see an error in the console.
The problem here is that you are seeing Firefox loggin this error and there's nothing you can do about it. It's not possible to capture this error with a try...catch block or via websocket.onerror/websocket.onclose.
See: How do I catch a WebSocket connection interruption?
Related:
Should WebSocket.onclose be triggered by user navigation or refresh?
Firefox - Race condition allows ghost WebSocket connections to live after tab closed
I've had this problem with our custom Undertow-based webserver for years -- my problem was that my server was not responding to the socket close message.
Based on a comment by Jan Wielemaker I checked my socket close handler code for AbstractReceiveListener.onFullCloseMessage and realized I had not called the super method. After adding super.close() the socket closes cleanly on the client and no error is emitted.
One solution is to put a timeout on the disconnect event.
setTimeout(() => {
$('#offlineModal').modal('show')
}, 5000)
I need a very basic, simple and lightweight AJAX script.
Does anyone have a shell of such a script they can share?
Here's what I have:
I have a PHP script on the server that echo's the current date and time on the server
I just need the javascript that calls the php script and loads the echoed text string into a js var so I can use it in my app
(the reason I need the server's clock is that all visitors to the site have to work off the same clock. The app does not work for visitors outside the server's timezone.)
Thanks for helping out.
JQuery is perhaps the right answer for AJAX but you can also do this in plain old Javascript as follows:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//the callback function to be callled when AJAX request comes back
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","<<url of web address>>",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
You can find a simple example here:
AjaxCall = function(Data, WebServiceURL, Callback) {
var request;
var url = WebServiceURL;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
Callback(request);
} else {
alert("Sorry, an error occurred. " + request.responseText);
}
}
};
request.open("POST", url, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(Data);
} else if (window.ActiveXObject) {
url += "?" + Data;
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
Callback(request);
} else {
alert("Sorry, an error occurred. " + request.responseText);
}
}
};
request.open("GET", url, true);
request.send();
}
}
};
The the ajax functionality in jQuery is great but does mean a greater page download for one simple Javascript function.
You can find a downloadable fully worked example on my blog here:
http://www.willporter.co.uk/blog/simple-ajax-script.aspx
It uses ASP.NET on the server side but you should get the idea.
jQuery has made very simple ajax methods for you to use. You can find more information about them here.
Sample:
$.ajax({
type: 'GET',
url: '/SomeUrl/On/The/Server',
data: { SomeValue: 10 },
success: function(data, status)
{
// On Success
},
error: function(data, status)
{
// On Error
}
});
Look into this maybe : http://www.scriptiny.com/2011/01/simple-ajax-function-example/
jQuery is a more reliable library overall, but the lightest-weight AJAX methods I have found are the extremely simple Feather AJAX, coming in at 1.6 KB (with room for compression), or a one-liner snippet that I can't guarantee.
The risk of extremely lightweight libraries is that if they break, you're relying on the owner to fix it instead of a team of developers.
An alternative approach to solving your problem is to based your times on UTC instead of server-local time. You can even show the client local times based on that utc time, with a little work.
May I suggest AJAX Generator?
I am developer, and it is commercial tool but it has demo as well.
What you could do with that tool is:
put annotation on your PHP function
run AJAX Generator on PHP source file
include generated JavaScript file in HTML page and use PHP service as if you were calling function
To make it more clear, here is example code:
//example.php
<?php
//#WebService
function getServerDate(){
return date('m/d/Y h:i:s a', time());
}
?>
Now run generator on: example.php
Output would be two files: example_service.php and example_caller.js
Now you need to:
add example_service.php in same directory where is example.php and
include example_caller.js in index.html
Sorry for posting image instead of HTML code, but it wasn't showing properly.