I'm trying to change the content of a div with Ajax, however nothing happens... could someone help see what I'm doing wrong?
As far as i can see I'm not missing anything, but the buttons don't connect through. I am running XAMPP and apache is turned on.
Index Page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Malecia Legodi">
<meta name="description" content="Reload Website">
<script language="JavaScript" src="javascript.js"></script>
</head>
<body style="background-color:green">
<div>
<nav>
<table>
<tr>
<td>
<input type="button" id="home" value="Home"/>
</td>
<td>
<input type="button" id="contact" value="contact" />
</td>
</table>
</nav>
<section>
<div id="content" >
<h1>Content Review Summary</h1>
<p>
aaa...
</p>
<p>
bbb...
</p>
</div>
</section>
<footer align="center">© Reload Website</footer>
</div>
</body>
</html>
contact page:
<h1>Content Review Summary</h1>
<p>
ccc...
</p>
<p>
ddd...
</p>
Javascript.js
function initiate(){
content = document.getElementById('content');
var home = document.getElementById('home');
var contact = document.getElementById('contact');
home.addEventListener('click', readHome, false);
contact.addEventListener('click', readContact, false);
}
function readHome(){
var url = "home.html";
var request = new XMLHttpRequest();
request.addEventListener('load', showContent, false);
request.open("GET", url, true);
request.send();
}
function readContact(){
var url = "contact.html";
var request = new XMLHttpRequest();
request.addEventListener('load', showContent, false);
request.open("GET", url, true);
request.send();
}
//function showContent() to add data into your
function showContent(e){
//add data to secContent
content.innerHTML = e.target.responseText;
}
//use the listener to load your initiate() function
window.addEventListener('load', initiate, false);
change the div id content to secContent"
Also change:
content = document.getElementById('content');
to
content = document.getElementById('secContent');
As well as:
content.innerHTML = e.target.responseText;
to
secContent.innerHTML = e.target.responseText;
Your javascript's last couple of blocks of code are exactly alike to an example I was given at college (Although the example in question was only reading a single .txt file rather than several htmls it had the same problem) . I managed to get it to work by the method mentioned above. Hopefully it will help you as well.
Related
Wondering why my XML URL Feed data is not displaying to HTML on the front-end. If I host the static XML in my directory, it works. However, when using a live feed from https://www.prlog.org/news/us/ind/sports/rss.xml, it does not work???
<!doctype html>
<html lang="en">
<head>
<title>Test XML Feed</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-8">Testing XML Feed</h1>
<hr class="my-2">
<div class="row">
<div class="col-12">
<div id="title"></div>
</div>
<div class="col-12">
<div id="description"></div>
</div>
</div>
</div>
</div>
<script>
//Display it
function displayFEED(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
//Call XML Feed with Live URL
xmlhttp.open("GET", 'https://www.prlog.org/news/us/ind/sports/rss.xml', true);
xmlhttp.send();
}
displayFEED(1);
// Call tag names from XML and match ID's
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("channel");
document.getElementById("title").innerHTML = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.getElementById("description").innerHTML = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
If the server cooperates, your code using XMLHttpRequest can pull the remote resource; for the sample subdomain below I have configured the header and that way the code run here on stackoverflow.com can access the file fine:
const uri = 'https://cors-resources.liberty-development.net/sample1.xml';
const req = new XMLHttpRequest();
req.open('GET', uri);
req.onload = function(e) {
console.log(req.responseXML);
};
req.send();
But if the server does not cooperate you can't do anything but set up some kind of proxy service on your own site and have it pull the remote URIs with server-side code on your own site while client-side JavaScript simply connects to your own site.
So, my goal was to have it so that when the main button was clicked it would automatically redirect to a certain page in a new tab by doing something along the lines of
document.getElementById('mybutton').onclick = function() {
addselect("List of gems", "gemstones.org")
addselect("Whatever", "A url"
}
So that it would be very simple to make the tags be created, and then have the program redirect depending on what its InnerHTML was.
But so far I only have:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Misc Info</h1>
<p>Select a website to go to.</p>
<select id="searches">
</select>
<br>
<br>
<button tyoe="button" id="submit">Go to list</button>
<script>
function addWebsite(name, url) {
var select = document.getElementById('searches');
var text = document.createTextNode(name);
var option = document.createElement("OPTION")
option.appendChild(text);
select.appendChild(option);
}
</script>
</body>
</html>
Now I am stuck and clueless, any suggestions
have you try to combine 2 onclick function () ??
<button onclick="function1(); function2()">
I have a html page which dynamically loads the contents of another html file into a div.
function loadHTML(url, id) {
req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = () => {
console.log(req.responseText);
document.getElementById(id).innerHTML = req.responseText;
}
}
I call loadHTML("/lib/header/header.html","header") which loads the contents of /lib/header/header.html into the div in the main html <div id="header"></div>
/lib/header/header.html
<script src="/lib/header/header.js"></script>
<link href="/lib/header/header.css" rel="stylesheet">
<header>
<object id="logo" data="/lib/global/Icon.svg"></object>
<span id="auth">
<span class="pair" id="login">
<p>Login</p>
</span>
<span class="pair" id="register">
<p>Register</p>
</span>
</span>
</header>
as you can see, the header.html file also includes a header.css and header.js file. The header.css file gets correctly loaded but the header.js file doesn't.
It's not even listed in the "Network" tab of Chrome developer tools.
I am completely clueless as to why this is happening.
Thanks in advance.
I have html page pulling data from another page using ajax.
The code works fine on firefox but gives an access denied on xhr.open("...")in IE and Chrome.
The sample code is as shown.
<!DOCTYPE html>
<html>
<head>
<script type="text/Javascript">
function changeContent(url)
{
var xhr = new XMLHttpRequest();
xhr.open("GET",url,false); //Access denied on this line
xhr.send();
var roster = document.getElementById("roster");
roster.innerHTML=xhr.responseText;
}
</script>
</head>
<body>
<img src=images/logo_990x80.png width=1300" height="80" />
<div class="buttonBar">
<input type="button" value="data" onclick="changeContent('data.html')"/>
</div>
<div id="roster" class="roster">
Click on the buttons above to choose a roster
</div>
</body>
</html>
The data.html contains a simple table with 2 rows of data.
How can I solve this issue.
Edit : Code shown below works on IE and firefox but still has the same issue in Chrome.It seems ActiveX works on local files for Ajax.
<!DOCTYPE html>
<html>
<head>
<script type="text/Javascript">
function changeContent(url)
{
var xhr = false;
if(location.protocol=="file:")
{
if(!xhr)try{ xhr=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xhr=false;}
if(!xhr)try{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xhr=false;}
}
else
{
if(!xhr)try{ xhr=new XMLHttpRequest(); }catch(e){xhr=false;}
}
xhr.open("GET",url,false); //Access denied on this line only in Chrome
xhr.send();
var roster = document.getElementById("roster");
roster.innerHTML=xhr.responseText;
}
</script>
</head>
<body>
<img src=images/logo_990x80.png width=1300" height="80" />
<div class="buttonBar">
<input type="button" value="data" onclick="changeContent('data.html')"/>
</div>
<div id="roster" class="roster">
Click on the buttons above to choose a roster
</div>
</body>
</html>
Any tips for chrome.
This is usually caused by trying to use XMLHTTPRequest without using an HTTP URI.
Firefox supports XHR over file: scheme URIs, most browsers do not.
Run your page through a web server if you want to use Ajax.
I am trying to transfer input from Javascript to PHP with AJAX but the input will not transfer.
Here is my JS code:
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid;}
div{background-color:blue;}
</style>
</head>
<body>
<div id="comments"> </div>
<br>
<span> Comment: </span> <input id="comment"> <button onclick="getInput()"> Submit Comment </button>
<script>
function getInput(){
var input = document.getElementById("comment").value;
addComment(input);
}
function addComment(input){
var request = new XMLHttpRequest();
request.open("GET","chatroom.php?i="+input,false);
request.send();
}
</script>
</body>
</html>
Here is my PHP Code:
<?php
$input = $_REQUEST["i"];
file_get_contents("chatext.txt",$input);
?>
The PHP code is executed, but the variable is not transferred.
did you mean file_put_contents("chatext.txt", $input)?
php.net/manual/en/function.file-put-contents.php