CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian Gheorghe
Adrian Gheorghe

Reputation: 677

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

Upvotes: 2

Views: 920

Answers (1)

Nick R
Nick R

Reputation: 7784

  $('.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

Upvotes: 2

Related Questions