lightbox e Ajax
Boa tarde a todos do fórum, tudo bem com vocês?
Não não conheço de Ajax e Javascript e Jquery.
Estou desenvolvendo uma pequena agenda em PHP com Mysql, já consegui realizar algumas partes porém estou com problemas, abaixo vou postar o código, e logo em seguida tenho algumas perguntas, espero que todos possam me ajudar. Sou iniciante mas tenho muita vontade de aprender por isso eu sempre venho a este fórum.
<?php
require('conexaol.php');
?><html lang="en">
<head>
<meta charset="UTF-8">
<title>Agenda de Contatos</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="accordion.js" type="text/javascript" charset="utf-8" async defer></script>
<script>
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","filtrar.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<header>
<h1>Agenda de Contatos</h1>
<img src="brandcompany.png" alt="Brandcompany">
</header>
<div class="subheader">
<form id="frmfiltragem" name="filtragem" action="filtrar.php" method="post">
<label>FILTROS</label>
<select name="categoria" onchange="showUser(this.value)">
<option value="4">Ativo</option>
<option value="5">Inativo</option>
<option value="2">Clientes e Contatos</option>
<option value="1">Fornecedores</option>
<option value="3">Construtoras e Incorporadoras</option>
</select>
<select name="Ordenar">
<option value="">Ordene os dados</option>
<option value="">Empresa</option>
<option value="">Empresa</option>
</select>
<input type="submit" name="enviar" value="OK" id="btnok" style="margin-left: 0.5%">
</form>
<form id="frmsearch" action="resultado.php" method="post">
<input name="buscar" type="text" id="txtsearch">
<input name="search" type="submit" value="OK" id="btnsok">
<a href="#" id="myBtnU" title="Adicionar"><img src="plus.png" width="42px" height="42px" id="btnadd"></a>
<a href="#" title="Sair"><img src="exit.png" alt="" id="btnexit" width="42px" height="42px"></a>
</form>
</div>
<div id="txtHint" class="main">
<div class="titulos">
<div class="titempresa">
<h2>EMPRESA</h2>
</div>
<div class="titcontato">
<h2>CONTATO</h2>
</div>
<div class="titemail">
<h2>E-MAIL</h2>
</div>
<div class="titphone">
<h2>TELEFONE</h2>
</div>
<div class="titsmartphone">
<h2>CELULAR</h2>
</div>
<div class="titactions"></div>
<?php
$sql = "SELECT * FROM cadastro";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "
<button class='accordion'>
<div class='titempresa'>
<p>".$row["cadastro_empresa"]."</p>
</div>
<div class='titcontato'>
<p>".$row["cadastro_contato"]."</p>
</div>
<div class='titemail'>
<p>".$row["cadastro_email1"]."</p>
</div>
<div class='titphone'>
<p>".$row["cadastro_telefone1"]."</p>
</div>
<div class='titsmartphone'>
<p>".$row["cadastro_celular1"]."</p>
</div>
<div class='titactions'>
<a href='#' title='Editar' id='myBtnU'><img src='edit.png' alt='Editar' id='btnedit' width='24px' height='24px'></a>
<a href='delete.php?identifica=".$row["cadastro_id"]."' title='Excluir' id=''><img src='delete.png' alt='delete' id='btndelete' width='24px' height='24px'></a>
</div>
</button>
<div class='panel'>
<div class='titcontato'>
<p><strong>CONTATO</strong></p>
<p>".$row["cadastro_contato2"]."</p>
<p>".$row["cadastro_contato3"]."</p>
<p>".$row["cadastro_contato4"]."</p>
<p>".$row["cadastro_contato5"]."</p>
<p>".$row["cadastro_contato6"]."</p>
<p>".$row["cadastro_contato7"]."</p>
<p>".$row["cadastro_contato8"]."</p>
<p>".$row["cadastro_contato9"]."</p>
<p>".$row["cadastro_contato10"]."</p>
</div>
<div class='titemail'>
<p><strong>E-MAIL</strong></p>
<p>".$row["cadastro_email2"]."</p>
<p>".$row["cadastro_email3"]."</p>
<p>".$row["cadastro_email4"]."</p>
<p>".$row["cadastro_email5"]."</p>
<p>".$row["cadastro_email6"]."</p>
<p>".$row["cadastro_email7"]."</p>
<p>".$row["cadastro_email8"]."</p>
<p>".$row["cadastro_email9"]."</p>
<p>".$row["cadastro_email10"]."</p>
</div>
<div class='titphone'>
<p><strong>TELEFONE</strong></p>
<p>".$row["cadastro_telefone2"]."</p>
<p>".$row["cadastro_telefone3"]."</p>
<p>".$row["cadastro_telefone4"]."</p>
<p>".$row["cadastro_telefone5"]."</p>
<p>".$row["cadastro_telefone6"]."</p>
<p>".$row["cadastro_telefone7"]."</p>
<p>".$row["cadastro_telefone8"]."</p>
<p>".$row["cadastro_telefone9"]."</p>
<p>".$row["cadastro_telefone10"]."</p>
</div>
<div class='titsmartphone'>
<p><strong>CELULAR</strong></p>
<p>".$row["cadastro_celular2"]."</p>
<p>".$row["cadastro_celular3"]."</p>
<p>".$row["cadastro_celular4"]."</p>
<p>".$row["cadastro_celular5"]."</p>
<p>".$row["cadastro_celular6"]."</p>
<p>".$row["cadastro_celular7"]."</p>
<p>".$row["cadastro_celular8"]."</p>
<p>".$row["cadastro_celular9"]."</p>
<p>".$row["cadastro_celular10"]."</p>
</div>
<div class='titsmartphone' style='width:35%; float:left'>
<p><strong>ENDEREÇO FÍSICO</strong></p>
<p>".$row["cadastro_endereco"]."</p>
<p> </p>
<p> </p>
<p><strong>ENDEREÇO DIGITAIS</strong></p>
<p>".$row["cadastro_enderecos_digitais"]."</p>
</div>
</div>";
}
}else {
echo "";
}
mysqli_close($conn);
?>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<form name="cadastro" method="post" action="insert.php" id="frmcadastro" class="frms">
<div id="elastico">
<h1>Inserir dados</h1>
<div class="cols">
<img src="imagens/dados-pessoais.gif" alt="" />
<div class="alinha">
<p>
<label>Categoria</label>
<select name="categoria" id="categoria" class="categoria">
<option value="2">Clientes e Contatos</option>
<option value="3">Construtoras e Incorporadoras</option>
<option value="1">Fornecedores</option>
</select>
</p>
<p>
<label>Segmento</label>
<input type="text" name="seguimento" id="seguimento" />
</p>
<p>
<label>Empresa</label>
<input type="text" name="empresa" id="txtempresa" />
</p>
<p>
<label>Dados da Empresa</label>
<textarea name="dados_empresa" id="dateEmpresa" style="height:56px;"></textarea>
</p>
</div>
</div>
<div class="cols">
<div class="alinha">
<p>
<label>Endereço</label>
<textarea name="cadastro_endereco" id="txtendereco"></textarea>
</p>
<p>
<label>Endereços digitais </label>
<textarea name="cadastro_enderecos_digitais" id="digitais"></textarea>
</p>
<p>
<label style="width:auto; margin-left: 20%">Ativo<input type="radio" name="Ativo" value="Ativo" style="margin:6px 0 0"></label>
<label style="width:auto; margin-left: 20%">Inativo<input type="radio" name="Ativo" value="Inativo" style="margin:6px 0 0"></label>
</p>
</div>
</div>
<div class="members">
<div class="titles">
<label id="tlnome">Nome</label>
<label id="tlemail">E-mail</label>
<label id="tltelefone">Telefone</label>
<label id="tlcelular">Celular</label>
</div>
<div class="titles">
<input type="text" name="cadastro_contato" id="contato" class="cnomes" />
<input type="text" name="cadastro_email1" id="email" class="cemails" />
<input type="text" name="cadastro_telefone1" id="telefone" class="ctelefones" />
<input type="text" name="cadastro_celular1" id="celular" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato2" id="cadastro_contato2" class="cnomes" />
<input type="text" name="cadastro_email2" id="cadastro_email2" class="cemails" />
<input type="text" name="cadastro_telefone2" id="cadastro_telefone2" class="ctelefones" />
<input type="text" name="cadastro_celular2" id="cadastro_celular2" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato3" id="cadastro_contato3" class="cnomes" />
<input type="text" name="cadastro_email3" id="cadastro_email3" class="cemails" />
<input type="text" name="cadastro_telefone3" id="cadastro_telefone3" class="ctelefones" />
<input type="text" name="cadastro_celular3" id="cadastro_celular3" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato4" id="cadastro_contato4" class="cnomes" />
<input type="text" name="cadastro_email4" id="cadastro_email14" class="cemails" />
<input type="text" name="cadastro_telefone4" id="cadastro_telefone4" class="ctelefones" />
<input type="text" name="cadastro_celular4" id="cadastro_celular4" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato5" id="cadastro_contato5" class="cnomes" />
<input type="text" name="cadastro_email5" id="cadastro_email15" class="cemails" />
<input type="text" name="cadastro_telefone5" id="cadastro_telefone5" class="ctelefones" />
<input type="text" name="cadastro_celular5" id="cadastro_celular5" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato6" id="cadastro_contato6" class="cnomes" />
<input type="text" name="cadastro_email6" id="cadastro_email16" class="cemails" />
<input type="text" name="cadastro_telefone6" id="cadastro_telefone6" class="ctelefones" />
<input type="text" name="cadastro_celular6" id="cadastro_celular6" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato7" id="cadastro_contato7" class="cnomes" />
<input type="text" name="cadastro_email7" id="cadastro_email17" class="cemails" />
<input type="text" name="cadastro_telefone7" id="cadastro_telefone7" class="ctelefones" />
<input type="text" name="cadastro_celular7" id="cadastro_celular7" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato8" id="cadastro_contato8" class="cnomes" />
<input type="text" name="cadastro_email8" id="cadastro_email18" class="cemails" />
<input type="text" name="cadastro_telefone8" id="cadastro_telefone8" class="ctelefones" />
<input type="text" name="cadastro_celular8" id="cadastro_celular8" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato9" id="cadastro_contato9" class="cnomes" />
<input type="text" name="cadastro_email9" id="cadastro_email19" class="cemails" />
<input type="text" name="cadastro_telefone9" id="cadastro_telefone9" class="ctelefones" />
<input type="text" name="cadastro_celular9" id="cadastro_celular9" class="ccelulares" />
</div>
<div class="titles">
<input type="text" name="cadastro_contato10" id="cadastro_contato10" class="cnomes" />
<input type="text" name="cadastro_email10" id="cadastro_email10" class="cemails" />
<input type="text" name="cadastro_telefone10" id="cadastro_telefone10" class="ctelefones" />
<input type="text" name="cadastro_celular10" id="cadastro_celular10" class="ccelulares" />
</div>
</div>
<input name="enviar" id="btnsalvar" value="salvar" type="submit" title="Salvar registro" style="margin-right:40px" />
</div>
</form>
</div>
</div>
<div id="myModalU" class="modal">
<div class="modal-content">
<span class="close">×</span>
<form name="cadastro" method="post" action="insert.php">
<div id="elastico">
<h1>DADOS</h1>
<div class="cols">
<img src="imagens/dados-pessoais.gif" alt="" />
<div class="alinha">
<p>
<label>Categoria</label>
<select name="categoria" id="categoria" class="categoria">
<option value="2">Clientes e Contatos</option>
<option value="3">Construtoras e Incorporadoras</option>
<option value="1">Fornecedores</option>
</select>
</p>
<p>
<label>Segmento</label>
<input type="text" name="seguimento" id="seguimento" value="<?php $_REQUEST['cadastro_seguimento']?>" />
</p>
<p>
<label>Empresa</label>
<input type="text" name="empresa" id="empresa" value="<?php $_REQUEST['cadastro_empresa']?>" />
</p>
<p>
<label>Dados da Empresa</label>
<textarea name="dados_empresa" id="digitais" style="height:96px;" value="<?php $_REQUEST['cadastro_dados_empresa']?>"></textarea>
</p>
</div>
<div class="cols">
<img src="imagens/endereco.gif" alt="" />
<div class="alinha">
<p>
<label>Endereço</label>
<textarea name="cadastro_endereco" id="digitais" value="<?php $_REQUEST['cadastro_endereco']?>"></textarea>
</p>
<p>
<label>Endereços digitais </label>
<textarea name="cadastro_enderecos_digitais" id="digitais" value="<?php $_REQUEST['cadastro_enderecos_digitais']?>"></textarea>
</p>
</div>
</div>
<img src="imagens/filete.png" alt="" name="filete" width="918" height="2" id="filete" />
<div class="members">
<div class="titles">
<label id="tlnome">Nome</label>
<label id="tlemail">E-mail</label>
<label id="tltelefone">Telefone</label>
<label id="tlcelular">Celular</label>
</div>
<div class="title">
<input type="text" name="cadastro_contato" id="contato" class="cnomes" value="<?php $_REQUEST['cadastro_contato']?>" />
<input type="text" name="cadastro_email1" id="email" class="cemails" value="<?php $_REQUEST['cadastro_email1']?>" />
<input type="text" name="cadastro_telefone1" id="telefone" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone1']?>" />
<input type="text" name="cadastro_celular1" id="celular" class="ccelulares" value="<?php $_REQUEST['cadastro_celular1']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato2" id="cadastro_contato2" class="cnomes" value="<?php $_REQUEST['cadastro_contato2']?>" />
<input type="text" name="cadastro_email2" id="cadastro_email2" class="cemails" value="<?php $_REQUEST['cadastro_email2']?>" />
<input type="text" name="cadastro_telefone2" id="cadastro_telefone2" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone3']?>" />
<input type="text" name="cadastro_celular2" id="cadastro_celular2" class="ccelulares" value="<?php $_REQUEST['cadastro_celular2']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato3" id="cadastro_contato3" class="cnomes" value="<?php $_REQUEST['cadastro_contato3']?>" />
<input type="text" name="cadastro_email3" id="cadastro_email3" class="cemails" value="<?php $_REQUEST['cadastro_email3']?>" />
<input type="text" name="cadastro_telefone3" id="cadastro_telefone3" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone3']?>" />
<input type="text" name="cadastro_celular3" id="cadastro_celular3" class="ccelulares" value="<?php $_REQUEST['cadastro_celular3']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato4" id="cadastro_contato4" class="cnomes" value="<?php $_REQUEST['cadastro_contato4']?>" />
<input type="text" name="cadastro_email4" id="cadastro_email14" class="cemails" value="<?php $_REQUEST['cadastro_email4']?>" />
<input type="text" name="cadastro_telefone4" id="cadastro_telefone4" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone4']?>" />
<input type="text" name="cadastro_celular4" id="cadastro_celular4" class="ccelulares" value="<?php $_REQUEST['cadastro_celular4']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato5" id="cadastro_contato5" class="cnomes" value="<?php $_REQUEST['cadastro_contato5']?>" />
<input type="text" name="cadastro_email5" id="cadastro_email15" class="cemails" value="<?php $_REQUEST['cadastro_email5']?>" />
<input type="text" name="cadastro_telefone5" id="cadastro_telefone5" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone5']?>" />
<input type="text" name="cadastro_celular5" id="cadastro_celular5" class="ccelulares" value="<?php $_REQUEST['cadastro_celular5']?>"/>
</div>
<div class="title">
<input type="text" name="cadastro_contato6" id="cadastro_contato6" class="cnomes" value="<?php $_REQUEST['cadastro_contato6']?>" />
<input type="text" name="cadastro_email6" id="cadastro_email16" class="cemails" value="<?php $_REQUEST['cadastro_email6']?>" />
<input type="text" name="cadastro_telefone6" id="cadastro_telefone6" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone6']?>" />
<input type="text" name="cadastro_celular6" id="cadastro_celular6" class="ccelulares" value="<?php $_REQUEST['cadastro_celular6']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato7" id="cadastro_contato7" class="cnomes" value="<?php $_REQUEST['cadastro_contato7']?>" />
<input type="text" name="cadastro_email7" id="cadastro_email17" class="cemails" value="<?php $_REQUEST['cadastro_email7']?>" />
<input type="text" name="cadastro_telefone7" id="cadastro_telefone7" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone7']?>" />
<input type="text" name="cadastro_celular7" id="cadastro_celular7" class="ccelulares" value="<?php $_REQUEST['cadastro_celular7']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato8" id="cadastro_contato8" class="cnomes" value="<?php $_REQUEST['cadastro_cadastro8']?>" />
<input type="text" name="cadastro_email8" id="cadastro_email18" class="cemails" value="<?php $_REQUEST['cadastro_email8']?>" />
<input type="text" name="cadastro_telefone8" id="cadastro_telefone8" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone8']?>" />
<input type="text" name="cadastro_celular8" id="cadastro_celular8" class="ccelulares" value="<?php $_REQUEST['cadastro_celular9']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato9" id="cadastro_contato9" class="cnomes" value="<?php $_REQUEST['cadastro_contato9']?>" />
<input type="text" name="cadastro_email9" id="cadastro_email19" class="cemails" value="<?php $_REQUEST['cadastro_email9']?>" />
<input type="text" name="cadastro_telefone9" id="cadastro_telefone9" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone9']?>" />
<input type="text" name="cadastro_celular9" id="cadastro_celular9" class="ccelulares" value="<?php $_REQUEST['cadastro_celular9']?>" />
</div>
<div class="title">
<input type="text" name="cadastro_contato10" id="cadastro_contato10" class="cnomes" value="<?php $_REQUEST['cadastro_contato10']?>" />
<input type="text" name="cadastro_email10" id="cadastro_email10" class="cemails" value="<?php $_REQUEST['cadastro_email10']?>" />
<input type="text" name="cadastro_telefone10" id="cadastro_telefone10" class="ctelefones" value="<?php $_REQUEST['cadastro_telefone10']?>" />
<input type="text" name="cadastro_celular10" id="cadastro_celular10" class="ccelulares" value="<?php $_REQUEST['cadastro_celular10']?>" />
</div>
</div>
<input name="KT_Insert1" id="entrar" value="salvar" type="submit" title="Salvar registro" style="margin-right:40px" />
<a href="#" title="Voltar" id="btnvoltar" onclick="javascript:self.close();" onkeypress="javascript:self.close();">Voltar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>Abaixo segue alguns questionamentos.
1-) Como fazer filtros em Ajax
2-) Fazer uma busca em Ajax
3-) Os botões editar e excluir não funcionam na barra, quando eu clico neles eles não executam, e preciso eles também funcionarem com Jquery e o Ajax
4-) O mesmo fazer com o botão adicionar, ao cadastrar os dados fazer inclusão via ajax como proceder.
5-) Como eu posso melhorar este código?
Alguém saberia me ajudar com este caso, me dar um caminho para que possa solucionar?
Discussão (0)
Carregando comentários...