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 ricardonews
      Olá pessoal, fiz 2 formularios  de login em jquery e ajax, um eu vi na internert o modelo então fiz umas adaptações e funcionou com meu banco de dados. porem o outro que fiz baseado nele não funcionou. vou postar aqui pra voces o funcionando e o não funcionando, alguém pode me dar uma ajuda?, dizer que erro é esse? ele simplesmente não loga e não aparece erros no console.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html> /* Container */ .container{ width:40%; margin:0 auto; } /* Login */ #div_login{ border: 1px solid gray; border-radius: 3px; width: 470px; height: 270px; box-shadow: 0px 2px 2px 0px gray; margin: 0 auto; } #div_login h1{ margin-top: 0px; font-weight: normal; padding: 10px; background-color: cornflowerblue; color: white; font-family: sans-serif; } #div_login div{ clear: both; margin-top: 10px; padding: 5px; } #div_login .textbox{ width: 96%; padding: 7px; } #div_login input[type=submit]{ padding: 7px; width: 100px; background-color: lightseagreen; border: 0px; color: white; } #message{ width:100%; text-align:center; color:red; } /* media */ @media screen and (max-width:720px){ .container{ width: 100%; } #div_login{ width: 99%; } } <?php require_once "config.php"; // AQUI É O PESQUISAR PHP $uname = mysqli_real_escape_string($con,$_POST['username']); $password = mysqli_real_escape_string($con,$_POST['password']); if ($uname != "" && $password != ""){ $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE username='".$uname."' and password='".$password."'"; $result = mysqli_query($con,$sql_query); $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $_SESSION['uname'] = $uname; echo 1; }else{ echo 0; } } <?php require_once "config.php"; // AQUI É A HOME.PHP // Check user login or not if(!isset($_SESSION['uname'])){ header('Location: index.php'); } // logout if(isset($_POST['but_logout'])){ session_destroy(); header('Location: index.php'); } ?> <!doctype html> <html> <head> <title>SEJA BEM VINDO!</title> </head> <body> <h1>PÁGINA INICIAL</h1> <form method='post' action=""> <input type="submit" value="SAIR" name="but_logout"> </form> </body> </html> <?php // ESSE AQUI É A CONFIG.PHP session_start(); $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "login2"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } Então pessoal, até aqui funciona normal .
      agora a linha abaixo é oque não funciona e eu vou postar só a index e o css porque repete o de cima.
      se alguém poder me ajudar eu fico grato. desde já muito obrigado
      <html> <?php require_once"config.php"; ?> <head> <title>Formulario de login </title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <form id="formulario" method="post"> <fieldset> <h2>Configuracoes da conta</h2> <h3>Area de login </h3> <input type="text" id="meu_nome"name="meu_nome" placeholder="username" /> <input type="password" id="minha_senha " name="minha_senha" placeholder="digite sua senha" /> <input type="submit" class="next acao" value="Logar" /> </fieldset> </body> </html> agora é o css
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}  
    • By FabianoSouza
      Quero saber dos colegas se há diferença de desempenho e qual a forma mais adequada para enviar dados via AJAX.
      É melhor enviar o form todo ou criar um array com os valores e enviar a string?
       
      Quero saber isso porque quando preciso enviar dados + arquivo (submetendo o form) gera problema de charset no lado do servidor (trunca os caracteres acentuados). Não consigo resolver isso.
       
      Diante dessa situação penso em criar a seguinte lógica para conseguir enviar dados e arquivo:
      1) Com o form definido como "application/x-www-form-urlencoded", faço o submit e gravo os dados com linguagem server side.
      2) Se a operação tiver sucesso, via javascript altero o enctype do form para multipart/form-data, altero o atributo action para a  página que faz o upload do arquivo e submeto o form novamente.
       
      O que os amigos acham dessa lógica?
       
      Valew.
       
    • By ricardonews
      Olá pessoal, fiz um formulario de cadastro usando o jquery ,ajax com o json. só que agora eu estou querendo logar  no banco, fiz todo o procedimento normal que se faz para site em php, mas não consegui nada,  eu tenho algumas imagem aqui  vou colocar.
      Queria logar, eu coloquei a index  sem o php porque tentei com php e js mas nao funcionou , alguem pode me ajudar ?
      desde já obrigado.




×

Important Information

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