Ir para conteúdo
ZUCOLLI

Carregar página em DIV com jQuery

Recommended Posts

Boa noite galera...

 

Alguém pode me passar uma explicação simples de como carregar páginas em DIVs de uma forma simple...

 

Ou até mesmo algum tópico do fórum, não achei nenhum que me clareou a idéia.

 

 

EXPLICAÇÂO:

Terei a index.html e nela uma DIV conteudo onde ao clicar nos links (HOME, SERVICOS, etc) as respectivas páginas serão carregadas nesta DIV.

 

 

Estou tentando fazer deste jeito, com JQuery porque faço do método tradicional e acho que já está ficando desatualizado.

 

 

Desde já agradeço

 

 

ZUCOLLI

Compartilhar este post


Link para o post
Compartilhar em outros sites

É o seguinte, farei um esquema simples de como você deve fazer para carregar esses conteúdos sem precisar atualizar a página com PHP e AJAX.

 

index.php

 

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Executa o evento CLICK em todos os links do menu
$('#menu a').live('click',function(){
 // 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'));
 return false;

});

});
</script>
</head>
<body>
<div id='menu'>
<ul>
<li><a href='page.php?cod=1'>Home</a></li>
<li><a href='page.php?cod=2'>Serviços</a></li>
</ul>
</div>
<!-- Aqui serão mostrados os conteúdos -->
<div id='conteudo'>

</div>
</body>
</html>

 

Agora vou mostrar como pegar os valores utilizando PHP.

 

page.php

 

<?php
// Aqui ele pega o valor da varíavel do navegador.
$cod = $_GET['cod'];
// A condição switch faz com que o valor dos códigos do primeiro script represente uma página html que carregará na div conteudo.
switch($cod){
case '1'; // Aqui por exemplo, lá é page.php?cod=1, certo? Então ela vai carregar a página home.html na div conteúdo.
include('home.html');
break;
case '2'; // Aqui tambem, lá é page.php?cod=2, então ela carregará a página de noticias.html.
include('noticias.html');
}

?>

 

Bom, tentei exemplificar ao máximo possível para que você entenda, obrigado.

 

PS: Caso queira adicionar mais coisas, é só por um break; e mais cases. Até mais

  • +1 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok, aqui funcionou.

Qualquer dúvida sobre como funcione, poste aqui que eu te ajudo. =D

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Desculpe pela pergunta, sou péssimo com JS.

E se essas variaveis fossem passadas através de um <select>, qual seria o seletor do Jquery?

Editado por William Bruno
Remover quote desnecessário

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, eu fiz um aqui, sem utilizar a programação em PHP, mas que você poderá abrir páginas PHP com ele.

 

index.php

 

<!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>Documento sem título</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Define as variaveis de acordo com a quantidade da página // opcional.

$('#inicio').click(function(){
// Define a página que vai ser aberta, quando usuario clickar.
var pagina = "inicio.php";
	$('#conteudo').load(pagina);	

});

$('#registro').click(function(){
// Repetindo a variável pagina, que receberá a página registro.php, ele poderá ser modificado. Mesmo processo acima.
var pagina = "registro.php";	
	$('#conteudo').load(pagina);
});

});
</script>
</head>
<body>
<form id='form'>
<select>
<option id='inicio'>Página Principal</option>
   <option id='registro'>Registro</option>
</select>
</form>
<!-- Aqui o conteúdo será mostrado -->
<div id='conteudo'>

</div>
</body>
</html>

 

Isso ai funciona de acordo com que o usuário escolher. Se você quiser adicionar mais coisas, é so adicionar um novo <option> com um novo ID e adicionar lá no código, basicamente é so repetir os processos. Deixei os comentários, se você não entender, diga-me.

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Dii, que tal assim:

<select name="paginas">
   <option value="inicio.php">Página Principal</option>
   <option value="registro.php">Registro</option>
</select>

e ai no jquery:

$("select[name='paginas']").change(function(){
   $('#conteudo').load( $( this ).val() );
});

 

e pronto. Se quiser mais, basta alterar o HTML, sem duplicar nada no jQuery.

  • +1 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

aqui funciona a troca de conteúdo do div, mas com erro de charset (UTF-8 e ISO-8859-1...)

 

quando na pagina a ser carregada tem acentos, aparece um monte de ??????, as minhas 2 paginas estao em iso-8859-1.

como resolvo isso? li na internet q o jquery troca para UTF-8... não sei o q fazer.

 

abaixo meu código:

arquivo: menu.js

//codigo para alterar o conteudo da DIV = CORPO

$("#menu_esquerda a").click(function()

{

/*decobre o ID do link foi clicado*/

var id = $(this).attr('id');

 

/*cria o link do artigo que será chamado*/

var link = 'artigos_css/artigo' + id + '.htm';

 

/*troca o conteudo do div*/

$("#corpo").load(link);

 

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

muito obrigado, mas tem um porém....

com excelente seu tutorial consegui assim um determinado DIV na pag1.html, carrega o arquivo pag2.php via Jquery (usando LOAD).

porém eu gostaria de saber se tem como fazer isso sem problemas de acentos se os 2 arquivos forem .HTML

até pq pra usar o LOAD do jquery não precisa de PHP.

 

isso é possível??

 

desde já agradeço toda a atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites

gostaria de saber como faz esse recurso usado nesse forum onde passa o mouse por cima do nomedo usuario e abre uma janela de informaçoes dentro de uma div.vou avisando sou novo aqui hein...

Compartilhar este post


Link para o post
Compartilhar em outros sites

@turfeaugusto, crie um novo tópico para sua dúvida.

 

E apenas respondendo rapidamente, vc deve pesquisar por dropdown

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal, estou com o mesmo problema... só que estou em java... não consegui aplicar isso... não sei como carregar apenas o conteúdo e manter os dados das outras divs (checkbox) selecionados, para não dar refresh.

 

e também depois de pegar os valores do servlet retornar para essa div, sem carregar página, hoje ele está abrindo uma nova tela.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--[if lte IE 6]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if gte IE 7]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if gte IE 8]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if IE 9]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->  


<html>
	<head>
		<title> PGPM - Menu </title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
		<BASE href="home.html" target="principal">
		<link rel='stylesheet' type='text/css' href='css/buttonMenu.css'>  
		<link rel='stylesheet' type='text/css' href='css/padrao_VisualPED.css'>
		<link rel="stylesheet" href="css/jquery-ui.css" />
		
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<script src="js/jquery-latest.min.js"></script>
		<script src="js/script.js"></script>
  		<script src="js/jquery-1.9.1.js"></script>
   		<script src="js/jquery-ui.js"></script>
   		
	</head>

<style>

html{overflow:auto;width:auto;}
body {background-color: #000; margin-top: 0px; margin-bottom: 0px;}

#container {margin-right: auto; margin-left: auto;}

#header {height: 100%; width:100%; background-color: #333}

#sidebar {position: relative; float: left;}

#mainContent {height: 100%; width: 100%; background-color: #999; float: right;}

#tituloPrincipal {position: relative; padding:5px; margin: 0; margin-center:100%; font-weight: bold; color:#444; text-align:center;}

#conteudoFiltro {width:auto; margin: 0 auto; margin-left:0}
#comboVeiculo {font-size:13px;}
#tituloAba {background:#0094ff; width:100px; height:25px;} 
.titulo {font-weight: bold; color:#FFF; text-align:center; padding-top:4px;}
#box {border:2px solid; border-color:#0094ff; width:320px; font-size: 13px;}
#posicao {padding:2px; position: relative; margin:0; display: block;} 
.posicao .esquerda {padding:2px; position:relative; float:left; margin:0; display: block;} 
.posicao .direita {padding:2px; position:relative; float:right; margin:0; display: block;} 
.posicao .clear {clear:both;margin:0;padding:0;} 

.ui-datepicker {font-size: 12px;}
.ui-datepicker td span, .ui-datepicker td a {display: inline-block;	font-weight: bold; text-align: center; width: 20px; height: 20px; line-height: 20px;}
.ui-datepicker-calendar .ui-state-default {color:#06F;}
.ui-datepicker-unselectable .ui-state-default {background: #f4f4f4;	color: #b4b3b3;}
.arrow_box-ca:after, .arrow_box-ca:before {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.ui-datepicker-trigger {position: relative; top: 4px; padding: 2px; margin:0px;}
.ui-datepicker-calendar .ui-state-active {background: #06F; color: #fff; text-shadow: 0px 1px 0px #000;}
.ui-datepicker-calendar .ui-state-hover { background: #f7f7f7;}
</style>
	
	

<script type="text/javascript">
function envia_tranca() {
	document.forms['form1'].submit();
	document.forms['form1'].elements['pesquisaRel'].disabled = true;	
}


function CheckAllEquipamento() { 
   for (var i=0;i<document.formAll.elements.length;i++) {
     	var x = document.formAll.elements[i];
     	if (x.name == 'MultiplosDadosFiltro') { 
			x.checked = document.formAll.filtroALL.checked;
		} 
	} 
} 


$(function(){
    $('#dataIni').datepicker({
    	dateFormat: 'dd/mm/yy',
	    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
	    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	    nextText: 'Próximo',
	    prevText: 'Anterior',
		showOtherMonths:true,
        selectOtherMonths: false,
		changeMonth:true,
        changeYear:true,
		showOn:"button",
        buttonImage: "./img/calendar_icon.png",
		buttonImageOnly: true,
    	onSelect: function(dateText, inst) {
	      $("input[name='dataIni']").val(dateText);
	    }
    });
});
			
$(function(){
    $('#dataFin').datepicker({
    	dateFormat: 'dd/mm/yy',
	    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
	    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	    nextText: 'Próximo',
	    prevText: 'Anterior',
		showOtherMonths:true,
        selectOtherMonths: false,
		changeMonth:true,
        changeYear:true,
		showOn:"button",
		buttonImage: "./img/calendar_icon.png",
		buttonImageOnly: true,
    	onSelect: function(dateText, inst) {
	      $("input[name='dataFin']").val(dateText);
	    }
    });
});

function Formatadata(Campo, teclapres)
{
	var tecla = teclapres.keyCode;
	var vr = new String(Campo.value);
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	tam = vr.length + 1;
	if (tecla != 8 && tecla != 8)
	{
		if (tam > 0 && tam < 2)
			Campo.value = vr.substr(0, 2) ;
		if (tam > 2 && tam < 4)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
		if (tam > 4 && tam < 7)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
	}
}


function dois_pontos(tempo){
      if(event.keyCode<48 || event.keyCode>57){
        event.returnValue=false;}
      if(tempo.value.length==2){
        tempo.value+=":";}
}

function valida_horas(tempo){
  while (tempo.value.length < 5){
      if(tempo.value.length==2 || tempo.value.length==5){
        tempo.value+=":";}
      tempo.value+="0";}

  horario = tempo.value.split(":");
  var horas = horario[0];
  var minutos = horario[1];
if(horas > 24){ //para relógio de 12 horas altere o valor aqui
  submit.disabled = true;relogio.focus();//fica nome_do_form.submit.disabled caso você insira um form ali em baixo 
  Break;} 
if(minutos > 59){
  submit.disabled = true;relogio.focus();
  Break;}
  submit.disabled = false;
}
	
	</script>
	
<script type="text/javascript">
function mostra() {
	document.getElementById('conteudo').style.display = 'block';
}
function esconde() {
	document.getElementById('conteudo').style.display = 'none';
}
</script>

	
<script type='text/javascript'> 
function abrefechaFiltro() {
	if(filtro.style.display == "none") {
		filtro.style.display = "block";
	} else {
		filtro.style.display = "none";
 	}
}

function abrefechaMenu() {
	if(menu.style.display == "none") {
		menu.style.display = "block";
	} else {
		menu.style.display = "none";
	}
}
 </script>	
	
<body>
<div id="container">

<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste</a>
	<div id="conteudo" style="display:none;">Conteudo do Menu</div>

	<div id="header"></div>

	<div id="logo"></div>

	<div id="mainContent">

	<div id="content"></div>

	<div id="dg"><a href="javascript:abrefechaFiltro()">Filtro Abre/Fecha</a></div><div id="filtro" style="display: none;">
		<div id="sidebar">
			<form name="formAll" action="ServletPGPM" method="post">
			<input type="hidden" id="msgRetornoFiltro" value="<c:out value="${msgRetornoFiltro}"/>"/>
			
		
			
			
			<div id="conteudoFiltro">
					
				<div>
					<div id="tituloAba">
						<p class="titulo">Filtros</p> 
					</div>
					<div id="box">
					<table cellspacing="5" cellpadding="2" align="center">
					<tr>
						<td>
							<div id="comboVeiculo">
								<select name="cod_igreja" class="selectbox" style="width:100px;">
									<option value="0">VEÍCULO</option>
										<c:forEach var="e" items="${veiculo}">
											<option value="${e.cod_estado}" <c:if test="${e.cod_estado == param.meuparametrodobanco}">Selected=selected</c:if>  > ${e.nom_estado}</option>
										</c:forEach>
								</select>	
							</div>
						</td>
					</tr>
						<tr align="left">	
							<td width="auto">	
								<div class="esquerda">	
									<div title="Data Inicial">Dt. Ini.: <input type="text" size="6" maxlength="10" id="dataIni" name="dataIni" onkeyup="Formatadata(this,event)"/></div>
									<br>
									<div title="Hora Inicial">Hr. Ini.: <input type="text" size="6" name="horaIni" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="filtroALL" onclick="CheckAllEquipamento()" name="filtroALL"><label for="filtroALL" class="" title="Selecionar todos os campos"> Selecionar tudo</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="VelocidadeInst" VALUE="VelocidadeInst" name="MultiplosDadosFiltro" class=""><label for="VelocidadeInst" class="" title="Velocidade Instantânea"> Vel. Instantânea</label></div>	
									<div><INPUT TYPE=CHECKBOX id="VelocidadeMd" VALUE="VelocidadeMd" name="MultiplosDadosFiltro" class=""><label for="VelocidadeMd" class="" title="Velocidade Média"> Vel. Média</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="PosAcel" VALUE="PosAcel" name="MultiplosDadosFiltro" class=""><label for="PosAcel" class="" title="Posição do Acelerador"> Pos. do Acelerador</label></div>
									<div><INPUT TYPE=CHECKBOX id="RotMotor" VALUE="RotMotor" name="MultiplosDadosFiltro" class=""><label for="RotMotor" class="" title="Rotação do Motor"> Rot. do Motor</label></div>
									<div><INPUT TYPE=CHECKBOX id="RotMaxMotor" VALUE="RotMaxMotor" name="MultiplosDadosFiltro" class=""><label for="RotMaxMotor" class="" title="Rotação Máxima do Motor"> Rot. Máx. do Motor</label></div>
								</div>	
							</td>
							<td width="auto">
								<div class="direita">		
									<div title="Data Final">Dt. Fin.: <input type="text" size="6" maxlength="10" id="dataFin" name="dataFin" onkeyup="Formatadata(this,event)"/></div>
									<br>
									<div title="Hora Final">Hr. Fin.: <input type="text" size="6" name="horaFin" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
									<br>
									<div></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="NvlCombus" VALUE="NvlCombus" name="MultiplosDadosFiltro" class=""><label for="NvlCombus" class="" title="Nível de Combustível"> Nvl. de Combustível</label></div>
									<div><INPUT TYPE=CHECKBOX id="EficCombus" VALUE="EficCombus" name="MultiplosDadosFiltro" class=""><label for="EficCombus" class="" title="Eficiência do Combustível"> Efic. do Combustível</label></div>	
									<div><INPUT TYPE=CHECKBOX id="DistPerc" VALUE="DistPerc" name="MultiplosDadosFiltro" class=""><label for="DistPerc" class="" title="Distância Percorrida"> Dist. Percorrida</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="TempViagem" VALUE="TempViagem" name="MultiplosDadosFiltro" class=""><label for="TempViagem" class="" title="Tempo de Viagem"> T. de Viagem</label></div>
									<div><INPUT TYPE=CHECKBOX id="TempVeicParado" VALUE="TempVeicParado" name="MultiplosDadosFiltro" class=""><label for="TempVeicParado" class="" title="Tempo do Veículo Parado"> T. do Veíc. Parado</label></div>
									<div><INPUT TYPE=CHECKBOX id="TempVeicFunc" VALUE="TempVeicFunc" name="MultiplosDadosFiltro" class=""><label for="TempVeicFunc" class="" title="Tempo do Veículo Funcionamento"> T. do Veíc. Func.</label></div>
								</div>
							</td>	
						</tr>
					</table>
					<br>	
					<center>
						<div><input name="pesquisaRel" id="pesquisaRel" type="submit" value="Pesquisar"/></div>
					</center>
					<br>	
					<div class="clear"></div>	
					</div>  	
				</div>
			</div>

			</form> 
		</div>
		
	</div>
	
	
<div id="dg"><a href="javascript:abrefechaMenu()">Menu Abre/Fecha</a></div>
<div id="menu" style="display: none;">

<div id="nav">
				<!-- menu -->
				<ul>
					<li><a href="#" class="menu-option" id="home">Home</a></li>
					<li><a href="#" class="menu-option" id="perfilMotorista.jsp">Perfil Motorista</a></li>
					<li><a href="#" class="menu-option" id="page2">Page 2</a></li>
				</ul>
			</div>


</div>

	</div>
	

// RESULTADO DO SERVLET
			<c:if test="${MultiplosDadosAtuais2}">
		<table>
			<tr>
				<td class="consultado" style="visibility:hidden;">Consultado por <c:out value='${MultiplosDadosAtuais2 != null ? MultiplosDadosAtuais2 : "---"}'/></td>
			</tr>
		</table>
		</c:if>
	
</div>


</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou com um problema semelhante.

tenho um template que já carrega os conteúdos em div via jquery e preciso carregar um segundo conteúdo dentro de uma pagina já carregada dentro de uma div, se rodo por for a funciona bem, mas quando carrego dentro da div já carregada...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Gelera me tira uma dulvida, no caso tenho uma das paginas a ser carregadas que tem um slide que é um menu de bandas, esse menu contem a href que carrega as informações da banda em um div abaixo do menu. tentei algumas tecnicas para carregar as informações dessas paginas nas divs como tem aqui nesse topico mas o slide para de funcionar. alguem sabe o porque?será que os codigos de js estão entrando em conflito?ou o erro é chamar esses codigos no index?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

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