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 Artes Ussler
      Olá
       
      Alguém já usou o modal deste link: 
       
      https://jquerymodal.com/
       
      e alterou ele para abrir um modal ao acessar a página, e não ao clicar em um link?
       
      Caso alguém tenha feito e puder me mostrar como faz, fico grato.
       
    • By mzaidan
      Pessoal, tenho o seguinte codigo:
      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 (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","getFaixa.php?q="+str,true); xmlhttp.send(); } } Na mesma página, logo embaixo:
      <select name='faixa' id='appearance-select' onchange="showUser(this.value)"> <option value='branca' <?=($faixa == 'branca')?'selected':''?>>Branca</option> <option value='azul' <?=($faixa == 'azul')?'selected':''?>>Azul</option> <option value='roxa' <?=($faixa == 'roxa')?'selected':''?>>Roxa</option> <option value='marrom' <?=($faixa == 'marrom')?'selected':''?>>Marrom</option> <option value='preta' <?=($faixa == 'preta')?'selected':''?>>Preta</option> </select><br> No getFaixa.php:
      include("conexao.php"); $q = intval($_GET['q']); $id = $_SESSION['id']; $update = "UPDATE usuario SET faixa='$q' WHERE usuario_id='$id'"; $result = mysqli_query($conexao, $update); O que eu gostaria era mudar o campo no BD, usando ajax.
      Ele até está mudando, só que está botando um 0 ao invés do value do select.
       
      Alguém poderia me ajudar?
      Onde estou errando?
      Grato.
    • By danielpinho
      Boa tarde pessoal,
       
      Estou desenvolvendo um sistema de pagamento via cartão de crédito que requer a execução de um ajax (request https) quando o usuário digita o número do cartão, a fim de capturar a bandeira do mesmo. O javascript deve enviar via ajax somente os 6 primeiros dígitos do cartão.
       
      A função já está funcionando parcialmente, da seguinte forma: quando o usuário digita o sexto dígito, o ajax faz a requisição e retorna o resultado.
       
      O problema é que quando o usuário continua digitando o restante do número do cartão, o ajax continua fazendo uma requisição a cada tecla pressionada, o que vai acabar sobrecarregando desnecessariamente o meu servidor.
       
      Eu sei que o ideal seria acionar a função somente quando a minha keyword tivesse lenght=6 (assim, ao continuar digitando a função não seria acionada), porém tem pessoas que copiam e colam o número do cartão de uma vez, e isso geraria um bypass na função...
       
      Além disso, o sistema deve ser capaz de reconhecer que houve uma eventual mudança nos 6 números digitados inicialmente, para fazer uma nova requisição ajax com esses números novos.
       
      A solução que pensei, em síntese, foi criar uma variável chamada "lastquery", inicialmente com o valor "000000". Digamos que os 6 dígitos pesquisados estivessem na variável "sixdigits". 
       
      Quando a requisição ajax fosse feita, a variável "lastquery" teria valor alterado para o mesmo valor de "sixdigits".
       
      E a requisição ajax ficaria condicionada da seguinte forma:   if (lasquery !== sixdigits) { executa ajax }.
       
      O problema é que não está dando certo. Ele continua executando normalmente, mesmo quando o valor de lastquery é o mesmo valor de sixdigits.
       
      Alguém mais inteligente do que eu consegue me ajudar? 
       
      Segue o código que não está funcionando perfeitamente. Reparem que fiz um alert para verificar o que estava dando errado, mas a mensagem que recebo no alert é sempre algo do tipo: "10100 is not equal to 10100". Não consigo entender porque isso acontece, já que lá em cima coloquei a condicionante !==.
       
      Obrigado!
       
      <form method="post"> <input type="text" name="ccnumber" id="ccnumber" value="" onkeyup="getcardbin()"> </form> <script> var lastquery = "000000"; function getcardbin() { var min_length = 6; var keyword = $('#ccnumber').val(); if (keyword.length >= min_length) { var justsix = keyword.substring(0, 6); if (justsix !== lastquery) { $.ajax({ url: '/getcardbin.cgi', type: 'POST', data: { 'tkn': 'token_interno', 'tid': 'token_interno', 'bin': justsix }, success:function(data){ $('#returnmsg').prepend(data); alert(justsix + ' is not equal to ' + lastquery); var lastquery = justsix; } }); } } } </script>  
    • By gust.php
      Fala pessoal.
       
      Quero fazer o seguinte: Tenho um campo select e um campo input. Quando eu selecionar um item do meu campo select, quero enviar o ID desse item, e o valor do campo input, que no caso é uma data, para um script PHP,  no PHP vou conferir uma situação e dizer se eu posso usar esse item ou não.
       
      Alguém pode me mostrar um exemplo?
       
      Obrigado.
    • By FabianoSouza
      Quero saber se é possível enviar formData e string na mesma requisição AJAX.
       
      $frmData = new FormData($form); $xhr.open('post', $form.getAttribute('action'), true); $xhr.setRequestHeader('content-type', 'text/plain;charset=utf-8'); $xhr.send($frmData); //******* quero saber se consigo enviar sting, além do objeto formData.  
×

Important Information

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