I've got "The object's state must be OPENED." - javascript

I've tried to perform AJAX request, but I've got this kind of error, that ajax call should be opened. But it is opened already. Trying to send the XMLHttpRequest header, but getting this kinda error. Guys, help me!
let del_btn = document.querySelectorAll('.delete');
for(let i = 0; i < del_btn.length; i++)
{
del_btn[i].addEventListener('click', function(){
let xhr = new XMLHttpRequest();
let book_title = del_btn[i].parentElement.children[1].children[1].children[0].children[0].textContent;
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
if(this.responseText.includes('Deleted'))
{
let books = this.responseText.split('.')[1];
if(books == '0')
{
del_btn[i].parentElement.parentElement.innerHTML = 'You have no books in your list. Go to the ' + ' ' + ' main page ' + ' ' + 'and start your ride!';
}
else
{
del_btn[i].parentElement.parentElement.removeChild(del_btn[i].parentElement);
document.querySelector('.amount-b').textContent = 'Количество книг: ' + books;
}
}
}
}
xhr.open("POST", "../operations/delete_book.php", true);
xml.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('title=' + book_title);
}, false);
}```

Related

Why is my function in JS returning both results in the handler function

In function readyStateChangeHandler(xhttp), my website (which returns a table) outputs both results of the handler, success and failure, even though the table is being displayed with no problems at all.
Notice below the "get search result" button, an error is being displayed from readyStateChangeHandler
function makeAjaxQuery() {
// create an XMLHttpRequest
var xhttp = new XMLHttpRequest();
// create a handler for the readyState change
xhttp.onreadystatechange = function() {
readyStateChangeHandler(xhttp);
};
// making query by async call
xhttp.open("GET", "xxxxxxx-A3-Q6.json", true);
xhttp.send();
}
// handler for the readyState change
function readyStateChangeHandler(xhttp) {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// readyState = 4 means DONE
//status = 200 means OK
handleStatusSuccess(xhttp);
console.log('success')
} else {
// status is NOT OK
console.log('failure')
handleStatusFailure(xhttp);
}
}
// XMLHttpRequest failed
function handleStatusFailure(xhttp) {
//display error message
var displayDiv = document.getElementById("display");
displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}
// XMLHttpRequest success
function handleStatusSuccess(xhttp) {
var jsonText = xhttp.responseText;
//parse the json into an object
var obj = JSON.parse(jsonText);
// display the object on the page
displayObj(obj);
}
function displayObj(obj) {
var table = "";
for (i = 0; i < 5; i++) {
table +=
"<tr><td>" + '<img src="' + obj.result.video[i].image + '" width=200"' + '' + "</td><td>" +
'<span style="color:#DA3FA4; font-weight:bold; font-size: 30px;">' + obj.result.video[i].title + "</span>" + "<br/>" +
'<span style="font-weight:bold;font-size: 25px;">' + obj.result.video[i].channel + "</span>" + "<br/>" +
'<span style="font-weight:bold;font-size: 25px;">' + obj.result.video[i].view + " views" + "</span>" + "<br/>" +
'<span style="font-weight:bold; background-color: black; color:white"font-size: 25px;>' + obj.result.video[i].length + "</span>" + "</td></tr><td>";
}
document.getElementById("test").innerHTML = '<h1>Search results</h1><br><span style="font-size: 30px;">Search keyword: Mathematics</span><br>';
document.getElementById("demo").innerHTML = table;
}
const start = document.getElementById("getSearch");
start.addEventListener("click", function() {
makeAjaxQuery()
});
I would guess you get something in between the if (xhttp.readyState == 4 && xhttp.status == 200) { for example 2 or 3 plus 200 readystate - so for example use
xhttp.onload= function() {
readyStateChangeHandler(xhttp);
};
or fetch

Cannot Control if JSON is Undefined in javascript

I'm trying to create a site in which, through the Spotify Web API, I display the information of a certain element (Artist, Track, Album, etc ...).
I was trying to make a check on the url of the profile image of the Artist object as it is not said to be present, but when the console runs it gives me the error "Unexpected token }".
Could someone help me on why?
Below I leave the code:
function ricercaArtista() {
var xhr = new XMLHttpRequest();
var token = document.getElementById("token").innerHTML;
var artist = document.getElementById("artista").value;
artist = artist.replace(" ", "%20");
console.log(artist);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = '';
for (var i = 0; i < response.artists.items.length; i++) {
console.log(response.artists.items[i]);
try { //from here start the control on the image
result += '<div class="panel panel-primary style="background:url(' +
response.tracks.items[i].album.images[1].url + '");"><div class="panel-body">' +
} catch (error) {
result += '<div class="panel panel-primary");"><div class="panel-body">' +
}
'name : ' + response.artists.items[i].name + '<br/>' +
'popularity : ' + response.artists.items[i].popularity + '<br/>' +
'type : ' + response.artists.items[i].type + '<br/>' +
'' + 'Apri su Spotify' + '<br></div></div>';
}
alert
document.getElementById("artists").innerHTML = result;
}
};
xhr.open('GET', "https://api.spotify.com/v1/search?q=" + artist + "&type=artist", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();
}

Struggling to understand AJAX w/ Javascript

I am very new to programming.
I am trying to output a list of (my two empty) GitHub repositories into a <p> with id="repos". When I run the code, I receive the error message:
Uncaught ReferenceError: id is not defined at XMLHttpRequest.gitHubRequest.onreadystatechange
And I'll receive this error for every the other two keys I want to pull the value from (full_name & html_url).
Can someone give me some insight as to how I can make this code work? it needs to be Javascript- its for a class. Thanks you!
let gitHubRequest = new XMLHttpRequest();
gitHubRequest.open('GET', 'https://api.github.com/users/billythesailor/repos', true);
gitHubRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var repos = JSON.parse(this.responseText);
var output = '';
for(var i in repos){
output +=
'<ul>' +
'<li>ID: ' +id[i]+'</li>' +
'<li>Full Name: ' +full_name[i]+'</li>' +
'<li>URL: ' +html_url[i]+'</li>'+
'</ul>'
}
document.getElementById('repos').innerHTML = output;
}
}
gitHubRequest.send();
The issue is that the id, full_name, and html_url are fields on the repo objects, but you're accessing them as defined arrays. So id[i] needs to change to repos[i].id and so on. I've updated your example below!
let gitHubRequest = new XMLHttpRequest();
gitHubRequest.open('GET', 'https://api.github.com/users/billythesailor/repos', true);
gitHubRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var repos = JSON.parse(this.responseText);
var output = '';
for(var i in repos){
output +=
'<ul>' +
'<li>ID: ' + repos[i].id +'</li>' +
'<li>Full Name: ' + repos[i].full_name +'</li>' +
'<li>URL: ' + repos[i].html_url +'</li>'+
'</ul>'
}
document.getElementById('repos').innerHTML = output;
}
}
gitHubRequest.send();
<div id="repos"></div>
Also, if you're new to Javascript and interested in making ajax requests, I'd look into the Fetch API, which is bit cleaner to use.
fetch('https://api.github.com/users/billythesailor/repos')
.then(res => res.json())
.then(repos => {
// do stuff with the repo data!
});

Twitch TV API JSON Issue

I work with Twitch API. If the streamer streams I work with with property "Stream". But If he's not streaming, then I need refer to another link. Then I again turn to the function of the getJSON and pass there the necessary API link. And I'm working with her. However, the loop does not work as it should. It takes the last streamer out of the "channels" array, but it should all those who do not stream. I can not understand what the problem is. Help...
JSFiddle: https://jsfiddle.net/e7gLL25y/
JS Code:
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
if(xhr.readyState == 4 && xhr.status == "200") {
callback(JSON.parse(xhr.responseText));
}
};
xhr.send();
};
var channels = ["summit1g", "esl_RuHub_CSGO", "Starladder1", "Senpai_Frozen", "tehvivalazz", "ESL_CSGO"];
var client_id = "hx3dea4ifwensxffoe8iwvekwvksnx";
var section = document.getElementById("main-section");
var streamer = [];
for(var i = 0; i < channels.length; i++) {
var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;
getJSON(url_streams, function(response) {
if( response["stream"] !== null ) {
streamer[i] = document.createElement("div");
streamer[i].className = "streamer";
streamer[i].innerHTML = "<a target='_blank' href='" + response.stream.channel["url"] +
"'><img id='streamer-image' src='" +
response.stream.channel["logo"] +
"' alt='Av' /><h2 id='streamer-name'>" +
response.stream.channel["name"] +
"</h2><p id='stream-status'>" +
response.stream["game"] + "</p></a>";
section.appendChild(streamer[i]);
} else {
getJSON(url_channels, function(r) {
streamer[i] = document.createElement("div");
streamer[i].className = "streamer";
streamer[i].innerHTML = "<a target='_blank' href='" + r["url"] +
"'><img id='streamer-image' src='" +
r["logo"] +
"' alt='Av' /><h2 id='streamer-name'>" +
r["name"] +
"</h2><p id='stream-status'>Offline</p></a>";
section.appendChild(streamer[i]);
});
}
});
}
You are having a common misconception about JavaScript contexts.
Refer to my answer here to see details about this problem: https://stackoverflow.com/a/42283571/1525495
Simply, the getJSON response is called after all the array is looped, so i will be the last index in all the responses. You have to create another context to keep the i number so is not increased.
for(var i = 0; i < channels.length; i++) {
var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;
(function(i) {
// i will not be changed by the external loop as is in another context
getJSON(url_streams, function(response) {
// Thingy things...
});
})(i);
}

Using window.onload with dynamic content in WebExtension

I have a web extension that is loading content into the popup based on existing tokens, and I need it to add a click listener to a button that's dynamically added, but I can't seem to get it to add AFTER the button is inserted into the page. It keeps coming up that TypeError: document.getElementById(...) is null.
I've tried using windows.onload and DOMContentLoaded with no luck
Code
// Get and display profile
function outputProfile(ACC_TOK) {
var request = new XMLHttpRequest();
request.open('GET', 'https://private-anon-535ecb43fa-trakt.apiary-mock.com/users/settings');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer ' + ACC_TOK);
request.setRequestHeader('trakt-api-version', '2');
request.setRequestHeader('trakt-api-key', APP_KEY);
request.onreadystatechange = function () {
if (this.readyState === 4) {
// Get Response and put in array
var response = JSON.parse(this.responseText);
document.body.innerHTML = '<section id="traktProfile"><div id="traktAvatar"><img src="' + response.user.images.avatar.full + '" width="100px" height="100px" alt="' + response.user.name + '" /></div><div id="traktUser"><h1>' + response.user.name + '</h1><p><i class="fa fa-map-marker"></i> ' + response.user.location + '</p></div></section><section id="traktSignOut"><a id="traktSignOutLink" class="profileLink">Sign Out</a></section>';
}
};
request.send();
}
// Check if Access Token Exists
chrome.storage.local.get("access_token", function (result) {
if (result.access_token && typeof result.access_token !== undefined) {
// Output Profile Page
outputProfile(result.access_token);
// Sign out button
window.onload = function() {
console.log("DOM Loaded");
document.getElementById("traktSignOutLink").addEventListener("click", traktSignOut);
};
} else {
// Output Authenctication Page
outputAuth();
}
});
parden me if i get the wrong idea
why don't you add click here
document.body.innerHTML = '<section id="traktProfile"><div id="traktAvatar"><img src="' + response.user.images.avatar.full + '" width="100px" height="100px" alt="' + response.user.name + '" /></div><div id="traktUser"><h1>' + response.user.name + '</h1><p><i class="fa fa-map-marker"></i> ' + response.user.location + '</p></div></section><section id="traktSignOut"><a id="traktSignOutLink" class="profileLink" onclick="traktSignOut();">Sign Out</a></section>';
I ended up linking it to another page and running the script from there
Popup.js
// Get and display profile
function outputProfile(ACC_TOK) {
var request = new XMLHttpRequest();
request.open('GET', 'https://private-anon-535ecb43fa-trakt.apiary-mock.com/users/settings');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer ' + ACC_TOK);
request.setRequestHeader('trakt-api-version', '2');
request.setRequestHeader('trakt-api-key', APP_KEY);
request.onreadystatechange = function () {
if (this.readyState === 4) {
// Get Response and put in array
var response = JSON.parse(this.responseText);
document.body.innerHTML = '<section id="traktProfile"><div id="traktAvatar"><img src="' + response.user.images.avatar.full + '" width="100px" height="100px" alt="' + response.user.name + '" /></div><div id="traktUser"><h1>' + response.user.name + '</h1><p><i class="fa fa-map-marker"></i> ' + response.user.location + '</p></div></section><section id="traktSignOut">Sign Out</section>';
}
};
request.send();
}
// Check if Access Token Exists
chrome.storage.local.get("access_token", function (result) {
if (result.access_token && typeof result.access_token !== undefined) {
// Output Profile Page
outputProfile(result.access_token);
} else {
// Output Authenctication Page
outputAuth();
}
});
Signout.js
window.onload = function () {
// Get Access Token to clear
chrome.storage.local.get("access_token", function (result) {
// Revoke Token
var request = new XMLHttpRequest();
request.open('POST', 'https://private-anon-535ecb43fa-trakt.apiary-mock.com/oauth/revoke');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer ' + result.access_token);
request.setRequestHeader('trakt-api-version', '2');
request.setRequestHeader('trakt-api-key', APP_KEY);
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
// Clear Storage
chrome.storage.local.clear(function() {
// Alert user
chrome.runtime.sendMessage({"type": "notification", "title": "Trakt for IMDb Signed Out", "content": "You have been logged out of Trakt for IMDb."});
// Redirect back to popup.html
setTimeout(function () {
window.location.replace("index.html");
}, 800);
});
} else {
// Alert user
chrome.runtime.sendMessage({"type": "notification", "title": "Trakt for IMDb Sign Out Error", "content": "Sorry there was an issue signing you out of Trakt for IMDb. Please try again."});
// Redirect back to popup.html
setTimeout(function () {
window.location.replace("index.html");
}, 800);
}
}
};
var body = {'access_token': result.access_token};
request.send(JSON.stringify(body));
});
};
This may be messy, but it does the trick for me. If anyone works out an easier/better answer I'm all ears :D

Categories