Why my jquery hide and show methods are not working for online offline link

Question

I have small app that displays twitchTV channels and users. When I click on "online" link, only online users are display. and the same goes when I click on "offline" link. (navigation var) the problem is I don't see the the logic taking effect on the page. What am I missing? thanks

var status;
var names = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
var url = "https://wind-bow.gomix.me/twitch-api/";

$(document).ready(function() {
  $("#allusers").click(function() {
    $("#onlineuser").show();
    $("#offlineuser").show();
  });
  $("#online").click(function() {
    $("#onlineuser").show();
    $("#offlineuser").hide();

  });
  $("#offline").click(function() {
    $("#offlineuser").show();
    $("#onlineuser").hide();
  });
  getData();
});

function getData() {
  //for every single stream/channel a url need build
  for (var i = 0; i < names.length; i++) {
    getStreams(url, "streams", names[i]);
    getChannel(url, "channels", names[i]);
  }
}

//getting stream status json data
function getStreams(url, type, name) {
  url += '/' + type + '/' + name + '?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {
    console.log(data);
    if (data.stream !== null) {
      status = "online";
      // console.log(data);
    } else {
      status = "offline";
    }
  });
}

//getting channel json data
function getChannel(url, type, name) {
  url += type + '/' + name + '?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {
    // console.log(data);
    var output = document.getElementById("output");
    var logo = data.logo;
    var title = data.status;
    var channel = data.url;
    // console.log(logo +", "+title+", "+channel);
    //formatting individual channels

    output.innerHTML += '<div id="' + status + 'user" class="channel row user-data"><div ><img id="logo" src="' + logo + '"></div><a href="' + channel + '" target="_blank"><h5 id="user">' + name + '</h5></a><div class="col-md-2 user-data"><strong>' + status + '</strong></div><div id="title" class="col-md-5 user-data">' + ((title.length > 40) ? title.substring(0, 40).concat("...") : title) + '</div></div>';
  });
}

body {
  background-color: #445f44;
}

.user-data {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  color: black;
  font-size: 17px;
  background-color: white;
  opacity: 0.5;
  margin-bottom: 5px;
}

#header {
  background-color: #333854
}

#user {
  font-size: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

img {
  width: 50px;
  height: 50px;
  border-radius: 300px;
  border-color: green;
  border-width: 1px;
  border-style: solid;
}

.border {
  border-style: solid;
  border-width: 1px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container ">
  <div id="header" class="jumbotron" id="header">
    <h1 class="text-center" style="color: black;">TwitchTV Streamers</h1>
    <ol class="breadcrumb">
      <li class="active"><a id="allusers" href="#"><strong>All Users</strong></a></li>
      <li><a id="online" href="#"><strong>Online</strong></a></li>
      <li><a id="offline" href="#"><strong>Offline</strong></a></li>
    </ol>
  </div>
  <!-- output here!   -->
  <div class="row">
    <div id="output" class="col-lg-12">
    </div>
  </div>
</div>

Is jquery the first file loading on your page? Your error message "Uncaught ReferenceError: $ is not defined" means it can't find your jquery file — MalcolmInTheCenter, Jul 04 '17 at 21:29
edited the stacksnippet to include jQuery, seems to load ok now. The version in the codepen actually seems to work as you say you want it to? — ADyson, Jul 04 '17 at 21:43
You might need to use a promise. You're calling getStreams and getChannels and each of these functions are doing a GET request. getStreams doesn't wait until a response is returned to continue executing your code. It immediately starts executing getChannels. — MalcolmInTheCenter, Jul 04 '17 at 21:45
could you be more esplicit?.. do getStreams and getChannels execute when online or offline is clicked? do the page gets refresh? when this links are clicked.. is there a better way to achieve this? — miatech, Jul 04 '17 at 21:49
Your code works but it's asynchronous since you're calling the twitch api. I think you're confused thinking that you're code is executed sequentially but its not. Read this.https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean while getStreams is waiting for a response from the API your code has already moved on to executing the code in getChannels and while getChannels is waiting for a response from the API your code is already on the next loop in your for loop. — MalcolmInTheCenter, Jul 04 '17 at 21:51
it's calling the twitch api when the page loads, but not when online / offline links are clicked.. or am I missing somthing? — miatech, Jul 04 '17 at 21:53

score 1 · Accepted Answer · answered Jul 04 '17 at 21:56

Seems like you are trying to use an id to target multiple elements, try using classes instead.

ex:

$("#online").click(function(){
  $(".onlineuser").show();
  $(".offlineuser").hide();
});

output.innerHTML += '<div class="'+status+'user channel row user-data"><div ><img id="logo" src="'+logo+'"></div><a href="'+channel+'" target="_blank"><h5 id="user">'+name+'</h5></a><div class="col-md-2 user-data"><strong>'+status+'</strong></div><div id="title" class="col-md-5 user-data">'+((title.length > 40) ? title.substring(0, 40).concat("...") : title)+'</div></div>';

Link to a codepen with these changes: https://codepen.io/anon/pen/awKBEM

yes, you're absolutely right?... I think that's the problem... hold on! — miatech, Jul 04 '17 at 21:56

Why my jquery hide and show methods are not working for online offline link

1 Answers1