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

Question

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

To prepend an html code from javascript in HTML

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

I can advice you a googling directions: addEventListener, appendChild. — Lazyexpert
– Lazyexpert, Commented Aug 18, 2016 at 10:02
I think this could be re-factored quite a bit, what you could do would be just to have 1 call to the api to get all data and append it to the page on first load, then when you click the offline button you would then check the text in the last column, and if it doesn't == offline then you can just use .hide(); to set it to display none. — Nick R
– Nick R, Commented Aug 18, 2016 at 10:02
I was curious to find a way in this case . I will try the smarter way that you've told me ... but It will unlock many curiosity if I will find a way in this example — Adrian Gheorghe
– Adrian Gheorghe, Commented Aug 18, 2016 at 10:14

Nick R · Accepted Answer · 2016-08-18 10:26:19Z

2

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

answered Aug 18, 2016 at 10:26

Nick R

7,8142 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Gheorghe Over a year ago

Thank you Nick R ! In few days I will come back with an updated version of this code as you said .

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related