Develop Reference

JS: HTML is not dynamically changing

I am building an web that allows user to like a post when they click a button. CreateLike function calls API and creates a like object however, I would like to have the number of likes updated right away without reloading. I built another API that returns the number of likes for a post. Function LikeCount should put the number of likes into the p tag. It works initially when I load the page however, the value does not change when I click the button even though I can see that the API is called. (After reloading the page the number changes as expected) What am I doing wrong?
I have this HTML:
<p class="like-count" id={{post.id}}></p>
<script>LikeCount({{post.id}});</script>
<button type="button" class="btn-like" onclick="CreateLike({{user.id}},{{post.id}})"></button>
with JS functions:
function CreateLike (userid,postid) {
xhr = new XMLHttpRequest();
var url = "{% url 'likes' %}";
var csrftoken = getCookie('csrftoken')
xhr.open("POST", url, true);
xhr.setRequestHeader("X-CSRFToken",'{{ csrf_token }}')
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json.email + ", " + json.name)
}
}
var data = JSON.stringify({csrfmiddlewaretoken:csrftoken,"user":userid,"post":postid});
xhr.send(data);
LikeCount(postid);
}
function LikeCount(postid) {
var xmlhttp = new XMLHttpRequest();
var url = "{% url 'likecount' id=112233 %}".replace("112233", postid);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = arr.like_count;
document.getElementById(postid).innerHTML = out;
}
}
Like count API looks like this:
{
"like_count": 1
}

if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
LikeCount(); //Put your get like count here
} else {
// Handle Errors
}
}
Call LikeCount only after receiving the response of your POST request. Right now you're immediately sending a GET request without ensuring if the previous POST request got completed.

Added
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
var myArr = JSON.parse(this.responseText);
LikeCount(myArr.post);
}
};
before
xhr.send(data);
and it fixed the issue.

XMLHttpRequest don't include GET request

I'm trying to retrieve JSON data using XMLHttpRequest but it seems like it won't include any of my field data.
var fields = ["ID", "item_id", "item_tag", "item_name", "item_default_price", "item_quantity", "item_comment"];
function loadTable(json_items) {
alert(json_items);
}
var frm = document.querySelector("form.inventory-search-form");
frm.onsubmit = function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE && this.status == 200){
try {
loadTable(JSON.parse(this.responseText));
} catch(err) {
}
}
};
request.open('GET', '/api/inventory/list', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Tells server that this call is made for ajax purposes.
// Most libraries like jQuery/Prototype/Dojo do this
var data = new FormData(frm);
for (i=0; i<fields.length; i++) {
data.append(fields[i], frm.querySelector("[name='" + fields[i] + "']").value);
}
request.send(data);
}
frm.onsubmit(document.createEvent("Event"));
What did I do wrong?
I have checked the FormData and it contained the fields, but it didn't make the required GET request such as /api/inventory/list?ID=2 instead it only issued /api/inventory/list.
Thanks!

Detect browser tab close without jquery and send some data to php file

I have wrote a script that send some data to an external php file without jquery.
<script type="text/javascript">
var statsPage = 'http://www.my-url.com/response.php';
function ca(c,o,n,t,e,t,u){return p={type:c,userid:o,gender:n}}
ca("pageview", "1", "male");
var params = Object.keys(p).map(function(k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(p[k])
}).join('&')
const req = new XMLHttpRequest();
//req.addEventListener('load' /*callback after req is complete*/);
req.open('GET', statsPage + '?' + params);
req.send();
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
alert(req.responseText);
}
}
</script>
What i also want to do is to send data when the browser tab is closed, so i wrote a script like below but it is not working. I don't get a response from the php file here.
navigator.sendBeacon = navigator.sendBeacon || function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_title=1');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
};
I found also this script but it gives me also no response from the response.php file as an alert:
window.onbeforeunload = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_titel=1', true);
// If specified, responseType must be empty string or "text"
xhr.responseType = 'test';
xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
//console.log(xhr.response);
//console.log(xhr.responseText);
alert(xhr.responseText);
}
}
};
xhr.send(null);
}
EDIT
I did also the following test but now it gives me an alertbox with the value 1 first and then an alert with the response of the function ca (see first part of the code on top for the function). So i think the onbeforeunload is not working here. If i close browser tab i get nothing in response.
window.onbeforeunload = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.digital-productions.be/dev/analytics/response.php?pag_titel=1', true);
// If specified, responseType must be empty string or "text"
xhr.responseType = 'test';
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.send(null);
}

You can use the beforeunload event to execute code before the user leaves the page, or you could warn them that there is unsaved changes. You can return a message by using e.returnValue = "Message";.
window.addEventListener("beforeunload", function(e) {
//code
});
Here is a link from the mozilla documentation: https://developer.mozilla.org/en/docs/Web/Events/beforeunload

How can I get the response from an Ajax request?

I tried this code :
var xmlHttp = new XMLHttpRequest();
function activecomm(comm_id,a_link_id)
{
var postComm = "id="+encodeURIComponent(comm_id);
var url = 'comments_mgr_proccesser.php';
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleInfo(a_link_id);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", postComm.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(postComm);
}
function handleInfo(a_link_id)
{
if(xmlHttp.readyState == 1)
{
document.getElementById("commactiveresult").innerHTML = 'loading ..';
}
else if(xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById("commactiveresult").innerHTML = response;
}
}
When readyState == 1 the contents of the commactiveresult element is updated, but when readyState == 4 nothing is shown in the same element.
Does anyone know what the problem is please?

You're calling the handleInfo function instead of assigning a ready state handler. Try
xmlHttp.onreadystatechange = function (){
handleInfo(a_link_id);
};

Append HTML doc to element using ajax

I've written this code using various online sources but I cannot seem to figure out the last part.
function loadajax (event) {
event.preventDefault();
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open('GET', this.href, true);
var content = document.getElementsByTagName('article')[0];
content.innerHTML = xhr.responseText;
}
It seems to work until I need to add content to my page. Indeed content.innerHTML = xhr.responseText; returns nothing. I am getting a simple HTML file, how can I post it in my page? what am I doing wrong?
Thanks for your help!

ajax calls are asynchronous. it will work if you'll move the content.innerHTML = xhr.responseText; line into the onreadystatechange function like this:
function loadajax (event) {
event.preventDefault();
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
content.innerHTML = xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open('GET', this.href, true);
var content = document.getElementsByTagName('article')[0];
}

Put your contet.innerHTML inside status 200 condition.
You are just assigning the value to content before it really exists. Before the ajax got it from server.