Jump to content
Rodrigo Vieira E da Silva

Elemento Accordion e modal não funciona

Recommended Posts

Bom dia a toda galera ninja em JS, tudo bem com vocês?

 

Estou com um problema que está me deixando de cabelo em pé, eu inserir o código abaixo em meu projeto mas ao executar o mesmo meu elemento accordion e 02 modais parou de funcionar, será que alguém pode me ajudar ou me dar a direção do caminho correto para que o mesmo volte a funcionar.

 

Segue código abaixo,.

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","filtro.php?filtro="+str,true);
        xmlhttp.send();
    }
}

 

Share this post


Link to post
Share on other sites

Em princípio este código não estará relacionado com o modal e accordion. Verfica se há erros na consola do browser  (CTRL+Shift+J no Chrome).

Share this post


Link to post
Share on other sites

Segue o código do Accordion Abaixo:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  }
}

Código do Modal

 

//AJAX PARA O BOTÃO INSERIR
$(document).ready(function() {
/// Quando usuário clicar em salvar será feito todos os passo abaixo
$('#btnsalvar').click(function() {
    var dados = $('#frmcadastro').serialize();
    $.ajax({
        type: 'POST',
        //dataType: 'json',
        url: 'insert.php',
        async: true,
        data: dados,
        success: function(response) {
            location.reload();
        }
    });
    return false;
});

//MODAL DA JANELA DE INSERIR
$("a[rel=adicionar]").click(function(ev) {
        ev.preventDefault();

        var id = $(this).attr("href");
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();

        //colocando o fundo preto
        $('.mascara').css({'width': larguraTela, 'height': alturaTela});
        $('.mascara').fadeIn(1000);
        $('.mascara').fadeTo("slow", 0.8);

        var left = ($(window).width() / 2) - ($(id).width() / 2);
        var top = ($(window).height() / 2) - ($(id).height() / 2);

        $(id).css({'top': top, 'left': left});
        $(id).show();
    });

    $(".mascara").click(function() {
        $(this).hide();
        $(".window").hide();
    });

    $('.fechar').click(function(ev) {
        ev.preventDefault();
        $(".mascara").hide();
        $(".window").hide();
    });

 });
//FIM DO MODAL DA JANELA DE INSERIR E DO AJAX PARA A INSERÇÃO DO REGISTRO 

//AJAX DO EDITAR E MODAL
$("a[rel=modal]").click(function(ev) {
	ev.preventDefault();

	var id = $(this).attr("href");
	var alturaTela = $(document).height();
	var larguraTela = $(window).width();

	$('.mascarae').css({'width': larguraTela, 'height': alturaTela});
	$('.mascarae').fadeIn(1000);
	$('.mascarae').fadeTo("slow", 0.8);

	var left = ($(window).width() / 2) - ($(id).width() / 2);
	var top = ($(window).height() / 2) - ($(id).height() / 2);

	$(id).css({'top': top, 'left': left});
	$(id).show();
});

$(".mascarae").click(function() {
	$(this).hide();
	$(".windowe").hide();
});

$('.fechar').click(function(ev) {
	ev.preventDefault();
	$(".mascarae").hide();
	$(".windowe").hide();
});
//FIM DO AJAX E DO MODAL EDITAR


// AJAX PARA EXCLUSÃO DE REGISTROS
$(document).ready(function() {
	$('.delete').click(function(){
		var element = $(this);
		var del_id = element.attr('id');
		var info = 'id=' + del_id;
			if(confirm('Você deseja excluir esse registro?')){
	 			$.ajax({
	   				type: 'GET',
	   				url: 'delete.php',
	   				async: true,
	   				data: info,
	   				success: function(response) {
                    	location.reload();
                	}
	   			});
	  			//$(this).parents(".accordion").animate({ backgroundColor: "red" }, "slow")
	  			//.animate({ opacity: "hide" }, "slow");
	 		}
		return false;
	});
});
//FIM DO AJAX PARA EXCLUSÃO DE REGISTROS

/*AJAX PARA SELECIONAR O TIPO DE FILTRO*/

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","filtro.php?filtro="+str,true);
        xmlhttp.send();
    }
}

Será que isso ajuda?

Share this post


Link to post
Share on other sites

Se estás a usar jQuery, porque não usas a função ajax para fazer o pedido?

Mais uma nota: tens dois eventos DOM ready no teu código, sendo que podes colocar tudo num só event handler.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alesson Mendes
      Fala galera,
      Sou novato em Desenvolvimento Web, e estou precisando fazer uma inserção de dados sem atualizar a pagina.
      Preciso alterar varios valores de uma tabela, portanto fiz um table e dentro dele coloquei um form nos campos que desejo editar.
      O problema que quero utilizar a funçao onblur para fazer o submit a cada alteração. Consegui fazer isto definindo a rota no formulário e criando uma função javascript onblur.
      Porém ele manda para meu php, onde insere os dados mas redireciona a rota.
      vi em varios outros foruns, mas nao consegui implementar o AJAX no meu projeto.
      Conseguem me dar uma mão na no codigo, como utilizo o AJAX com o laravel.
      Muito obrigado
       
       
      <script type="text/javascript">
          $(document).ready(function(){
              $("#prest").on('blur', function() { //evento de sair de foco do edit
                  
                  var valor = $('#prest').val();
               $('#form').submit();//efetua submit no formulario
              });
                 
          });
      </script>
       
       
       
      <table>
                  <thead>
                      <tr>
                          <th>Cotação</th>
                          <th>Codigo</th>
                          <th>Descrição</th>
                          <th>Cod Barras</th>
                          <th>Qtde Cotação</th>
                      </tr>
                  </thead>
                  <tbody>
                      @foreach($registros as $registro)
                      <tr>
                          <td>{{ $registro->prod_codigo }}</td>
                          <td>{{ $registro->prod_descricao }}</td>
                          <td>{{ $registro->prod_barras}}</td>
                          <td>{{ $registro->prod_qtde}}</td>
                          <td>
                              <form action="{{ route('preco.incluir' , $registro->id) }}" method="post" class="" id="form" name="form" enctype="multipart/form-data">
                                  {{csrf_field()}}
                                  <input type="hidden" name="_method" value="put">
                                  <input type="text" name="prest" id="prest" value="" >
                              </form>
                          </td>
                      </tr>
                      @endforeach
                              </tbody>
                          </table>
    • By Dineysil
      Boa tarde!
       
      Sou iniciante em Javascript e Ajax e estou precisando de criar uma função para:
      Em um Form tenho dois "radios" jurídico e físico, preciso que ao clicar em uma opção no form alterne uma "Label" e uma "Text"
      Se a opção for Físico a Label será CPF: e a Text terá uma mascara de cpf
      Se a opção for Jurídico a Label será CNPJ: e a Text terá uma mascara de cnpj
       
      Com relação as máscaras eu já as tenho.
       
      O site está em ASP Clássico

      Agradeço se alguém poder ajudar.
       
      Claudiney
    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By SrTunes
      Boa tarde amigos, sei que há vario tópicos parecidos com esse, com praticamente a mesma dúvida, mas com diferentes resoluções. Mas o motivo de eu ter aberto um tópico novo foi por causa tenho duvida no meu código que não encontrei resposta nos outros tópicos.
       
      De antemão informo que meu conhecimento em javascript é muito limitado, por isso peço encarecidamente a paciência e compreensão dos colegas e dede já agradeço a todos. Muito obrigado.
       
      Bem, o problema:
       
      Tenho um form php com dois campos apenas: "PN do item" e "Descrição".
      Para o primeiro campo de input (PN do Item), com a ajuda da internet, implementei um script que a medida que digito ele faz uma busca no BD e autocompleta. Até ai beleza.
      O que estou querendo agora é, aproveitando a minha estrutura, fazer com que ao escolher o item do primeiro campo de input, o segundo campo de input me retornasse do BD a descrição deste item automaticamente sem refresh da página.
      Isso é possível?
       
      Abaixo deixo meus scripts:
      <?php require_once 'config/conexao.class.php'; require_once 'config/crud.class.php'; $con = new conexao(); // instancia classe de conxao $con->connect(); // abre conexao com o banco $consulta = mysql_query("SELECT pn_item FROM descricao_de_itens"); //Busca da tabela descricao_de_itens o campo pn_item para preencher as opções no form $dados =""; if(mysql_num_rows($consulta) > 0){ while($row = mysql_fetch_assoc($consulta)){ $dados = $dados."\"".$row["pn_item"]."\","; } } $dados = substr($dados,0,-1); // retira a última virgula ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://localhost/controle_estoque/css/jquery-ui.css"> <script src="http://localhost/controle_estoque/js/jquery-3.4.1.js"></script> <script src="http://localhost/controle_estoque/js/ui/jquery-ui.js"></script> <script> $( function(){ var availableTags = [<?php echo $dados?>]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> <title></title> </head> <body> <form action="" method="post"><!-- formulario carrega a si mesmo com o action vazio --> <div class="ui-widget"> <label for="tags">PN do Item:</label> <input id="tags" type="text" name="nome"/> <br /> <br /> </div> <label>Descri&ccedil;&atilde;o:</label> <input type="text" name="descricao"/> <br /> <br /> <input type="submit" name="cadastrar" value="Cadastrar" /> </form> </body> </html> <?php $con->disconnect(); // fecha conexao com o banco ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.