I'm attempting to grab Twitter posts using the API and have found the following code in a tutorial:
tweets.js
$(function(){
$.ajax({
url: 'get_tweets.php',
type: 'GET',
success: function(response) {
if (typeof response.errors === 'undefined' || response.errors.length < 1) {
var $tweets = $('<ul></ul>');
$.each(response, function(i, obj) {
$tweets.append('<li>' + obj.text + '</li>');
});
$('.tweets-container').html($tweets);
} else {
$('.tweets-container p:first').text('Response error');
}
},
error: function(errors) {
$('.tweets-container p:first').text('Request error');
}
});
});
I'm calling it using this HTML, which I've modified slightly from the original, so it's now calling the latest, validated version of jQuery from the official site:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Twitter v1.1 API - A JavaScript and PHP Solution</title>
</head>
<body>
<div class="tweets-container">
<p>Loading...</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<script src="js/tweets.js"></script>
</body>
</html>
However, when I load this into the browser I get the following error:
TypeError: $.ajax is not a function
Things I've tried:
- Checked if the ajax call changed since the code was originally written: looking through the API docs and it looks like the syntax is still valid.
- Took away the function wrapper.
Wrapped the whole thing in
$(document).ready(function() {...});Moved the scripts tag further up the body and even into the
<head>section in case jQuery wasn't being properly loaded.
but nothing seems to work and I get the exact same error every time.