JS function does not execute - $ is not defined

Question

JS function does not execute - $ is not defined

Navigation

#1 by (0 votes)

0

Good morning everyone,

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

Follow below:

I have a page that I'm doing as if it were a Quiz.

Follow the complete Code page:

$(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><scriptsrc="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 have questions that can have 2 answers and questions that can have 4 answers , that is, it is dynamic, so I can not create the buttons manually because I do not know how many will be needed.

When I click on the buttons, it was to call some functions, but I do not know why these functions are not triggered. The first function "first_script_script" executes, 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 make the functions work again?

Ps .: Here you can see the function that creates the buttons in action link

Thank you in advance.

javascript html jquery

asked by anonymous 21.10.2015 / 15:32

1 answer

UIWebView access other than Google Make PageFooter with dynamic size in iReport

score 0 · Answer 1

Good afternoon,

First of all, I would like to thank @Marques for taking the time to help me.

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

Execute JavaScript function in the click event of 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 the clicks before the buttons exist on the page, since they are added later, via ajax.

I thought this might be my problem, because the situation is very similar.

So, I do not 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 it every time I generate the html for the buttons.

Follow the complete code of how it was.

link

grateful