Why can't AJAX load another HTML page with JavaScript? It loads HTML,CSS,PHP etc... but not JavaScript. Is AJAX supposed to work like that? If so how can I load another HTML page that contains JS with AJAX?
A simple example what I mean
a.php
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "b.php", true);
xhttp.send();
}
</script>
</body>
</html>
b.php
<!DOCTYPE html>
<html>
<body>
<h1>b</h1>
<script>
document.write("Hello World!");
</script>
</body>
</html>
Screenshot of response:
Because the javascript code you'll get via ajax is a simple string and not executed. You have to eval() the code in the script tag like:
Example:
<script id="helloworld">
document.write("Hello World!");
</script>
JS:
var jsCode = document.getElementById('helloworld').textContent;
eval(jsCode);
Edit by request:
if (this.readyState == 4 && this.status == 200) {
var demoElement = document.getElementById("demo");
demoElement.innerHTML = this.responseText;
var scriptTags = demoElement.getElementsByTagName('script');
for(i = 0; i < scriptTags.length; i++) {
eval(scriptTag[i].textContent);
}
}
Related
I have this code
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
console.log('secondFunction')
</script>
</body>
<html>
Here i am getting the content from the url
And during that the browser contain loading the code and execute it
But i get secondFunction first then firstFunction
And i want firstFunction to execute first then secondFunction after firstFunction finish
Call the second function from the first function.
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
secondFunction();
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
function secondFunction() {
console.log('secondFunction');
}
</script>
</body>
<html>
If that's not possible, you can make xhttp.send() blocking. I strongly advise against it. It's bad user experience. But it's possible, and maybe there are use-cases where this is the only solution.
<html>
<head>
<script>
function main(){
function loadWordlist(url){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('firstFunction');
}
};
xhttp.open("GET", url, false);
xhttp.send();
}
loadWordlist('https://www.example.com/');
}
main()
</script>
</head>
<body>
<script>
console.log('secondFunction')
</script>
</body>
<html>
I have been working with script from w3schools. I would like the ajax_info.txt file to appear as the page loads instead of with the button click. I've seen this question before, but can't find the answer again after a couple of days of looking. I pre-apologize for this idiotic question.
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Why doesn't jquery work within ajax method?
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#demo').html('Hello World');
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
now here
$('#demo').html('Hello World');
it's not working.
but this does
document.getElementById("demo").innerHTML = 'asas';
why ? What could bt the reason. I have tried to change id to class but no luck.
Try adding in jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Right before the </body> tag.
As #31piy mentions in his comment, you can use jQuery's ajax functions like this:
<script>
$(function() {
$(document).on('click', 'button', function (event) {
event.preventDefault();
$.get('ajax_info.txt', '', function(response, textStatus) {
$('#demo').html('Hello World');
});
});
});
</script>
Iam new in javascript, I have a script that can work when I put in the footer before the </ body> in Wordpress, then I will convert to external javascript (.js file) but when I run it can not work. How to solve this problem?
This is script in footer and work,
function showMe() {
var x = document.getElementById("codeArea").value;
if (x.length == 0) {
document.getElementById("txtResponse").innerHTML = "empty";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtResponse").innerHTML = this.responseText;
return;
}
}
xmlhttp.open("GET", "show.php?q="+x, true);
xmlhttp.send();
}
}
And this is what I try to change to external javascript, example : showMe.js
function showMe() {
'use strict';
var x = document.getElementById("codeArea").value;
if (x.length === 0) {
document.getElementById("txtResponse").innerHTML = "empty";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("txtResponse").innerHTML = this.responseText;
return;
}
};
xmlhttp.open("GET", "show.php?q="+x, true);
xmlhttp.send();
}
}
Please give Me solution, thanks
It would be helpful if you put the snippet in your post. Any way just try including the js file just above the closing body tag i.e. </body> tag in the HTML file.
<html>
...
<body>
.
.
.
<script type="text/javascript" src="showMe.js"></script>
</body>
In your HTML file add an script Tag just before you close body:
<body>
--Content--
<script src="dir/showMe.js"></script>
</body>
And next time pls add your HTML file , it is very important.
if you converting your js code into a file then follow steps:-
1.put the file into your theme js directory
2. the call into footer file like this one
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/showMe.js"></script>
before closing tag of </body>
Thanks
If wordpress you can follow this
enter link description here
else
Remove the line
'use strict'
and try again.
I am trying to update certain attributes of my xml file using javascript.
I am able to set new value by calling setAttribute() method, but unable to reflect it in the physical file.
I am very much new to html javascript. Please help.
Below I am posting my HTML as well as xml file code.
Html code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "http://10.21.64.222/LoadBreakSwitch/vbn.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Ping");
x[0].setAttribute("CommValue","1122222");
txt +=x[0].getAttribute("CommValue")+"<br>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
xml file code:
<?xml version="1.0" encoding="utf-8"?>
<LBSCommands>
<Ping Commkey="A3070000AA00A4" CommValue="A309008001043101A4"/>
<Frequency Commkey="A3070300AD00A4" CommValue="A309038001013101A4"/>
<SwitchStatus Commkey="A3071D01C800A4" CommValue="A3091D8101014C01A4"/>
<SwitchLockStatus Commkey="A3071E01C900A4" CommValue="A3091E8101004C01A4"/>
<SetFrequency01 Commkey="A308130001BF00A4" CommValue="A309038001013101A4"/>
</LBSCommands>