Javascript setTimeout and Chrome Workers, I don't get it - javascript

I have the following files: (inc.js is included in my html page)
inc.js
var field = new Worker('ajax.js');
field.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
document.getElementById('fieldToUpdate').innerHTML = data[0];
}, false);
field.postMessage(0);
ajax.js
var xhr = new XMLHttpRequest();
function getData() {
xhr.open('get', 'field.php');
xhr.onreadystatechange = processData;
xhr.send(null);
}
function processData() {
if (xhr.readyState == 4) {
self.postMessage(xhr.responseText);
setTimeout(getData, 5000);
}
}
onmessage = function() {
setTimeout(getData, 5000);
}
My Problem is now, that this Script doesn't make one http request each 5 seconds but it starts as soon as one is finished.

Related

issues with onClick event not getting triggered on DOM

I've got an API that returns me {"html", "Css" and "JS"} that i'd ideally like to render on client side.
Issue:
Looks like something's failing for some reason and clicking on the button does not do anything. (I have accept button)
JavaScript:
function postAjax(success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('GET', '/myaccount/profile/api/accept');
xhr.onreadystatechange = function() {
if (xhr.readyState > 3 && xhr.status == 200) {
success();
}
};
xhr.setRequestHeader('Accept', 'application/json', 'Content-Type', 'application/json');
xhr.send(null);
return xhr;
};
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
// some logic
var cookieLanguage = document.getElementById("CookieContent_wrapper");
var cookieBanner = document.getElementById("CookieBanner");
var acceptAllButton = document.getElementById("acceptAllButton");
acceptAllButton.onclick = function() { // Does not get trigerred.
// Does not get trigerred.
// Do some logic.
};
}
};
However, acceptAllButton.onClick event is not triggerred.
This is my directive.js (angular)
populate() {
this.cookieBannerData = this.models.CookieData; // We are getting { "js", "html", "css"}
//CSS
$("head").prepend( this.cookieBannerData.css );
// HTML
let div = document.getElementById( 'cookie-banner-outerwrap' );
div.insertAdjacentHTML( 'beforeend', this.cookieBannerData.html );
//JS
$("head").append( this.cookieBannerData.js );
}
template.html
<div id="cookie-banner-outerwrap"></div>
When I click on the button, nothing happens. Is there anyway I can bind the onclick event with window so that I can get my

AJAX load animation for chat?

How do I add the slideDown jquery animation when I knew message is loaded? Perhaps I can't with my method for loading... A file takes user input and inserts into database. Another file pulls from database onto chatbox and styles.
Javascript Code:
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
event.preventDefault();
});
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
Please let me know if you need the PHP attached.. Thanks for the help! :)

Timing on GET info from PHP/SQL

Just for you to know I'm less than a newbie!
I have the following javascript code:
window.onload = function() {
renderTime();
getsec(myHandler);
countdown('countdown');
...
}
function myHandler(resultado) {
seconds = resultado;
}
function reqListener () {
console.log(this.responseText);
}
function getsec(callback) {
var indice = 1;
var oReq = new XMLHttpRequest();
oReq.onload = function() {
var variarr = JSON.parse(this.responseText);
callback(variarr[0]);
};
oReq.open("GET", "getsec.php?lei="+indice, true);
oReq.send();
}
This works perfectly for me. The intention is to get data from MySQL table through getsec.php every second. As you can see I have function countdown('countdown') that looks like this:
function countdown(element) {
...
interval = setInterval(function() {
...
if( runned == false){ // This condition happens
...
} else {
...
}
}, 1000);
}
I tryed to put function getsec(myHandler) inside function countdown('countdown')
if( runned == false){ // This condition happens
getsec(myHandler);
and I stop getting the information I want.
Can anyone explain me why?

AJAX function parameter is null?

i got a problem with JS:
On line 1 to 4 I take all "a"-Elements from the DOM and get their hrefs.
later I want to reload the URL via AJAX, but the href does not arrive correctly... Whats wrong?
$(document).ready(function(){
$('a').click(function(e){
ajaxReload($(this).attr('href'));
e.preventDefault();
});
});
function ajaxReload(href) {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", href, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState != 4) {
document.write('loading');
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert('hello');
//alert('getting '+xmlhttp.status+' for '+href);
var pureHTML = xmlhttp.responseText;
var ajaxstart = pureHTML.indexOf('<!-- AJAX START -->');
var ajaxend = pureHTML.indexOf('<!-- AJAX END -->');
var ajaxContent = pureHTML.substring(ajaxstart, ajaxend);
var writeContent = document.getElementById('content');
writeContent.innerHTML = ajaxContent;
}
}
xmlhttp.send(null);
}
Sorry if I've misunderstood your code. I think that you simply need to (at least approximately) just remove code as commented below:
//$('a').click = function(href) {
var pureHTML = xmlhttp.responseText;
var ajaxstart = pureHTML.indexOf('<!-- AJAX START -->');
var ajaxend = pureHTML.indexOf('<!-- AJAX END -->');
var ajaxContent = pureHTML.substring(ajaxstart, ajaxend);
$("content").html(ajaxContent);
// ajaxReload(href); //this would cause a loop?
// return false;
//}
To answer your later question - you can change your event propagation handling to:
$(document).ready(function(){
$('a').click(function(e){
ajaxReload($(this).attr('href'));
e.preventDefault();
});
});
And for the further comments, maybe try changing your:
document.write('loading');
To:
$("content").html(xmlhttp.status); //so now you can see the loading status for testing

onload Functions Firing Out Of Order

Any idea why the following code:
<script>
var access_token;
var access_token_secret;
function Login(){
img = document.getElementById('authenticate');
img.src = 'authenticate.png';
login = document.getElementById('login');
login.style.visibility="visible";
}
function cookieHandlerStep1(){
chrome.cookies.get({
url:URL_GOES_HERE,
name:'access_token'
},
function(cookie){
if(cookie){
access_token = cookie['value'];
cookieHandlerStep2();
} else{
Login();
}
});
}
function cookieHandlerStep2(){
chrome.cookies.get({
url:URL_GOES_HERE,
name:'access_token_secret'
},
function(cookie){
if(cookie){
access_token_secret = cookie['value'];
Interact();
} else{
Login();
}
});
}
function Interact(){
alert(access_token);
xhr = new XMLHttpRequest();
xhr.open("GET", URL_GOES_HERE, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.write(xhr.responseText);
}
}
xhr.send();
}
</script>
<body onload="cookieHandlerStep1(),cookieHandlerStep2(),Interact()">
Could possibly have the functions executing out of sequence?
They're not firing out of order. You've provided callbacks to chrome.cookies.get which are not guaranteed to be called before the rest of the code. The first function returns before the callbacks are fired, and the next two (cookieHandlerStep2() and Interact()) get called.
However, in these callbacks, cookieHandlerStep1() is already calling cookieHandlerStep2() which then calls Interact() - so I presume what you actually want in your onload is just the first function to initiate the chain:
<body onload="cookieHandlerStep1()">

Categories