Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cristian_

[Resolvido] Jquery :: Carregar página PHP em abas

Por , em Javascript

Recommended Posts

Cristian_    0

Cristian_
Postado

Galera,

 

Sou iniciante e estou com uma dificuldade...

Tenho um script que peguei na net para fazer abas em Jquery. Porém não consigo faze-lo carregar páginas PHP nas abas.

 

Alguem pode me ajudar? Seguem os códigos:

 

HTML (esta dentro de uma página "dashboard.php")

<html>
<body>
<div id="menu" class="clear">
  <ul class="tabs">
     <li><a href="painel.php">Painel</a></li>
     <li><a href="listaFuncionarios.php">Funcionarios</a></li>
     <li><a href="listaFornecedores.php">Fornecedores</a></li>
     <li><a href="listaUsuarios.php">Usuarios</a></li>
   </ul>
</div>
<div id="#aba1" class="conteudo">
   <p>Aqui deveria carregar a página "painel.php"</p>
</div>
<div id="#aba2" class="conteudo"> 
   <p>Aqui deveria carregar a página "listaFuncionarios.php"</p>
 </div>
<div id="#aba3" class="conteudo">
   <p>Aqui deveria carregar a página "listaFornecedores.php"</p> 
 </div>
<div id="#aba4" class="conteudo"> 
   <p>Aqui deveria carregar a página "listaUsuarios.php"</p> 
 </div>
</body>
</html>

 

Script

//Quando carregar a pagina
   $(document).ready(function(){
   //On Click Event
   $('#ul.tabs li a').click(function(){
$("ul.tabs li").removeClass("active"); //remove a class no link clicado para que não fica marcado
$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta
$(".conteudo").hide(); //esconder as divs do conteúdo

   // Faz o carregamento da página de acordo com o COD da página, que vai pegar os valores da página page.php.
       $(".conteudo").load($(this).attr('href'));
       $(".conteudo").fadeIn('slow'); //efeito de fade in com o conteúdo ativo
       return false;    
});
});

 

Desde já agradeço a ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

troque:

$('#ul.tabs li a').click(function(){

por

$('#ul.tabs li a').click(function( e ){
  e.preventDefault();

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então tem algum erro de javascript.

 

verifique no console, apertando

Ctrl+Shift+J no Firefox

 

leitura:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Então, não acusa erros de js.

 

Estava pesquisando e vi que errei ao definir o <a href> dos links do menus. Fiz a alteração abaixo e as abas funcionam corretamente agora (aparecem e desaparecem) conforme clico nos menus, porém o conteúdo das páginas php ainda não são carregados dentro das abas. Segue o novo código:

 

http://localhost/projeto/dashboard.php

HTML

 

<html>
<body>
<div id="menu" class="clear">
  <ul class="tabs">
     <li><a href="#aba1">Painel</a></li>
     <li><a href="#aba2">Funcionarios</a></li>
     <li><a href="#aba3">Fornecedores</a></li>
     <li><a href="#aba4">Usuarios</a></li>
   </ul>
</div>
   <div id="#aba1" class="conteudo">
       <p>Aqui deveria carregar a página "painel.php"</p>
   </div>
   <div id="#aba2" class="conteudo"> 
       <p>Aqui deveria carregar a página "listaFuncionarios.php"</p>
   </div>
   <div id="#aba3" class="conteudo">
       <p>Aqui deveria carregar a página "listaFornecedores.php"</p> 
   </div>
   <div id="#aba4" class="conteudo"> 
       <p>Aqui deveria carregar a página "listaUsuarios.php"</p> 
    </div>
</body>
</html>

 

Script

$(document).ready(function() {
//Quando carregar a pagina
$(".conteudo").hide(); //esta primeira linha servirá para esconder as divs do conteúdo
$("ul.tabs li:first").addClass("active").show(); //Ativar primeira aba
$(".conteudo:first").show('slow'); //abre a pagina suavemente

//On Click Event
$("ul.tabs li").click(function() {// quando clicar no link do menu irá executar a seguinte função:
	$("ul.tabs li").removeClass("active"); //remove a class no link clicado para que não fica marcado
	$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta
	$(".conteudo").hide(); //esconder as divs do conteúdo
	$(".conteudo").load($(this).attr('href'));
	$(".conteudo").fadeIn('slow'); //efeito de fade in com o conteúdo ativo

	return false;// o returno falso evita que ao clicar no link a página role para o topo.
});
});

 

Agora como faço para carregar a página:

 

=> "painel.php" dentro da aba (div) #aba1

=> "listaFuncionarios.php" dentro da aba (div) #aba2

=> "listaFornecedores.php" dentro da aba (div) #aba3

=> "listaUsuarios.php" dentro da aba (div) #aba4

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a forma fácil, é não precisar de ajax, e fazer assim:

 

    <div id="#aba1" class="conteudo">
       <?php include 'painel.php'; ?>
   </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Tentei fazer isso. Coloquei o include com os respectivos arquivos em cada aba mas o que aconteceu foi o seguinte, a #aba1 carregou normalmente com o conteúdo da página "painel.php" porém as outras abas deixaram de funcionar. Quando clico nelas não aparece nada, nem a div vazia.

 

Fiz um teste e coloquei o include apenas na div da #aba2 e neste caso a #aba1 carregou em branco, a #aba2 carregou normalmente com o conteúdo da página "listaFuncionarios.php" porém as abas seguintes deixaram de funcionar.

 

Fui no firebug e percebi que quando coloco o include em uma das divs (abas) as seguintes "mudam" de lugar na estrutura e ficam "aninhadas" na aba anterior que contem a primeira ocorrência do include e ai o jquery não as encontra mais.

 

O que pode ser isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pode ser erro no html de cada include.

 

valide a marcação no validador do w3c.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Willian, muito obrigado pela ajuda até agora mas ainda não funcionou :(

 

As páginas php que estou usando para testar ainda estão vazias, tem somente um texto.

 

<html>
<body>
  <h1>Painel</h1>
</html>
</body>

 

Fui no validador conforme você falou e esta tudo certo... Vou ter que sair agora, caso alguem tenha alguma idéia posta ai que na volta volto para a luta e testo as dicas!

 

T já

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

está errado, eles devem ser somente assim:

  <h1>Painel</h1>

impossível ter validado certo com essa marcação de include q você mostrou

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Eu validei apenas a página painel.php.

 

Alterei o código dela deixando apenas a forma como você mostrou, fiz o include e funcionou para esta página!

 

Ai fui tentar o include com a página "listaFuncionários.php" e dá o mesmo problema, as abas seguintes param de funcionar...

 

Vou postar o código da página listaFuncionarios.php:

 

<?php require_once('Connections/DB.php'); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lista Funcionários</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/abas.js"></script>
<script type="text/javascript" src="js/public_smo_scripts.js"></script>
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<?php
mysql_select_db($database_DB, $DB);
$resultado = mysql_query("SELECT * FROM funcionarios");
$linhas = mysql_num_rows($resultado);
echo"<form id='formFunc' name='formFunc'>
<table id='tabelaFunc' class='table' cellpadding='0' cellspacing='0'>
<thead>
   <tr>
      <th class='colCheck'><input name='checkall' onclick='checkUncheckAll(this);' type='checkbox'></th>
      <th class='colName'><a href='?ordem=AaZ&maximo=10'>Nome</a></th>
      <th class='colCount'>Ramal</th>
      <th class='colCount'>E-mail</th>
      <th class='colStatus'>Status</th>
      <th class='colActions'>Ação</th>
   </tr>
</thead>";
for ($i=0;$i<$linhas;$i++)
{
    $reg = mysql_fetch_row($resultado);
    echo"
    <tbody>
       <tr class='odd'>
           <td class='colCheck'> <input id='check_sel' name='linhas[$i]' value='$reg[0]' type='checkbox'></td>
           <td class='colName left'><a href='admin_func_ver.php?codigo=$reg[0]'>$reg[1]</a></td>
           <td class='colCount'>$reg[3]</td>
           <td class='colCount'><a href='mailto:$reg[4]?subject=Recado da Portaria'>Enviar</a></td>
           <td class='colStatus'>";
           if($reg[5]==0){
               echo"<img src='/projetos/claris/images/icostatusgreen.png' alt='Ativo' align='absmiddle' border='none'>";
           } else{
           echo"<img src='/projetos/claris/images/icostatusgray.png' alt='Inativo' align='absmiddle' border='none'>";
           }
           echo"</td>";
           echo"<td class='colActions'><a class='actionEdit' href='admin_func_edt.php?codigo=$reg[5]'>Editar</a>
           <a class='actionDelete' href='admin_func_exc.php?codigo=$reg[5]' onclick='return alerta('Deseja excluir este funionario?');'>Excluir</a></td>
       </tr>
   </tbody>
   </form>";
   }

?>
</div>

</body>
</html>

 

O que pode estar errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a mesma coisa... você não deve importar 2 vezes a lib jquery.. coloque todo esse conteudo desse head ai no documento pai, q já está carregado.

 

e não duplique as tags <body>, <head>, <html>..

validando o documento final, após os includes, o html gerado vai te dizer a forma correta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

beleza William, resolvida a parada!! Era isso mesmo!

 

Deu vários erros quando tentei validar o documento final e fui resolvendo (e aprendendo) todos.

 

Valeu mesmo!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito