JS function does not execute - $ is not defined

Asked

Viewed 330 times

-1

Good morning to all ,

I started studying javascript recently and I have a problem that I could not solve.

Goes down:

I have a page that I’m doing like a quiz.

Follow the full page code:

$(document).ready(
  function() {

    function loop_html(id_1, id_2, resposta_1, resposta_2, link_1, link_2, qtd) {
      var id = []; //crio o array 'id'
      id[1] = id_1; //atribuo o valor de ao primeiro array
      id[2] = id_2; //atribuo o valor de ao segundo array

      var resposta = []; //crio o array 'resposta'
      resposta[1] = resposta_1; //atribuo o valor de ao primeiro array
      resposta[2] = resposta_2; //atribuo o valor de ao segundo array

      var link = []; //crio o array 'link'
      link[1] = link_1; //atribuo o valor de ao primeiro array
      link[2] = link_2; //atribuo o valor de ao segundo array

      var pt_1 = []; //crio o array
      var pt_2 = []; //crio o array
      var pt_3 = []; //crio o array
      var pt_4 = []; //crio o array
      var pt_5 = []; //crio o array
      var pt_6 = []; //crio o array
      var html = []; //crio o array

      for (i = 1; i <= qtd; i++) { //aqui , eu crio os botoes que terao as opções de escolha do usuario

        pt_1[i] = '<div class="col-md-4 col-md-offset-1" id="id_botao_' + i + '">';
        pt_2[i] = '<div class="dashboard-stat red-thunderbird" id="local_resposta">';
        pt_3[i] = '<a href="' + link[i] + '" id="link_' + i + '">';
        pt_4[i] = '<button type="button" class="botao color' + i + '" id="btn_resposta_' + i + '" value="' + id[i] + '">';
        pt_5[i] = '<span id="texto_botao">' + resposta[i] + '</span>';
        pt_6[i] = '</button> </a> </div> </div>';

        html[i] = pt_1[i] + pt_2[i] + pt_3[i] + pt_4[i] + pt_5[i] + pt_6[i];

        document.getElementById("div_botoes_" + i).innerHTML = html[i];
      }

    }

    function frase_script_primeira_execucao() {

      jQuery.ajax({
        url: "/admin2/controllers/pegar_frase_script.php?id_frase=1", //URL de destino
        dataType: "json", //Tipo de Retorno
        success: function(json) {

          var id_1 = (json.id_1); //joga o retorno json na variavel id_1
          var id_2 = (json.id_2); //joga o retorno json na variavel id_2
          var link_1 = (json.link_1); //pega o retorno e joga na variavel link_1
          var link_2 = (json.link_2); //pega o retorno e joga na variavel link_2
          var resposta_1 = (json.resposta_1); //pega o retorno e joga na variavel resposta_1
          var resposta_2 = (json.resposta_2); //pega o retorno e joga na variavel resposta_2
          var qtd = (json.qtd_botao); ////pega o retorno e joga na variavel qtd_1

          $('#pergunta').html(json.frase); //cria o HTML com o json "frase" 

          loop_html(id_1, id_2, resposta_1, resposta_2, link_1, link_2, qtd); //passa os valores para a funcao "loop_html"
        }
      });
    }

    function frase_script(id) { //mando requisiçao para pagina , para pegar os dados e serem exibidos
      jQuery.ajax({
        url: "/admin2/controllers/pegar_frase_script.php?id_frase=" + id, //URL de destino
        dataType: "json", //Tipo de Retorno
        success: function(json) {

          var id_1 = (json.id_1); //joga o retorno json na variavel id_1
          var id_2 = (json.id_2); //joga o retorno json na variavel id_2
          var link_1 = (json.link_1); //pega o retorno e joga na variavel link_1
          var link_2 = (json.link_2); //pega o retorno e joga na variavel link_2
          var resposta_1 = (json.resposta_1); //pega o retorno e joga na variavel resposta_1
          var resposta_2 = (json.resposta_2); //pega o retorno e joga na variavel resposta_2
          var qtd = (json.qtd_botao); ////pega o retorno e joga na variavel qtd_1

          $('#pergunta').html(json.frase); //cria o HTML com o json "frase" 

          loop_html(id_1, id_2, resposta_1, resposta_2, link_1, link_2, qtd); //passa os valores para a funcao "loop_html"
        }
      });
    }

    $("#btn_resposta_1").click( //ao clicar no botao 01 , executa a funcao
      function() {
        var id = $("#btn_resposta_1").val(); //pega o valor do botao
        frase_script(id); //chama a funcao que pega a frase , informando o ID da proxima frase
      }
    );

    $("#btn_resposta_2").click( //ao clicar no botao 02 , executa a funcao
      function() {
        var id = $("#btn_resposta_2").val(); //pega o valor do botao
        frase_script(id); //chama a funcao que pega a frase , informando o ID da proxima frase
      }
    );

    frase_script_primeira_execucao(); //chama a funcao que pega a 1 frase na execuçao do script


    var efeitos = ['slideToggle', 'slideDown', 'fadeToggle', 'fadeIn']; //array com tipos de efeito toogle

    function embaralhar_efeito(o) { //funcao que embaralha e retorna um efeito
      for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o[0]; //O [0] faz retornar somente o 1 array
    }

    function efeito_pergunta(efeitos) { // o (efeitos) é a variavel que recebe o valor do array com os efeitos jquery

      var efeito_toogle = embaralhar_efeito(efeitos); //aciona a funcao que embaralha os efeitos
      $("#div_pergunta")[efeito_toogle](500); //atribui o efeito toogle a div "div_pergunta"
    }

    function efeito_botao_1(efeitos) { // o (efeitos) é a variavel que recebe o valor do array com os efeitos jquery

      var efeito_toogle = embaralhar_efeito(efeitos); //aciona a funcao que embaralha os efeitos
      $("#id_botao_1")[efeito_toogle](500); //atribui o efeito toogle a div "id_botao_1"
    }

    function efeito_botao_2(efeitos) { // o (efeitos) é a variavel que recebe o valor do array com os efeitos jquery

      var efeito_toogle = embaralhar_efeito(efeitos); //aciona a funcao que embaralha os efeitos
      $("#id_botao_2")[efeito_toogle](500); //atribui o efeito toogle a div "id_botao_1"
    }

    function efeito_set_time_out(){ //funcao que chama a funcoes acima , ordenadamente
	setTimeout(
		function(){	
			
			efeito_pergunta(efeitos); // "efeitos" é a variavel que contem os array 
			
			setTimeout(
				function(){
					
					efeito_botao_1(efeitos); // "efeitos" é a variavel que contem os array 
					
					setTimeout(
						function(){	
						
							efeito_botao_2(efeitos); // "efeitos" é a variavel que contem os array
							
							setTimeout(
								function(){	
						
								efeito_botao_3(efeitos); // "efeitos" é a variavel que contem os array 
								
								setTimeout(
									function(){	
						
									efeito_botao_4(efeitos); // "efeitos" é a variavel que contem os array 
								}, 500);//efeito botao_4
							}, 500);//efeito botao_3
						}, 500);//efeito_botao_2
				}, 500);//efeito_botao_1
			},500);//efeito pergunta
			
	}//main function efeito_set_time_out

    efeito_set_time_out(); //chama a funcao de controle de tempo

    $("#btn_resposta_1").click( //ao clicar no botao 01 , executa a funcao
      function() {

        $("#div_pergunta").slideUp(500); //efeito toogle que sobe a div de pergunta
        $("#id_botao_1").slideUp(500); //efeito toogle que sobe a div do botao 01
        $("#id_botao_2").slideUp(500); //efeito toogle que sobe a div do botao 02
        efeito_set_time_out();
      }
    );

    $("#btn_resposta_2").click( //ao clicar no botao 02 , executa a funcao
      function() {

        $("#div_pergunta").slideUp(500); //efeito toogle que sobe a div de pergunta
        $("#id_botao_1").slideUp(500); //efeito toogle que sobe a div do botao 01
        $("#id_botao_2").slideUp(500); //efeito toogle que sobe a div do botao 02
        efeito_set_time_out();
      }
    );

  });
.botao {
  padding: 4px 11px;
  border: 1px solid #ffcc00;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  width: 100%;
  height: 70px;
  font-size: 30px;
  font-family: "Segoe UI";
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 #666;
  box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
  cursor: pointer;
  position: relative;
}
.color1 {
  background-color: red !important;
}
.color2 {
  background-color: blue !important;
}
.color3 {
  background-color: green !important;
}
.color1:hover {
  box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(#ff6600)) !important;
}
.color2:hover {
  box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
  background: -webkit-gradient(linear, left top, left bottom, from(blue), to(#ff6600)) !important;
}
.color3:hover {
  box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
  background: -webkit-gradient(linear, left top, left bottom, from(green), to(#ff6600)) !important;
}
.botao:active {
  box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
  top: 2px
}
.botao a,
.botao a:active,
.botao a:hover,
.botao a:visited {
  color: #fff;
  text-shadow: 0 1px 0 #666;
}
#local_resposta {
  border-radius: 40px!important;
}
.number {
  text-align: center;
  font-size: 15px;
  color: black;
  font-weight: bold;
  padding-right: 30px;
  padding-top: 15px;
}
#div_pergunta,
#id_botao_1,
#id_botao_2 {
  display: none;
}
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<div class="portlet box red">
  <div class="portlet-title">
    <div class="caption">
      <i class="fa fa-globe"></i>Perguntas
    </div>
  </div>

  <div class="portlet-body">

    <div class="row">
      <div class="col-md-12">

        <div class="col-md-9 col-md-offset-1">
          <div class="dashboard-stat orange" style="border-radius:20px!important;" id="div_pergunta">
            <div class="visual">

            </div>
            <div class="detail">
              <div class="number">
                <span id="pergunta"></span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-md-12">

        <span id="div_botoes_1"></span>
        <span id="div_botoes_2"></span>
        <span id="div_botoes_3"></span>	

      </div>
      <!-- :: COL MD 12 -->
    </div>
    <!-- ::ROW :: -->
  </div>
</div>

My problem ,started when I created the "loop_html" function, which creates the buttons automatically. When I started to do it ,I created the buttons manually,but there are questions that can have 2 answers and questions that can have 4 answers, that is, it is dynamic , so I can’t create the buttons manually because I don’t know how many will be needed.

When I click the buttons , it was to call some functions , but I do not know why these functions are not triggered. The first "frase_script_primeira_execucao" function works, it sends the request to the page ,takes the value , calls the "loop_html" function that brings the buttons. After that, nothing else works.

How can I get the functions back up and running ?

Ps.: Here you can see the function that creates the buttons in action http://jsfiddle.net/h_felix/dut2fk69/

From now on, thank you.

javascript jquery html

1 answer

0

Good afternoon ,

First I’d like to thank @Emirmarques for taking the time to help me.

I was browsing the stack , when I found the following post.

Run Javascript function in event by clicking a button inside a table.

In it, the author says:

The problem seems to me that you are trying to find the buttons to wait for clicks before the buttons exist on the page, since they are added later, via ajax.

I believed this could be my problem because the situation is very similar.

So , I don’t know if it’s the right way , but I created the function : 

function carrega_funco_botao(){

setTimeout(
    function(){ 
        $("#btn_resposta_1").click( //ao clicar no botao 01 , executa a funcao
            function(){
                var id = $("#btn_resposta_1").val();  //pega o valor do botao
                frase_script(id); //chama a funcao que pega a frase , informando o ID da proxima frase
            }
        );

        $("#btn_resposta_2").click(  //ao clicar no botao 02 , executa a funcao
            function(){
                var id = $("#btn_resposta_2").val();  //pega o valor do botao
                frase_script(id); //chama a funcao que pega a frase , informando o ID da proxima frase
            }
        );
    },2000);

setTimeout(
    function(){

        $("#btn_resposta_1").click( //ao clicar no botao 02 , executa a funcao
            function(){

                $("#div_pergunta").slideUp(500); //efeito toogle que sobe a div de pergunta
                $("#id_botao_1").slideUp(500); //efeito toogle que sobe a div do botao 01
                $("#id_botao_2").slideUp(500); //efeito toogle que sobe a div do botao 02
                efeito_set_time_out();
            }
        );

        $("#btn_resposta_2").click( //ao clicar no botao 02 , executa a funcao
            function(){

                $("#div_pergunta").slideUp(500); //efeito toogle que sobe a div de pergunta
                $("#id_botao_1").slideUp(500); //efeito toogle que sobe a div do botao 01
                $("#id_botao_2").slideUp(500); //efeito toogle que sobe a div do botao 02
                efeito_set_time_out();
            }
        );
    },2000);
}

And I call her every time I text the buttons.

It follows the complete code of how it came to be.

http://jsfiddle.net/h_felix/Ls19mdx7/3/

grateful

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.