$ .GetJSON request not working on button click
Hey guys, I tried to find a solution to this problem, I'm at a loss now. I am trying to gather information about streams using the twitch API.
I can get a .getJSON request, when I pass in an array of usernames, it returns null if the user is disconnected or invalid.
$(document).ready(function() {
var streamers = ["ESL_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","meteos","c9sneaky","JoshOG"];
var url = "https://api.twitch.tv/kraken/streams/";
var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";
getInitialStreams(streamers, url, cb); //load hard-coded streams
});
function getInitialStreams(streamers, url, cb) {
//loop through the streamers array to add the initial streams
for (var i = 0; i < streamers.length; i++) {
(function(i) {
$.getJSON(url + streamers[i] + cb, function(data) {
//If data is returned, the streamer is online
if (data.stream != null) {
console.log("online");
} else {
console.log("offline");
}
});
})(i);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
<button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>
However, when I try to call the API through the click function (eventually pulling any input through the form) .getJSON fails. As shown below.
$(document).ready(function() {
var url = "https://api.twitch.tv/kraken/streams/";
var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";
$("#addStreamerBtn").click(function(e) {
addStreamer("Ben", url, cb);
});
});
function addStreamer(streamer, url, cb) {
console.log("I'm inside the function");
$.getJSON(url + streamer + cb, function(data) {
console.log("WE DID IT");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
<button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>
I don't understand why the code won't work for the second snippet. Any guidance would be greatly appreciated.
source to share
The problem is that you hooked up to the click
submit button event . This means it form
dispatches on your AJAX request, so the page is immediately unloaded and the AJAX is canceled.
To fix this, hook into the event submit
form
and call preventDefault()
on the event. Try the following:
$(document).ready(function() {
var url = "https://api.twitch.tv/kraken/streams/";
var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";
$(".form-inline").submit(function(e) {
e.preventDefault();
addStreamer("Ben", url, cb);
});
});
function addStreamer(streamer, url, cb) {
console.log("I'm inside the function");
$.getJSON(url + streamer + cb, function(data) {
console.log("WE DID IT");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
<button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>
source to share