I would like to be able to create web workers dynamically in a foreach loop. I am not sure if I am doing this correctly but here is what I am attempting.
main.js:
$('#action-options').on('click', '#act_restart', function() {
$.each(checked, function(key, val) {
var worker = new Worker('js/doWork.js');
worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);
worker.postMessage({'inst': val});
});
});
doWork.js
self.addEventListener('message', function(e) {
var data = e.data;
var xmlhttp;
var tableData;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
tableData = xmlhttp.responseText;
self.postMessage(tableData);
}
}
xmlhttp.open("GET", "../apicall/"+data.inst, true);
xmlhttp.send();
}, false);
I would like to fire a worker for each AJAX call so that if one takes longer than another it will not hold up the page. or any of the others.
How is this possible with web workers?
Related
I am trying to make a landing page with json. I am trying to have it so when someone clicks it goes to a page from the json file. So far I have this:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
function click1(){
window.location.href = Link.link;
}
And when I click on it it gives me (from console):
(index):22 Uncaught ReferenceError: Link is not defined at click1 ((index):22) at HTMLAnchorElement.onclick ((index):8)
Assuming your JSON content has properties title and link, and that your click1 handler has been properly registered, you should be able to combine what you have into something like this:
function click1() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
window.location.href = Link.link;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
}
Note that setting the innerHTML of an element before window.location.href = Link.link; is somewhat pointless because updating window.location will cause a new page to load.
It is my AJAX call with setTimeout
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('mainContent').style.display = 'none';
if (this.readyState == 4 && this.status == 200) {
xhttp.onload = function(){
document.getElementById("mainContent").innerHTML = this.responseText;
setTimeout(function(
document.getElementById("mainContent").style.display = 'block';
),1000);
}
}
};
xhttp.open("POST", "system.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("lang="+lang);
I want detect when ajax is fully loaded and I have also solution here
I have solution here but I can't understand how it work.
var oldOpen = XMLHttpRequest.prototype.open;
function onStateChange(event) {
// fires on every readystatechange ever
// use `this` to determine which XHR object fired the change event
}
XMLHttpRequest.prototype.open = function() {
// when an XHR object is opened, add a listener for its readystatechange events
this.addEventListener("readystatechange", onStateChange)
// run the real `open`
oldOpen.apply(this, arguments);
}
Can you example me how it work or write full code how it work ?
I got this code, to simple to have any errors and still...
I have a nav, where the onclick calls for clicker(nodenr) what should load an external site in an div.
function clicker(nodenr) {
var url=links[nodenr];
console.log(nodenr);
var request = new XMLHttpRequest();
request.open('GET', ''+url+'', true);
//request.open('GET', ''url, true);
request.onreadystatechange = function (event) {
if(request.readyState == 4) {
if(request.status == 200) {
console.log("hello");
document.getElementById("content").innerHTML = request.responseText;
}
else {
document.getElementById("content").innerHTML = "Service not loading.";
}
}
};
}
What basic error have I made? Please correct me. :)
I am sure there is something that I am missing from this code, I just can not figure out what it is.
Here is the main page:
<script>
function wwCallback(e) {
document.write(e.data);
}
function wwError(e) {
alert(e.data)
}
$(document).ready(function () {
var worker = new Worker("sync.js");
worker.onmessage = wwCallback;
worker.onerror = wwError;
worker.postMessage({
'cmd': 'downloadUser',
'url': 'server.php'
});
console.log("WW Started");
});
</script>
Server.php simply echoes a JSON string and I have verified that it is both valid and working using normal ajax requests.
Here is my web workers code:
function getData(url) {
var req = new XMLHttpRequest();
//expect json
req.open('GET', url);
req.send(null);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
self.postMessage(req.responseText);
}
}
}
}
self.addEventListener('message', function (e) {
var data = e.data;
switch (data.cmd) {
case 'downloadUser':
getData(data.url);
}
self.close();
}, false);
Could anyone point me in the right direction?
Your problem is in your WebWorker XHR call. You've opened the request, then immediately sent it before you've set up the event handler to handle the response. You just need to move the req.send(null); call below the code that sets up the event handler.
Try this:
function getData(url) {
var req = new XMLHttpRequest();
//expect json
req.open('GET', url);
// req.send(null); // remove this line from here.
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
self.postMessage(req.responseText);
}
}
}
req.send(null); // make the request after your readystatechange
// handler is set up.
}
self.addEventListener('message', function (e) {
var data = e.data;
switch (data.cmd) {
case 'downloadUser':
getData(data.url);
}
self.close();
}, false);
I have a problem reloading jScrollPane after I use ajax. Although this issue seems to be asked a lot, I still haven't figured it out (after spending hours on it).
So here's my javascript code:
function search(str) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
}
}
xmlhttp.open("POST", "ajax/search.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
}
So although I'm reintitialising JscrollPane it still doesn't come up after the div content is being replace by ajax.
Any solution?
I managed to solve it with api getContentPane.
I added the following code in the top of the script:
$(document).ready(function() {
jQuery('.searchresult').jScrollPane({
showArrows: true,
autoReinitialise: false
});
})
And I replaced this:
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
with:
api = jQuery("#searchresult").data('jsp');
api.getContentPane().html(xmlhttp.responseText);
document.getElementById("results").style.display="inline";
api.reinitialise();