Issue: index.html works fine. I can click on button, but nothing in infodiv changes. So the Ajax code is broken!
Files location: I run the files on my desktop visual studio code. All images are inside img folder. img folder, all the html files, ajax.js are inside Ajax folder
How I run the program: I click index.html and choose "open in default browser" like how i run all other html files. Tried to search for if there is some commands needed in terminal to run ajax, since like no need - run regularly
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="intial-scale=1,width=device-width">
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<title>Ajax</title>
</head>
<body>
<h2>Ajax Test</h2>
<div id="infodiv">
Information goes here
</div>
<div>
<form>
<select name="staff" onchange="cs50Info(this.value);">
<option value="">Select A Dog:</option>
<option value="golden">Golden Retriver</option>
<option value="bernese">Bernese Mountain Dog</option>
<option value="samoyed">Samoyed</option>
<option value="husky">Husky</option>
</select>
</form>
</div>
</body>
</html>
ajax.js
function cs50Info(name)
{
//deal with the situation where nothing is chosen
if (name === "")
return;
// create a new AJAX object
var ajax= new XMLHttpRequest();
// change content inside the infodiv
ajax.onreadystatechange = function() {
if (ajax.readyState === 4 && ajax.status === 200) {
$('infodiv').html(ajax.responseText);
}
}
//open the requested file and going to update just the infodiv
ajax.open('GET', name + '.html', true);
ajax.send();
}
golden.html example: (all other ones are similar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="intial-scale=1,width=device-width">
<title>Dogs</title>
</head>
<body>
<p>Golden Retriver</p>
<img src="img/golden.jpeg">
<p>Golden Fluffy Retriever</p>
<p>So Adorable!</p>
</body>
</html>
golden.htmlis not a "snippet" (at 11:15). Use the browser console and debugger to get eyes on what is happening. Perhaps check out [AJAX Introduction}(w3schools.com/xml/ajax_intro.asp) at W3 schools.