Adrian Gheorghe Adrian Gheorghe - 3 months ago 8
Javascript Question

Adding html content from javascript, and changing it in html on button click

I'm working at a twitch.tv online stream , and i'm tryin' :



  1. To prepend an html code from javascript in HTML

  2. To put the content called from javascript , in a div with id="followerInfo" , and change the content every time when i press the buttons (depends on type of data called by that buttons)


    • . When I press the button all , it must show me all the tv streams , same for online - online streams and also with offline btn

    • . and the most important , to understand what am I doing here, not only to copy paste a code...





I'm stuck here .. I'm a self-taught (tryin' to be programmer) and implicitly a newbie in this field, but I want to learn that's why I'm asking you for a little help , if you can also explain me a little bit how to do it.

<div class="row second text-center">

<div class="col-md-4 btn btn-info" id="all">
All
</div> <!-- Online -->
<div class="col-md-4 btn btn-success" id="online">
Online
</div> <!-- Online -->
<div class="col-md-4 btn btn-danger" id="offline">
Offline
</div> <!-- Offline -->

</div>

<div id="followerInfo" style="margin-top:50px;">
</div>


for button All

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");


for button offline

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");


for button online

$("#followerInfo").prepend("<div class='row'>" +
"<div class='col-md-4'>" + "<a href='" + ur_l +
"' target='_blank'><img src='" + logo + "'></a>" +
"</div>" +
"<div class='col-md-4'>" + name + "</div>" +
"<div class='col-md-4'>" + status + "</div></div>");


If it will help you to understand better my code , here is the codepen link

http://codepen.io/queky18/pen/BzbpwV

Answer
  $('.second div').on('click', function(e) {

      e.preventDefault();

      var status = $(this).attr('id'), // get the id of the status button clicked on.
          followerRow = $('#followerInfo .row'),
          statusColumn = $('#followerInfo .col-md-4:last-child');

    statusColumn.each(function(){// check the text in the last column of each row

          if (status == "all") { // for the show all button.
              followerRow.show();
          } else {
              if ($(this).text().toLowerCase() != status) { // convert text to lowercase and compare with status
                  $(this).parent().hide(); // gets the parent div of the last column, which would be the row and hide it.
              } else {
                  $(this).parent().show(); // otherwise we show the row.
              }
          }
      });
  });

This should work with your current code, but as mentioned, it's probably worth the time to go through and re-factor your code if you start to see duplication.

See an updated version here - http://codepen.io/anon/pen/PzLALa

Comments