[Resolvido] Mudar conteudo sem recarregar layout

[- KbeçãO - 0]

Boa tarde galera iMasters...

em primeiro lugar, quero parabenizar os moderadores pois eu pessoalmente adorei o novo forum

;D

Mas meu caso é o seguinte..

estou trabalhando em um novo site..

e andei pesquisando aqui no forum e descobri que meus metodos de trabalho eram completamente errados...

um deles era o fato de eu usar iFrame no conteudo da pagina, pois assim eu so carregaria o conteudo e o layout era carregado uma unica vez...

como fasso para substituir o iFrame nessa função?

gostaria que so o conteudo da pagina fosse carregado qdo o user clicar em algm botão.

Como fasso isso??

desde ja agradeço..

=]

[Beto A. 0]

Ajax

 

acho que é isso que você procura.

[Andrey Knupp Vital 136]

Não sei se ajax e o mais certo .. você pode fazer desta forma ..

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $("#botao").click(function(){

  $("#conteudo").load("pagina.php"); // carrega a pagina (pagina.php)aonde o ID e "conteudo"

  });

});
</script>
<input type="button" id="botao" value="Abir">
<div id="conteudo"></div>

 

Testa ai .. Posta Se Deu ^_^

[- KbeçãO - 0]

voou fazer os testes aki..

^^

mas neste caso so serviria para um botao input ne??

como aplico essa função para os botoes do menu?

q neste caso são links <a href="...">

[Andrey Knupp Vital 136]

da mesma maneira , so você botar o ID no link , os seletores de jquery são basicamente os de CSS ..

 

<a href="javascript:void(0)" id="botao">Clica Em Min</a>

;)

 

Um Exemplo -> http://www.mbiosinformatica.com.br/jquery/

[- KbeçãO - 0]

entao ficaria assim:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $("#botao").click(function(){

  $("#conteudo").load("pagina.php"); // carrega a pagina (pagina.php)aonde o ID e "conteudo"

  });

});
</script>
<a href="javascript:void(0)" id="botao">Clica Em Min</a>
<div id="conteudo"></div>

 

e isso ??

[Andrey Knupp Vital 136]

Exatamente ..

[- KbeçãO - 0]

=D

voo testa akew...

^^

 

FUNFOOOUUUUUU !!!!

=D

vlw d+..

agora posso dizer adeus ao iFrame..

^^

 

mas agora eu preciso adaptar para um menu..

tenho um menu drop down, daew vo te q reescrever esse codigo para cada botao ???

[Andrey Knupp Vital 136]

hehe Beleza ..

o ajax e melhor quando você usa IF pra separar conteudos da pagina tipo

if($_GET['pg'] == 'login'){
// ação de login
}
if($_GET['pg'] == 'cadastro'){
// cadastro ..
}

ai você manda o ajax com a requisição

$(document).ready(function(){
  $("#bt").click(function(){

      $.ajax({
        type: "GET",
        url:"pagina.php",
        data: "pg=login",
        success: function(m){
          $("#conteudo").html(m)
        }
     });  
 });
});

Quando e um Conteudo fixo o Load quebra o Galho ..

Abraços ^_^

[- KbeçãO - 0]

agora me perdi...

n entendo nada de Ajax...

so Php, e um pouco de CSS...

vo posta um pedaço do meu menu..

você me mostra como ficaria neste caso, e eu adapto no resto ook?

 

<li>
<a href="#"><span>Artigos</span>
</a>
<ul class="nivel2">
   <li><a href="#">Webdesign</a></li>
   <li><a href="#">Diversos</a></li>
   <li><a href="#">Webstandards</a></li>
</ul>
</li>

[Andrey Knupp Vital 136]

so você botar os Ids no href igual eu falei acima ,

 

o javascript:void(0) serve pra não dar refresh ao clicar no link ..

 

^_^

[- KbeçãO - 0]

entao....

 

$(document).ready(function(){
  $("#bt", "#web", "#dive", "#web2', ...).click(function(){

      $.ajax({
        type: "GET",
        url:"pagina.php",
        data: "pg=login",
        success: function(m){
          $("#conteudo").html(m)
        }
     });  
 });
});

--------------------------------

<li>
<a href="#"><span>Artigos</span>
</a>
       <ul class="nivel2">
          <li><a href="#" id="web">Webdesign</a></li>
          <li><a href="#" id="dive">Diversos</a></li>
          <li><a href="#" id="web2">Webstandards</a></li>
       </ul>
</li>

 

assim daria certo ??

eu so mto noob em JS

[Andrey Knupp Vital 136]

Você quer abrir a pagina ou requisitar de certo conteudo ??

 

Eu Falei que o ajax e bom so pra requisiçoes quando ocorre uma situação que você bota tipos de açoes

 

na pagina , no caso eu acho que você quer exibir , faz com o load mesmo ..

 

<script type="text/javascript">
$(document).ready(function(){

 $("#botao").click(function(){

  $("#conteudo").load("pagina.php"); // carrega a pagina (pagina.php)aonde o ID e "conteudo"

  });

});
</script>

 

pra cada botão você faz um evento . tipo

 

$("#botao").click(function(){
   $("#conteudo").load("pagina.php"); 
});

$("#botao2").click(function(){
   $("#conteudo").load("pagina.php"); 
});

$("#botao3").click(function(){
   $("#conteudo").load("pagina.php"); 
});
// assim por diante .. 

 

<li>
<a href="#"><span>Artigos</span>
</a>
       <ul class="nivel2">
          <li><a href="#" id="botao">Webdesign</a></li>
          <li><a href="#" id="botao1">Diversos</a></li>
          <li><a href="#" id="botao2">Webstandards</a></li>
       </ul>
</li>

[William Bruno 1501]

daria certo, mas não é necessário..

imagina lá em cima no teu menu:

 

<ul id="menu">
  <li><a href="pagina1.html"...
     <ul class="nivel2">...

bastaria disparar assim:

 

$('#menu a').click(function( e ){
   e.preventDefault();

  //restante aqui
});

e esqueça o 'return: void', o preventDefault() é a maneira correta de fazer isso pra você.

 

Porém, não faça carregamento de páginas com ajax!

putz.. feio isso, você terá problemas com o google, terá problemas com chamadas javascript..

[- KbeçãO - 0]

x/

af...

entao vo usa o layot em todas as paginas msm..

x/

x/

x/

x/

x/

x/

x/

[William Bruno 1501]

Calma garoto.. a forma que vcs fizeram ajax é a forma incorreta. O ajax deveria ser adicionado no final do script.

 

Minha sugestão é usar php: com includes de navegação via querystring:

 

index.php

<html>
<head>
<style type="text/css">
#conteudo {
border: 1px solid #000;
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<div id="conteudo">
	<ul id="menu">
		<li><a href="?pg=home">Home</a></li>
		<li><a href="?pg=contato">Contato</a></li>
	</ul><!-- /menu -->
<?php
function getGet( $key ){
	return isset( $_GET[ $key ] ) ? $_GET[ $key ] : null;
}
$pg = getGet('pg');
if( is_file( 'view/'.$pg.'.php' ) )
	include 'view/'.$pg.'.php';
else
	include 'view/home.php';
?>
</div><!-- /conteudo -->
</body>
</html>

 

view/home.php

		
	<h1>Home</h1>

	<p>.. conteudo da home</p>

 

 

view/contato.php

		
	<h1>Contato</h1>

	<p>Formulario de contato</p>

 

Instala o Apache e o php, e roda isso ai.

Clicando nos links, você vai ver que as páginas serão carregadas dentro da #conteudo, e todo o template fica na index.

[- KbeçãO - 0]

vo te q reinstala o php e o apache..

ja tinha instalado, mas ñ leu o codigo..

x/

mais tarde torno a postar aki, pq e mó injuado instala...

quebrei tanto a cabeça trabalhando nesse menu, q num to com cabeça pra instalação agora..

:ermm:

[- KbeçãO - 0]

entao..

voltei..

ja instalei o php, e o apache tudo certim...

fiz o teste que você me mandou, beleza..

funcionou sucesso..

mas fui testar em um sub menu...

meu menu e um poco grande, então vou resumir...

 

<ul class="principal">
<li> ... 
...
...
...
..
</li
..
..
<li><a href="#" class="submenu">Informações</a>
<ul class="nivel3">
  <li><a href="#">Direitos do Aluno</a></li>
  <li><a href="#">Deveres do Aluno</a></li>
  <li><a href="#">Sistema de Avaliação</a></li>
         <li><a href="#">Segunda Chamada</a></li>
         <li><a href="#">Recuperação</a></li>
         <li><a href="#">Reforço</a></li>
         <li><a href="#">Tarefas de casa</a></li>
        <li><a href="#">Educação Física</a></li>
        <li><a href="#">Uniformes</a></li>
        <li><a href="#">Biblioteca</a></li>
        <li><a href="?pg=informacoes/obs">Observações</a></li> // aqui onde coloquei
     </ul>
</li>

 

e não chamou..

oq fiz errado..

sinto que estou chegando perto...

;D

[William Bruno 1501]

olha isso:

 

href="?pg=informacoes/obs"

qndo chegar pro script php, ele vai procurar um arquivo assim:

include 'view/informacoes/obs.php';

 

e ai? existe uma pasta informacoes dentro da pasta view ?

qndo não der certo, diga o pq. Se der erro, informe.

[- KbeçãO - 0]

Consegui...

é pq no seu codigo tava chamando pela pasta 'view' que n existe...

=]

daew o erro..

ja corrigi e agora ta tudo certo...

^^

tópico resolvido...