More Genres
No Artists Found
More Artists
Load All
No Albums Found
More Albums
Load All
No Tracks Found
Genre not found
Artist not found
Album not found
Search results not found
Song not found
8
Ralph Whitbeck & Elijah Manor Lyrics
No lyrics text found for this track.
The lyrics are frequently found in the comments by searching or by filtering for lyric videos
The lyrics are frequently found in the comments by searching or by filtering for lyric videos
BE BE
First, I've been following your video, and it's 2018. Great teaching. Thank you!
For total beginners like me who are watching this video wonder about the backend file. To just first grab the concept of Ajax, we can skip the API part and just create a .json file and type in an array of object:
so in the "orders.json" file we have:
[
{
"id": 1,
"name": "James",
"drink": "Coffee"
},
{
"id": 2,
"name": "John",
"drink": "Latter"
}
]
and in the main.js file we just adjust the pathname at the url: 'orders.json' the rest of the code the same. ;)
Friday Corp
api.orders is a simple json file with some data
[
{
"id": 1,
"appName":"First App",
"nrUsers":"12"
},
{
"id": 2,
"appName":"Second App",
"nrUsers":"122"
}
]
Brandon Harwood
For those who want it, I haven't really started but to get the base static HTML and CSS Setup, I also linked normalize.css, copied the HTML seen on screen, and wrote this CSS to get a close example of what it looks like. I'm still pretty new so this probably isn't the best or prettiest CSS, but here y'all are:
body {
padding-left:5em;
}
#orders li {
background-color: #e3e3e3;
margin-bottom: .5em;
padding-bottom: .4em;
padding-top: .4em;
padding-left: .4em;
margin-right: 20em;
list-style-type: none;
margin-left: -45px
}
Brandon Harwood
And here's the HTML seen on screen (at least at the beginning of the video). Note, you may need to link to different jquery and js files depending on your document setup:
<!doctype html>
<html class="no-js" lang="">
<head>
<title>Jquery Ajax Tutorial</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Jquery Ajax Tutorial</h1>
<h2>Coffee Orders</h2>
<ul id="orders">
<li>Name: John, Drink: Coffee</li>
<li>Name: John, Drink: Coffee</li>
</ul>
<h4>Add a Coffee Order</h4>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add-order">Add!</button>
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Baseball Card Analysis
First of all thank you for this tutorial. I have done some GETs but never any POSTs. I would like to make a couple suggestions for individuals doing it in a slightly different way. First of all I think you should have gone into more detail with the JSON. I'm not sure if you have json tutorials, but the whole url structure confused me. I just made a simple json file with your data. Then I attempted url: '/files/theme/orders.json'. It wouldn't work and instead of an object it returned a string. I then figured out to add this directly after: dataType: 'json'. So my total structure is $(function(){
var orders2 = $("#orders")
$.ajax({
type: 'Get',
url: '/files/theme/orders.json',
dataType: 'json',
success: function(data){
var theOrders = data.order;
$.each(theOrders, function(i, ordering){
orders2.append("<li>name: " + theOrders[i].name + ', drink: '+ theOrders[i].drink + '</li>')
});
}
});
});
As you can see I did it in a slightly different way because I didn't know what the API you mentioned was all about. I'll be moving on to the next video now.
Baseball Card Analysis
@Sasha Loobkoff I actually did more of an array type:
{
"order": [
{
"id": 1,
"name": "James",
"drink": "Coffee"
},
{
"id": 2,
"name": "John",
"drink": "Latte"
}
]
}
Not sure how important the difference is, that's just how I've done JSON. I'm having difficulties getting the next tutorial working correctly. Most server side stuff is new to me.
Sasha Loobkoff
omg... finally got it. my orders.json file was malformed / bad syntax. evidently you need quotes around the keys. i tried single quotes for fun... they didn't work.
is this consistent with your experience?
here is the corrected orders.json file:
[
{
"id": 1,
"name": "Will",
"drink": "Americano"
},
{
"id": 2,
"name": "Sasha",
"drink": "Coffee"
}
]
Charles Loehle
How to make the api/orders work: 1. create a new file in your website directory called orders.json, 2. paste this into it and save (it has to have quotes around the keys and values except for integers)
[
{
"id": 1,
"name": "James",
"drink": "Coffee"
},
{
"id": 2,
"name": "Laura",
"drink": "Vanilla Mocchiato"
}
]
3. the ajax url "your file path goes here/orders.json"
Hope this helps somebody!!!!
nvma
You're like super cool, man. Absolutely amazing tutorials with a great positive vibe to them. I wish I found this when I were learning the bases, I will make sure to recommend your stuff.
LearnCode.academy
Thanks! I appreciate it. Yeah, I'm doing these mostly, because I wish I had someone show me this stuff when I was starting out...would have saved YEARS.
Chris Stephens
Thanks, these tutorials were pitch perfect for what I needed (a refresher after some years out of the web dev world). Cheers.
C M
This was exactly what I needed to understand how routing and RESTful APIs work. Thank you!
Unigazer
Every single code you typed, you explained it very easy. Thank you!
Psy Vegas
very clear and precise tutorial I've seen. thanks!
BE BE
First, I've been following your video, and it's 2018. Great teaching. Thank you!
For total beginners like me who are watching this video wonder about the backend file. To just first grab the concept of Ajax, we can skip the API part and just create a .json file and type in an array of object:
so in the "orders.json" file we have:
[
{
"id": 1,
"name": "James",
"drink": "Coffee"
},
{
"id": 2,
"name": "John",
"drink": "Latter"
}
]
and in the main.js file we just adjust the pathname at the url: 'orders.json' the rest of the code the same. ;)
Rajmond Jánó
For me that just leads to the following warning (and doesn't get the data):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///<filepath>. (Reason: CORS request not http).
dedric132
You explained this so well. I have been struggling with ajax but now I really understand it with your video. Thanks!
LearnCode.academy
awesome, thanks a ton! That's great to hear.