index.html

{% extends 'base.html' %}
{% block main %}
<section class="header" style="height: 100vh">
   <div class="container h-100 d-block">
      <div class="row justify-content-center align-items-center h-50">
         <div class="col-md-3">
            <img class="" id="tremdjovem-logo" src="static/img/logo-tremd-jovem.png" alt="Trem de Jovem">
         </div>
         <div class="col-md-7">
            <div class="input-group mb-3">
              <form method="get" action="/busca_interna/">
               <input id="search" name="search" type="text" class="form-control" placeholder="Pesquise aqui..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                 <div class="input-group-append">
                    <button id="id_yt" style="display:none" class="btn btn-outline-secondary" type="button">Vai!</button>
                    <button id="btn_yt" style="display:none" class="btn btn-outline-secondary" type="button">Vai!</button>
                    <button id="id_submit" type="submit" class="btn btn-success form-control"><span class="glyphicon glyphicon-search"></span>Search</button>
                 </div>
             </form>
            </div>
         </div>
      </div>
      <div class="row justify-content-center align-items-center h-50">
         <div class="col-md-12">
            <hr class="mt-3">
         </div>
         <div class="col-lg-2 text-center text-xl-left mb-4 mt-3">
            <h5>Tendência da semana</h5>
            <h2 id="trand-topic"><i>{{ tendencias.titulo }}</i></h2>
         </div>
         <div class="col-lg-7 mr-4 ml-4 mb-3">
            <!-- <p>{{ tendencias.frase }}</p>
            <!-- <p>{{ tendencias.frase }}</p>
         </div>
         <div class="col-sm-1 text-center text-xl-right">
            <a href="#">
               <div class="btn mb-4 mt-5" id="show_more">
                  VER MAIS
               </div>
            </a>
         </div>
      </div>
   </div>
</section>
{% endblock %}
{% block js %}

<script>
  // Clicar nos dois botoes
  $("#id_submit").on('click', function(e) {
    //e.preventDefault();
    $("#id_yt").click()
    $("#btn_yt").click()
  })

  // Clicar no botao do YouTube em segundo lugar.
  $("#id_yt").on('click', function(e) {
    $.ajax({
      url: '/load_yt/',
      success: function(response) {
        $("#results").html(response)
      },
      error: function(xhr){
        console.log('Falha na conexao.', xhr)
      }
    })
    e.preventDefault();
  })
</script>

{% endblock js%}