ajax - Div text not changing - javascript

I'm a newbie in AJAX and so I am facing a lot of problems in making a simple AJAX program. I have a button on which I want to do is that when I will click it the text of the div below it changes. I tried so much times but still couldn't find the bug.
Here is my code:
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
if(!window.XMLHttpRequest) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onReadyStateChange = function () {
if(xmlhttp.readyState==2 && xmlhttp.status==200) {
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open('GET', 'textfile.txt', true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" value="Click!" onClick="loadXMLDoc();">Hello World</button>
<div id='myDiv'>hello!</div>
</body>
</html>
And here is the text file:
<p>My name is areeb siddiqui</p>
<p>My name is areeb siddiqui</p>
Any help would be appreciated
Thanks in advance :)
Also here is my webpage : http://mytestingsite.site90.net/ajax/

This should work for you.. this is how i make my ajax requests.. so very similar
function loadXMLDoc() {
var xmlhttp = null;
if(!window.XMLHttpRequest) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open('GET', 'textfile.txt', true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState != 4 || xmlhttp.status != 200){return;}
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
}
The reason your function was not updating is because onreadystatechange must be all lowercase

Change this block:
if(xmlhttp.readyState==4 && xmlhttp.status==200)

checK onreadystatechange
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
};

Change the onReadyStateChange with onreadystatechange
and xmlhttp.readyState==2 with xmlhttp.readyState==4

Related

xmlhttprequest is not opening. struggling student

currently a student and struggling to get XMLHttprequest to open my local pdf.
Please could someone assist.
Comprehensive Rules
<div>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
// code for older browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("comprules").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "MagicCompRules_20170825.pdf", true);
xmlhttp.send();
}
</script>
</div>

Using a AJAX, how do I set the innerHTML of an element that is not yet loaded in the DOM?

There is a main-feed showing a list of blog post titles. When a title is clicked, I need to display the details of the blog post in a new html file. Below is my current code:
window.location.href = "/viewpost.html";
postID = this.id;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
The problem is, the element view-post-container, is in the file viewpost.html, and so I don't think the PHP file can access it. I would just display the data on the current page (index.php), but I wanted to have individual pages for each post so I can eventually learn how to have dynamic URL's for SEO and sharing purposes. The end goal is having dynamic urls, so maybe there is a better approach? Any help would is much appreciated. Thanks.
just try this, You have to put your code in on window.onload function
window.onload = function() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
}

Javascript XMLHttpRequest onreadystatechanged not firing?

I have an html file and a .txt file in the same directory hosted on a webserver. The html file contains the following code:
<html>
<head>
<script>
window.onload = function() {
receiveMessage();
}
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.open("GET", "message.txt", true);
xmlhttp.send();
xmlhttp.onreadystatechanged = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
</body>
</html>
Since the text file message.txt contains "hello world", a javascript alert box containing that message should pop up when the response is received, but it's not. What am I doing wrong?
The property you are looking for is onreadystatechange not onreadystatechanged. There is no d on the end.
reorder the request and change function onreadystatechanged to onreadystatechange:
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","message.txt",true);
xmlhttp.send();
}
put the open and send calls after the onready statechanged event like in http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>

AJAX function( ) part alone not working

After function() it is not working, i don't know why. If I put an alert before that statement it's working but after that statement it isn't working.
<script>
function new_order() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
alert("asdasd");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("order_id").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "item_sort.php?sort=" + str, true);
xmlhttp.send();
}
</script>
3 things you can check
If an element corresponding to id order_id exists on the page
if the str is not null or not defined
If you are using older IE versions IE5 or 6 you need to add the
following in your code.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Also you need to use the following way if you want to do POST ajax call.
xmlhttp.open("POST", "item_sort.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("sort=" + str);

Empty XmlHttp responsetext (only Google Chrome)

I have a problem with my chat script in Google Chrome.
Sometimes the responsetext is empty until you reload the page, but sometimes it's working well. It opens a xmlhttp connection every second and if the first good the ones after that also good.
In Firefox it's always good.
var url = "text.php";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = myfunc;
xmlHttp.send(null);
function myfunc()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
var msg = xmlHttp.responseText;
alert(msg);
}
}
try this out
var xmlHttp;
xmlHttp=new XMLHttpRequest();
var url = "text.php";
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
var msg = xmlHttp.responseText;
alert(msg);
}
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);

Categories