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. :)
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.
I am trying to figure out how to toggle the style display using plain javascript.
I have an XLMHttpRequest(). It works. The UI display is what I am working on. I would like the spin icon to show while the data is being loaded to the database. So, my code turns on the icon but the problem is when I add
document.getElementById('loading').style.display = "none";
to reset it to hidden. It never shows. So, here is my code.
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onprogress = function() {
document.getElementById('loading').style.display = "block";
}
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
xhr.send()
}
I tried to have the page just reload after the alert is shown but all that does is immediately reloads the page without executing the xhr.send(). That is why I would like to know what order is the code executed. That way I will know where to place the display = "none".
The latency is probably too low to notice the change (which can be verified by simulating high latency on the server). Try the following as an alternative:
From:
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onprogress = function() {
document.getElementById('loading').style.display = "block";
}
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
xhr.send()
}
To:
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
document.getElementById('loading').style.display = "block";
xhr.send()
}
Assumptions:
The GET request latency is slow enough that you'll see the indicator
There is no other issue, related to CSS/HTML, that would prevent the indicator from showing
Disregarding the obvious, like; whether the function is being executed, no typos for identifiers that’d prevent relevant code from executing, etc.
i'm stuck on an issue i could not find an answer to.
i have the following code:
function LanguageClicked(language_clicked){
var request = new XMLHttpRequest();
request.open("GET", "", false /* async */);
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
----HERE SHOLUD BE THE CODE FOR CHANGING THE WEB PAGE TO THE SERVER
RESPONSE----
}
how can i do that? i want to change the current page to the server response page.
What do you think about this ?
function LanguageClicked(language_clicked) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Here we go on the new page
window.location = xhttp.responseText;
}
};
request.open("GET", "", false /* async */ );
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
}
Try this.
function LanguageClicked(language_clicked) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Here we go on the new page
document.write(xhttp.responseText);
}
};
request.open("GET", "", false /* async */ );
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
}
I have the code to check if a webpage exists that is working perfectly fine, but I need to check if it exists many times a second. Would this code cache, or would it check every time?
var url = "urlhere"+"?noCachePlease="+(Math.random()*1000000);
var aa = setInterval(function() {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onreadystatechange = function(){
if (request.readyState === 4){
if (request.status === 404) {
//Site DNE
}
else { clearInterval(aa); }
}
};
request.send();
}, 50);
//Afterwards
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();