Esconder um frame ao clicar em um botão

rdpacato · Agosto 5, 2014

Pessoal,

tenho um site com frame... e um deles é um menu lateral... e queria colocar um botão onde ajustasse o tamanho da tela caso seja apertado este botão...

O menu lateral se apertar o botão ele aparece, se apertar ele fecha, e com isso o conteúdo do principal do meio, se deslocasse para a direita e quando fechasse o menu lateral o conteúdo voltasse ao tamanho da tela...

Alguém me ajuda?

<%@ 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">


<html>
	<head>
		<title> PGPM - Principal </title>

		<meta name="description" content="Tela inicial do PGPM">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	 
	</head>
	
	 
    <frameset rows="55px,80%,4.3%" border="1" frameborder="yes">
        <frame name="head" src="header.jsp" scrolling="auto" noresize>
        <frameset cols="25%,*"border="0" frameborder="no">
        	
<!-- ESTE É O MENU QUE QUERO ESCONDER E APARECER CASO APERTE O BOTÃO, MAS FAZENDO AJUSTAR O TAMANHO, E NÃO DEIXANDO 25% COMO ESTÁ ATUALMENTE, APENAS UNS 5% PARA O BOTÃO -->
<frame name="menu" src="menu2.jsp" scrolling="auto"></frame>


        	<frame name="principal" src="home.jsp" scrolling="auto" noresize></frame>
    	</frameset>
        <frame name="foot" src="foot.jsp" scrolling="auto" noresize>
    </frameset>


</html>

CL4nG · Agosto 5, 2014

window.onload = function()

{

document.getElementById("fechar").onclick = function()

{

document.getElementById("myFrame").style = "display: none";

}

</script>

<style>

#myFrame{

border: 1px solid red;

width: 500px;

height: 400px;

}

</style>

rdpacato · Agosto 5, 2014

Olá mestre, obrigado mais uma vez pela ajuda... mas não consegui adaptar meu código com essa solução...

Sou novo com frames... então esta meio difícil de entender isso... você poderia me dar uma luz? (mais uma) por favor?

CL4nG · Agosto 5, 2014

Você pode fazer com jQuery. Os passos são: Adicionar um id ou class para o elemento, adicionar uma função de callback para o evento do input ou link que fechará o frame, e nessa função você fecha o frame com hide();

Veja: http://forum.imasters.com.br/topic/524884-fechar-div-ajax/

A tag frameset foi descontinuada, então sugiro a você trabalhar com divs.

Segue uma estrutura com div:


<body>
	<div id="main">
		<div id="header">
			<div id="logo">

			</div>
			<div id="nav">
				<!-- menu -->
				<ul>
					<li>Home</li>
				</ul>
			</div>
		</div>

		<div id="content">

		</div>

		<div id="footer">

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

rdpacato · Agosto 5, 2014

É que preciso quando trazer os resultados de servlets, carregar apenas o conteúdo principal, e com frameset foi o melhor caminho que encontrei... pois as opções dos menus (checkbox, combobox, etc.) deverão permanecer carregados...

Pq com div, não entendi como organizar na mesma tela, e também só carregar a parte de conteúdo, sem ajax

rdpacato · Agosto 6, 2014

Mas se não tiver outra maneira ficaria grato se me desse um exemplo com ajax...

CL4nG · Agosto 6, 2014

Exemplo:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>

$(document).ready(function()
{
	$(".menu-option").click(function(){
		//Obter o conteúdo
		var id = $(this).attr("id");
		var conteudo = "";
		
		//Isso é só uma simulação de como o conteúdo da página será carregado.
		if (id == "home")
			conteudo = "Página Home";
		else if (id == "page1")
			conteudo = "Página 1";
		else
			conteudo = "Página 2";

		$("#content").html(conteudo);

		/*
		 Obter o conteúdo da página via GET ou POST e passar
		 parâmetros caso necessário.
		$.get(id+".php", function(conteudo){
			$("#content").html(conteudo);
		});		
		*/
	});

});
</script>

<body>
	<div id="main">
		<div id="header">
			<div id="logo">

			</div>
			<div id="nav">
				<!-- menu -->
				<ul>
					<li><a href="#" class="menu-option" id="home">Home</a></li>
					<li><a href="#" class="menu-option" id="page1">Page 1</a></li>
					<li><a href="#" class="menu-option" id="page2">Page 2</a></li>
				</ul>
			</div>
		</div>

		<div id="content">

		</div>

		<div id="footer">

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

Este script está obtenho o id do link que foi clicado, e como esse id é único e identifica qual página deve ser carregada, então é só buscar o conteúdo referente ao id. No id você pode colocar até o nome do arquivo (página) que queira carregar.

Exemplo:

<li><a href="#" class="menu-option" id="contato.php">Contato</a></li>

<li><a href="#" class="menu-option" id="sobre.php">Sobre</a></li>

rdpacato · Agosto 8, 2014

Desculpe te encher, mas estou começando agora com ajax...

Eu não consegui implantar, ele abre outra página e ainda por cima só manda home.html, e preciso mandar *.jsp... veja se fiz algo errado por favor, pois tentei mudar a forma de enviar:

<script>$(document).ready(function(){	$(".menu-option").click(function(){		//Obter o conteúdo		var id = $(this).attr("id");		var conteudo = "";				//Isso é só uma simulação de como o conteúdo da página será carregado.		if (id == "home")			url: 'cadastro.jsp';		else if (id == "perfilMotorista")			conteudo = "Página 1";		else			conteudo = "Página 2";		$("#content").jsp(conteudo);		/*		 Obter o conteúdo da página via GET ou POST e passar		 parâmetros caso necessário.		$.get(id+".php", function(conteudo){			$("#content").html(conteudo);		});				*/	});});</script><div id="content"></div><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>

E teria como fazer um retorno do servlet para carregar só na div contente? depois da requisição? para manter os dados da pesquisa

Ainda não consegui fazer carregar tudo dentro da div, nem retornar resposta do servlet para ela... sem refresh

CL4nG · Agosto 8, 2014

Amigo, de uma olhada no código comentado:

//Obter o conteúdo da página via GET ou POST e passar parâmetros caso necessário.

$.get(id+".php", function(conteudo){

$("#content").html(conteudo);

});

É nessa parte que você vai obter o conteúdo da página.

Veja como deve ficar:


<script>

$(document).ready(function()
{
	$(".menu-option").click(function(){
		//Obter o conteúdo
		var page = $(this).attr("id");
		
		//Obter o conteúdo da página via GET ou POST e passar parâmetros caso necessário.
		$.get(page, function(conteudo){
			$("#content").html(conteudo);
		});		
		
	});

});

</script>



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

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

rdpacato · Agosto 11, 2014

CL4nG, ainda não funcionou... quando clico ele não abre nada dentro da div...

você poderia verificar por favor? é só colar meu código e salvar como html para ver o que estou falando... não sei o que fazer...

desculpe te amolar amigo, mas preciso muito disso...


<html>
	<head>
		<script language='javascript'>var txt=" ::::: PGPM - Plataforma para Gestão de Perfil de Motorista";var veloc=300;var refr=null;function rotulo_title(){document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refr=setTimeout("rotulo_title()",veloc);}rotulo_title();</script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
		<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="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<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>

$(document).ready(function()
		{
			$(".menu-option").click(function(){
				//Obter o conteúdo
				var page = $(this).attr("id");
				
				//Obter o conteúdo da página via GET ou POST e passar parâmetros caso necessário.
				$.get(page, function(conteudo){
					$("#content").jsp(conteudo);
				});		
				
			});

		});


</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"><button type="button" onclick="javascript:abrefechaFiltro();">Medições</button></div><div id="filtro" style="display: none;">
		<div id="sidebar">
			<form name="formAll" action="ServletPGPM" method="post">

			
		
			
			
			<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"><button type="button" onclick="javascript:abrefechaMenu();">Click Me!</button> </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>
	
<center>	

	<hr>
	<br>
		<table border= "1px" cellspacing= "0" cellpadding= "3">
			<tr class="tabela">
				<td style="border-color:white" style="border-style:groove">Equipamento</td>
				<td style="border-color:white" style="border-style:groove">Operadora</td>
				<td style="border-color:white" style="border-style:groove">Status SIMCard</td>
				<td style="border-color:white" style="border-style:groove">Quantidade</td>
				<!-- <td style="border-color:white" style="border-style:groove">EXCEL</td>  -->
			</tr>

		</table>
		<br>

		<td><a href="javascript: if (confirm('Deseja Realmente Gerar a Planilha?')) {alert('Ao clicar em OK, Aguarde Gerar o Relatório'); window.location.href='ServletGeraRelatorio?MultiplosDadosAtuais2=${MultiplosDadosAtuais2}'} else { void('') };"><input type="button" onclick="disabled = true" value="Baixar Arquivo"></a></td>
		<br>
		<br>
		<hr>
		<br>

            <!-- <input type="button" onclick="javascript: location.href='index.jsp';" value="Voltar" /> -->
        <br>
        <br>

        </center>
	
</div>


	<script>
		var msgRetornoFiltro = document.getElementById("msgRetornoFiltro");
		
		if (msgRetornoFiltro != null && msgRetornoFiltro.value != "") {
			alert(msgRetornoFiltro.value);
		}
	</script>
</body>

</html>

CL4nG · Agosto 11, 2014

Mas você simplesmente mudou o código...

O certo é:

$("#content").html(conteudo);

E não:

$("#content").jsp(conteudo);

rdpacato · Agosto 12, 2014

Eu tentei dos dois jeitos... mas não funcionou...

Não sei o que fazer, ele simplesmente não carrega na div, achei um outro código, mas ele abre outra página, e não dentro da div...

	<script type="text/javascript">
	$(document).ready(function(){
		var content = $('#content');
 
		//pre carregando o gif
		loading = new Image(); loading.src = './img/carregando.gif';
		$('#menu-option a').live('click', function( e ){
			e.preventDefault();
			content.html( '<img src="./img/carregando.gif"/>' );
 
			var href = $( this ).attr('href');
			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var data = $( '<div>'+response+'</div>' ).find('#content').html();
 
					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();
						});
					}, 500 );
				}
			});
 
		});
	});
	</script>

	<div id="nav">
		<!-- menu -->
		<ul  id="menu-option">
			<li><a href="index.jsp" id="">Home</a></li>
			<li><a href="perfilMotorista.jsp" id="">Perfil Motorista</a></li>
			<li><a href="login.jsp" id="">login</a></li>
		</ul>
	</div>

rdpacato · Agosto 12, 2014

Consegui com esse:

function alterar_div() {
  $.ajax({
    type: "POST",
    url: "teste5.html",
    data: {},
    success: function(data) {
      $('#conteudo').html(data);
    }
  });
}

<body>
	<ul id="menu">
		<li><a href="teste5.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="contato.html">Contato</a></li>
		<button type="button" onclick="alterar_div()">Alterar</button>
	</ul><!-- /menu -->
	<div id="conteudo">Este conteúdo será alterado</div>

		<h1>Bem Vindo!</h1>
		<p>Essa eh a home desse nome pseudo-site.</p>
	</div><!-- /content -->
</body>

Mas não funcionam os javascripts dessa pagina carregada

CL4nG · Agosto 12, 2014

Vamos lá novamente...

index.html

<html>
<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script>
		$(document).ready(function(){

			/* Ao clicar no link o conteúdo será aberto na div content. */
			$(".menu-option").click(function(event){

				/* Isso faz com que a ação padrão que é abrir o link, seja ignorada.*/
				event.preventDefault();
				var url = $(this).attr("href");

				/* Obtendo o conteúdo da página */
				$.get(url, function(pagina){
					$("#content").html(pagina);
				});

				/* Posso também passar parâmetros para as páginas via GET OU POST
				$.post(url, {id: "10"} function(pagina){
					$("#content").html(pagina);
				});
				*/	
			});
		});
	</script>

	<style>
		header nav ul li{display: inline;}
		#content{border: 1px solid red; height: 300px; width: 350px};
	</style>
</head>
<body>

	<header>
		<nav><ul>
			<li><a href="home.html" class="menu-option">Home</a></li>
			<li><a href="sobre.html" class="menu-option">Sobre</a></li>
			<li><a href="contato.html" class="menu-option">Contato</a></li>
		</ul></nav>
	</header>

	<div id="content">
		<!-- Todo conteúdo da página será carregado aqui -->
	</div>
</body>
</html>

home.html

<h1>Página Home</h1>

sobre.html

<h1>Página Sobre</h1>

contato.html

<h1>Página Contato</h1>

Coloque todos os arquivos no mesmo diretório e faça o teste.

rdpacato · Agosto 13, 2014

Funcionou com teste em html, quando coloco na minha aplicação e tento chamar jsp não funciona... só aquele jeito anterior que postei como botão... do seu jeito tenho que colocar : pagina = {}; mas ai ele abre em página nova...

mas obrigado e desculpe pela minha falta de conhecimento... mas ainda estou com um problema de não funcionar o JS da página carregada dentro da DIV.

Outra dúvida, qual a melhor maneira de usar estes métodos de AJAX? pois quando carrego a página que quero, não carrega dentro dos limites da DIV, carrega em toda a página mantendo os botões lá (neste exemplo do home, sobre e contato) mas pega toda a configuração da página carregada...

Estou usando esta função para o submit também:

	$("#formAll").submit(function(e)
	{
	 
	    var formObj = $(this);
	    var formURL = formObj.attr("action");
	    var formData = new FormData(this);
	    $.ajax({
	        url: formURL,
	    type: 'POST',
	        data:  formData,
	    mimeType:"multipart/form-data",
	    contentType: false,
	        cache: false,
	        processData:false,
	    success: function(data, textStatus, jqXHR)
	    {
	    	$('#content').html(data, textStatus, jqXHR);
	    },
	     error: function(jqXHR, textStatus, errorThrown) 
	     { 
	    	 alert("ERRO AO SUBMETER");
	     }          
	    });
	    e.preventDefault(); //Prevent Default action. 
	    e.unbind();
	}); 
	$("#formAll").submit(); //Submit the form

	
	</script>

CL4nG · Agosto 13, 2014

Se da forma que te passei não funcionou então não vai funcionar de nenhum outro jeito.
O problema não é em carregar o conteúdo dentro da div, o problema é o que você está fazendo no seu ambiente de teste.

São vários fatores: Arquivos em diretórios diferente, testando fora do diretório do servidor web...

rdpacato · Agosto 13, 2014

acho que deve ser algum detalhe CL4nG, porque com aquele outro meio de colocar uma página a ser direcionada e em forma de botão não de link, funciona... se fosse por um destes motivos não teria funcionado de outro meio...

CL4nG · Agosto 14, 2014

Os exemplos que te mostrei funciona com qualquer tipo de arquivo (html, php, jsp...).
Posta seu código completo ae... Você deve ter modificado ou feito algo que está dando esse problema.

rdpacato · Agosto 14, 2014

Vc me passaria seu email por MP?

Assim te mando tudo, pois se colocar arquivos JS e os códigos, vai ficar grande aqui...

rdpacato · Agosto 14, 2014

_{Conseui hospedar nesse site...}

_{http://d01.megashares.com/dl/IWb8gXN/teste.zip}

_{A pagina principal é a 3.html}

_{Minha dúvida:}

_{- Como abrir dentro da DIV "content" em um tamanho fixo, sem abrir por cima de tudo}

_{- Como deixar uma página pré carregada na "content"}

_{- Como fazer funciona JS dentro desta página que foi aberta na "content"}

_{- E deixar o menu por cima sempre, sem movimentar a "content"}

_{Estas são minhas dúvidas.. não sei mais onde recorrer.. o W Bruno tbm ficou de me ajudar, mas está difícil de eu desenroscar disso rsrs....}

Arquivado

Esconder um frame ao clicar em um botão

Recommended Posts

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2