FOR SEM EXPLICAÇÃO - PELO MENOS PRA MIM
Amigos, estou desenvolvendo um aplicativo de controle pra empresa de um parente.
Caixa...contas...e bla bla bla...
Tenho uma janela que pega as categorias do caixa...onde tenho a opção de adicionar uma outra categoria..editar ou excluir.
Você seleciona a categoria...edita ou exclui...ok ok...
o problema começa quando faço uma pesquisa no banco de dados.
Quando seleciono resultado e clico para editar ou exluir da um loop sem explicação!
segue o código da janela principal e do arquivo que chama os resultados...
ele mostra varias vezes a mesma janela...com o id do elemento clicado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<?php include('../../accounts/check-session.php');?>
<style>
#content-list-categorias{
height:275px;
min-height:275px;
padding:0px;
}
#txt-search-categoria{
position:relative;
float:left;
width:100%;
padding:5px;
box-sizing:border-box;
border:none;
outline:none;
}
.content-list{
position:relative;
width:100%;
padding:0 5px;
box-sizing:border-box;
border:none;
border-top:#EEE solid 1px;
border-bottom:#EEE solid 1px;
overflow:auto;
}
.content-list .item-list{
position:relative;
float:left;
width:100%;
padding:5px;
box-sizing:border-box;
list-style:none;
border-bottom:#EEE solid 1px;
cursor:context-menu;
color:#666;
transition:0.1s;
}
.content-list .item-list:hover{
color:#000;
padding-left:10px;
padding-right:0px;
}
.content-list .item-list:last-child{
border:none;
}
.content-menu-context{
position:absolute;
top:0px;
left:0px;
background:#F00;
display:none;
}
</style>
<body>
<input type="text" id='txt-search-categoria' placeholder='Procurar..'/>
<ul id='content-list-categorias' class='content-list'>
<!--motor-list-categoria.php-->
</ul>
<div class='button' id='btn-delete-categoria'>Excluir</div>
<div class='button' id='btn-editar-categoria'>Editar</div>
<div class='button' id='btn-open-nova-categoria'>Adicionar</div>
</body>
</html>
<script>
//Carrega todas
$('#content-list-categorias').load('/app/caixa/motor-list-categoria.php');
//Carregar pesquisa
document.querySelector('#txt-search-categoria').addEventListener('keyup',function(){
$('#content-list-categorias').load('/app/caixa/motor-list-categoria.php',{pesquisa:this.value});
});
//Nova Categoria
document.querySelector('#btn-open-nova-categoria').addEventListener('click',function(){
adicionarCategoria.open();
editarCategoria.close();
});
</script>
CÒDIGO PHP QUE LISTA OS RESULTADOS E CONTEM AS FUNÇÕES PARA A EDIÇÃO.
<?php
session_start();
$database = $_SESSION['database'];
if(isset($_POST['pesquisa'])){ $pesquisa = $_POST['pesquisa'];}else{$pesquisa = '';}
try{
$conn = new PDO("mysql:host=localhost;dbname=$database", "root", "");
if($pesquisa == ''){
$sql = $conn->prepare("SELECT * FROM tbl_categoria_caixa ORDER BY categoria ASC");
}else{
$sql = $conn->prepare("SELECT * FROM tbl_categoria_caixa WHERE categoria LIKE :categoria ORDER BY categoria ASC");
$sql -> bindValue(':categoria',"%".$pesquisa."%");
}
$sql -> execute();
$cont = $sql->rowCount();
$row = $sql->fetchAll(PDO::FETCH_OBJ);
foreach($row as $dados){
echo "<li id='idCategoria$dados->id' href='$dados->id' class='item-list' select='false'>$dados->categoria</li>";
}
}catch(PDOException $e){
echo "Falha:002<br>Erro ao Pesquisar contas<br>";
echo "Erro:" . $e->getMessage();
exit;
}
?>
<script>
//MEMORIA
var memoriaDeleteCategoria = "";
//Selecionar
var itemListCategoria = document.querySelectorAll('#content-list-categorias li');
for(i=0; i < itemListCategoria.length; i++){
itemListCategoria[i].addEventListener('click',function(){
if(this.getAttribute('select') == 'false'){
memoriaDeleteCategoria = "";
memoriaDeleteCategoria = this.getAttribute('id');
for(i=0; i < itemListCategoria.length; i++){
itemListCategoria[i].style.background = '#FFF';
}
this.style.background = '#DDD';
this.setAttribute('select','true');
}else{
memoriaDeleteCategoria = "";
this.style.background = '#FFF';
this.setAttribute('select','false');
}
});
}
//EDITAR
document.querySelector('#btn-editar-categoria').addEventListener('click',function(){
if(memoriaDeleteCategoria == ''){
message('Nenhuma categoria selecionada!','info');
}else{
var id = document.querySelector('#'+memoriaDeleteCategoria).getAttribute('href');
editarCategoria.setUrl('/app/caixa/view-edit-categoria.php?id=' + id);
editarCategoria.open();
adicionarCategoria.close();
}
});
//DELETAR CATEGORIA
document.querySelector('#btn-delete-categoria').addEventListener('click',function(){
alert(memoriaDeleteCategoria); //testando
if(memoriaDeleteCategoria == ''){
message('Nenhuma categoria selecionada!','info');
}else{
var nomeCategoria = document.querySelector('#'+ memoriaDeleteCategoria).innerHTML;
ask("Deseja exluir '" + nomeCategoria + "' dos registros?",function(){
var id = document.querySelector('#'+memoriaDeleteCategoria).getAttribute('href');
$('#motor').load('/app/caixa/motor-delete-categoria.php',{id:id});
});
}
});
</script>
As Funçoes que tem ae.. message()....ask() são apenas chamadas pra janela modal - não existe loop dentro delas.
Quem souber qual o problema e puder me ajudar...abradeço!
Trabalho só com javascript puro...se alguem souber de alguma função que substitua o .load() do jquery e que traga o junto do da pagina html,javascript e css seria otimo.
abraços a todosDiscussão (0)
Carregando comentários...