This will be hosted on a server, please make sure that ajax and json can be call
ID: 3726561 • Letter: T
Question
This will be hosted on a server, please make sure that ajax and json can be called.
What I need is:
Adding event listeners to Ajax calls.
AJAX call runs when a button is clicked.
• You need to add a button in the HTML for each of the menys
• You need to grab hold of that button and add an event listener to it.
• You need to wrap all the code relating to the XMLHttpRequest in a function (call it loadAjax).
Call your new HTML file menuButton.html but keep it pointing to menu.json.(partially done down below)
Next is making three AJAX calls using buttons
The first deliverable for the pub website page is a choice of three menus for given days (e.g. midweek, Saturday, Sunday). All of these will be accessed using an AJAX call and will be triggered by a click event.
To do this:
• Create JSON files for both. (done all three below)
• Incorporate them into your HTML, each making AJAX calls to the different files.
Add new buttons and new functions to trigger these AJAX calls.
Lastly:
Create three separate loadAjax functions for each of .json files.
The menus saved under :
Menu1.json
//weekday menu
{
"House Daily Soup" :
{
"Description":"House made – served with artisan bread and farm butter – mostly (V) please ask",
"Price":"£4.95"
},
"ANDY HOLT’S SATURDAY BLACK PUDDING" :
{
" Description ":"Bacon jam and soft poached egg",
"Price":"£5.75"
},
"SATURDAY GRAVLAX" :
{
" Description ":"Cured with beetroot and sea salt – caper & lemon dressing",
"Price":"£7.95"
},
"TEMPURA KING PRAWNS" :
{
" Description ":"Toasted corn chilli puree",
" Price":"£7.95"
},
"RARE BREED BABY BACK RIBS" :
{
" Description ":"Basted in black treacle – cola & chilli",
"Price":"£6.50"
}
}
Menu2.json
//Saturdays menu
{
"Lamb duo" :
{
"Description":"Pan-fried lamb rump and a Cheddar topped shepherd’s pie with seasonal vegetables and a red wine jus”
"Price":"£4.95"
},
"Steak and mushroom pie " :
{
" Description ":"Slow cooked beef with a red wine sauce, topped with puff pastry, served with mash, seasonal vegetables and a jug of gravy",
"Price":"£5.75"
},
"Roasted vegetable tart" :
{
" Description ":"Kale and thyme pastry filled with butternut squash, plum tomatoes, red onion, spinach and red peppers, with a leek sauce",
"Price":"£7.95"
},
"Chicken and thyme pie”:
{
" Description ":"In a creamy chenin blanc sauce, topped with puff pastry, served with spring onion mash and seasonal vegetables",
" Price":"£7.95"
},
"Yorkshire ham and free range eggs" :
{
" Description ":"with triple-cooked chips",
"Price":"£6.50"
}
}
Menu3.json
// Sundays menu
{
"Fish and chips" :
{
"Description":"beer-battered, line-caught cod with triple-cooked chips, mushy peas and tartare sauce”
"Price":"£4.95"
},
"Seared fillet of sea bass " :
{
" Description ":"with crushed baby potatoes, asparagus and a lobster and samphire sauce",
"Price":"£5.75"
},
"Pizza:Meat Feast" :
{
" Description ":"Chicken, pork and fennel sausage, crispy bacon, mozzarella and a red onion chutney",
"Price":"£7.95"
},
"Pizza- roasted vegetable”:
{
" Description ":"red pepper, butternut squash, red onion, spinach and mozzarella(V)",
" Price":"£7.95"
},
"Spicy diablo" :
{
" Description ":"Pepperoni, chorizo, guindilla chill peppers, ozarella and a chipotle chilli jam",
"Price":"£6.50"
}
}
menu.html
<!DOCTYPE html>
<title>AJAX and JSON</title>
<h2>Menu</h2>
<ul id="menu"></ul>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'menu1.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var albums = JSON.parse(request.responseText);
var output = " ";
for (var key in menu) {
output += "<li> <em>" + key + "</em>, " + menu1[key]["Description"] + ", " + menu1[key]["Price"] + " </li>";
}
var update = document.getElementById('menu');
update.innerHTML = output;
}
}
request.send();
</script>
<!DOCTYPE html>
<title>AJAX and JSON</title>
<h2>Menu</h2>
<ul id="menu2"></ul>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'menu2.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var albums = JSON.parse(request.responseText);
var output = " ";
for (var key in menu) {
output += "<li> <em>" + key + "</em>, " + menu2[key]["Description"] + ", " + menu2[key]["Price"] + " </li>";
}
var update = document.getElementById('menu2');
update.innerHTML = output;
}
}
request.send();
</script>
<!DOCTYPE html>
<title>AJAX and JSON</title>
<h2>Menu</h2>
<ul id="menu3"></ul>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'menu3.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var albums = JSON.parse(request.responseText);
var output = " ";
for (var key in menu) {
output += "<li> <em>" + key + "</em>, " + menu3[key]["Description"] + ", " + menu3[key]["Price"] + " </li>";
}
var update = document.getElementById('menu3');
update.innerHTML = output;
}
}
request.send();
</script>
menuButton.html
<!DOCTYPE html>
<title>Timer</title>
<p>Click the button to start or stop the timer. </p>
<form>
<input type="button" id="button" value="start counter">
</form>
<h1 id="output"></h1>
<script>
var button = document.getElementById("button");
var output = document.getElementById("output");
button.addEventListener("click", clickHandler, false);
var counter = 1;
var displayCount = function () {
output.innerHTML = counter;
counter++;
};
var intervalId = null;
function clickHandler()
{
if (button.value == "start counter"){
intervalId = setInterval(displayCount, 1000);
button.setAttribute("value","stop counter");
return;
}
else {
clearInterval(intervalId);
button.setAttribute("value","start counter");
return;
}
}
</script>
Explanation / Answer
Menu1.json
{
"House Daily Soup" :
{
"Description":"House made – served with artisan bread and farm butter – mostly (V) please ask",
"Price":"£4.95"
},
"ANDY HOLT’S SATURDAY BLACK PUDDING" :
{
"Description":"Bacon jam and soft poached egg",
"Price":"£5.75"
},
"SATURDAY GRAVLAX" :
{
"Description":"Cured with beetroot and sea salt – caper & lemon dressing",
"Price":"£7.95"
},
"TEMPURA KING PRAWNS" :
{
"Description":"Toasted corn chilli puree",
"Price":"£7.95"
},
"RARE BREED BABY BACK RIBS" :
{
"Description":"Basted in black treacle – cola & chilli",
"Price":"£6.50"
}
}
Menu2.json
{
"Lamb duo" :
{
"Description":"Pan-fried lamb rump and a Cheddar topped shepherd’s pie with seasonal vegetables and a red wine jus" ,
"Price":"£4.95"
},
"Steak and mushroom pie " :
{
"Description":"Slow cooked beef with a red wine sauce, topped with puff pastry, served with mash, seasonal vegetables and a jug of gravy",
"Price":"£5.75"
},
"Roasted vegetable tart" :
{
"Description":"Kale and thyme pastry filled with butternut squash, plum tomatoes, red onion, spinach and red peppers, with a leek sauce",
"Price":"£7.95"
},
"Chicken and thyme pie" :
{
"Description":"In a creamy chenin blanc sauce, topped with puff pastry, served with spring onion mash and seasonal vegetables",
"Price":"£7.95"
},
"Yorkshire ham and free range eggs" :
{
"Description":"with triple-cooked chips",
"Price":"£6.50"
}
}
Menu3.json
{
"Fish and chips" :
{
"Description":"beer-battered, line-caught cod with triple-cooked chips, mushy peas and tartare sauce",
"Price":"£4.95"
},
"Seared fillet of sea bass " :
{
"Description":"with crushed baby potatoes, asparagus and a lobster and samphire sauce",
"Price":"£5.75"
},
"Pizza:Meat Feast" :
{
"Description":"Chicken, pork and fennel sausage, crispy bacon, mozzarella and a red onion chutney",
"Price":"£7.95"
},
"Pizza- roasted vegetable" :
{
"Description":"red pepper, butternut squash, red onion, spinach and mozzarella(V)",
"Price":"£7.95"
},
"Spicy diablo" :
{
"Description":"Pepperoni, chorizo, guindilla chill peppers, ozarella and a chipotle chilli jam",
"Price":"£6.50"
}
}
menuButton.html
<!DOCTYPE html>
<title>Menu</title>
<p>Click the button to get menu. </p>
<form>
<input type="button" id="button_today" value="Click here for today's menu">
<input type="button" id="button_saturday" value="Click here for saturday's menu">
<input type="button" id="button_sunday" value="Click here for sunday's menu">
</br></br>
<ul id="menu"></ul>
</form>
<script>
document.getElementById("button_today").addEventListener("click", clickToday, false);
document.getElementById("button_saturday").addEventListener("click", clickSaturday, false);
document.getElementById("button_sunday").addEventListener("click", clickSunday, false);
function clickToday()
{
var request = new XMLHttpRequest();
request.open('GET', 'Menu1.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var menus = JSON.parse(request.responseText);
var output = " ";
for (var key in menus) {
output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";
}
var update = document.getElementById('menu');
update.innerHTML = output;
}
}
request.send();
}
function clickSaturday()
{
var request = new XMLHttpRequest();
request.open('GET', 'Menu2.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var menus = JSON.parse(request.responseText);
var output = " ";
for (var key in menus) {
output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";
}
var update = document.getElementById('menu');
update.innerHTML = output;
}
}
request.send();
}
function clickSunday()
{
var request = new XMLHttpRequest();
request.open('GET', 'Menu3.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var menus = JSON.parse(request.responseText);
var output = " ";
for (var key in menus) {
output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";
}
var update = document.getElementById('menu');
update.innerHTML = output;
}
}
request.send();
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.