Abrir um tela dentro da outra usando o AJAX

Marcos Barbosa · Maio 6, 2010

Pessoal, estou estudando o conteúdo do site http://www.tableless.com.br/artigos/ajaxdemo/, e estou com dúvidas, se alguém puder conseguir me ajudar será de grande valia.

Bem, minha intenção é exatamente o que tem proposto no site, chamar outra página e abri-la dentro da página atual. Tô com dúvida na parte que se refere aos link´s, como chamar uma página ? Exemplo:

No site está assim:

<li><a href="?i=1"<?classi(1)?> title="Parte 1">Introdução</a></li>
<li><a href="?i=2"<?classi(2)?> title="Parte 2">Objetivos</a></li>
<li><a href="?i=3"<?classi(3)?> title="Parte 3">Site comum</a></li>
<li><a href="?i=4"<?classi(4)?> title="Parte 4">Parte 4</a></li>
<li><a href="?i=5"<?classi(5)?> title="Parte 5">Parte 5</a></li>

Digamos que eu queira que ao clicar em introdução ele chame a página home.html ou home.php, onde eu coloco o nome da página a ser chamada ? Já fiz algumas tentativas e nada deu certo.

J.Casagrande · Maio 6, 2010

Da uma estudada no ajax por jQuery, é mais facil...

Você pode ter na página algo assim:

<div id="menu">
<a id="link" href="javascript:void(0);">
	Link
</a>
</div>
<div id="loadAjax">
</div>

e o javascript vai ter algo assim:

$('#link').click(function(){
	$.ajax({
		type : "POST",
		url : "site.php",
		data : "seus=posts&separados=assim",
		datatype : "html",
		success : function(html){
			$('#loadAjax').html(html);
		}
	});
});

se eu não me engano era assim, não tenho certeza agora.

Marcos Barbosa · Maio 6, 2010

Pessoal, consegui fazer de uma outra forma, entrei esse exemplo na net, nesse site: http://www.mxstudio.com.br/javascript/carregar-uma-pagina-dentro-de-uma-div-com-ajax/, funcionou, mas aí surgiu outra dúvida: ao chamar o link ele vai para a página, mas se dentro dessa página tiver outro link ele abre em uma página em branco, vou postar aki da forma q fiz:

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>Telemedicina da Bahia - Agilidade a serviço da vida</title>
		<style type="text/css">
			<!--
			#index {
				display: block;
				height: 500px;
				width: 800px;
				background-image: none;
				margin-left: 100px;
			}
			#index #cabecalho {
				display: block;
				height: 80px;
				width: 800px;
			}
			#index #menu {
				display: block;
				float: left;
				height: 300px;
				width: 200px;
				margin: auto;
			}
			#index #conteudo {
				display: block;
				height: 500px;
				width: 600px;
				padding: auto;
				float: right;
			}
			#index #rodape {
				display: block;
				height: 30px;
				width: 780px;
				clear: both;
				font-family: Verdana, Geneva, sans-serif;
				font-size: 12px;
				color: #360;
			}
			-->
		</style>
		<link href="estilos.css" rel="stylesheet" type="text/css">
        
        <script language="javascript" src="ajax.js"></script>
		<script language="javascript" src="instrucao.js"></script>

	</head>

	<body>
       
		<div id="index">
			<div id="cabecalho">
				<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td width="28%" rowspan="5" align="center" valign="top"><img src="imagens/logo_telemedicina.jpg" width="165" height="81" /></td>
						<td width="60%" align="center">Telemedicina a Serviço da Vida</td>
						<td width="12%"><img src="imagens/tit.jpg" width="186" height="50" /></td>
					</tr>
					<tr>
						<td align="center"><strong><font-family: Arial, Helvetica, sans-serif>Data:</strong>
							<?php 
								$dia_da_semana=array("Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado");
								$numero_dia=date("w"); // o parametro w retorna o nº do dia da semana exemplo:domingo=0 segunda=1 assim por diante.
								$dia_extenso = $dia_da_semana[$numero_dia]; // pega o $numero_dia associa ao $dia_da_semana e coloca o valor, exemplo $numero_dia=0, o valor referente em $dia_da_semana=Domingo
								echo $dia_extenso.",".date("d/m/Y"); // imprime a data colocando no nosso formato.
							?> <strong>Hora:</strong><?php echo date("H:i");?></font>
						</td>
						<td>Usuário:</td>
					</tr>
					<tr>
						<td> </td>
						<td> </td>
					</tr>
					<tr>
						<td> </td>
						<td> </td>
					</tr>
				</table>
			</div>
			<div id="menu">
				<p></p>
				<table width="100%" border="0" cellspacing="0" cellpadding="0" id="botaoMenu">
					<tr>
						<td align="center"><img src="imagens/cadastro.jpg" width="136" height="13" /></td>
					</tr>
					<tr>
						<td><ul>
							<li><a href="#" onclick="abrirPag('home.php');" class="meio">Home</a></li>
							<li><a href="#" onclick="abrirPag('lista_categoria.php');" class="meio">Categoria</a></li>
                            <li><a href="#" onclick="abrirPag('lista_exames.php');" class="meio">Exames</a></li>
                            <li><a href="#" onclick="abrirPag('lista_pacientes.php');" class="meio">Pacientes</a></li>
                            <li><a href="#" onclick="abrirPag('lista_medicos.php');" class="meio">Médicos</a></li>
                            <li><a href="#" onclick="abrirPag('lista_funcionarios.php');" class="meio">Funcionários</a></li>
                            <li><a href="#" onclick="abrirPag('lista_convenios.php');" class="meio">Convênios</a></li>
                            <li><a href="#" onclick="abrirPag('lista_resultado.php');" class="meio">Resultados</a></li>

						</ul></td>
					</tr>
				</table>
				
			</div>
			<div id="conteudo">
				<p></p>
<table width="100%" height="100%" border="0" align="center">
					<tr>
					
					</tr>
	  </table>
			</div>
			<div id="rodape">
				<td align="center"><img src="imagens/rodape.gif" width="776" height="50" /></td>
			</div>
			<p></p>
		</div>
        
	</body>
</html>

instrucao.js


function abrirPag(valor){

var url = valor;


xmlRequest.onreadystatechange = mudancaEstado;

xmlRequest.open("GET",url,true);

xmlRequest.send(null);


if (xmlRequest.readyState == 1) {

document.getElementById("conteudo").innerHTML = "<img src='loader.gif'>";

}


return url;

}


function mudancaEstado(){

if (xmlRequest.readyState == 4){

document.getElementById("conteudo").innerHTML = xmlRequest.responseText;

}

}

function GetXMLHttp() {

    if(navigator.appName == "Microsoft Internet Explorer") {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else {

        xmlHttp = new XMLHttpRequest();

    }

    return xmlHttp;

}

var xmlRequest = GetXMLHttp();

Se caso eu clique no link lista_categoria, abre corretamente, mas nele tenho um outro link que abre em outra página, como posso resolver isso ?

lista_categoria.php

<?php include ("conexao.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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
-->
</style>
<link href="estilos.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>

</head>

<body>
<form action="" method="post" name="lista_categoria">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
  
    <td class="cat_cat"><div align="center"><strong>Lista geral de Categorias </strong></div></td>
  </tr>
  <tr>
  <td><strong>Digite um nome para consultar:</strong><label>
  <input name="txt_categoria" type="text" id="txt_categoria" size="30" maxlength="40" />
  <input type="submit" name="consulta_categoria" id="consulta_categoria" value="Consultar" />
  </label></td>
  </tr>
  
  <tr>
    <td><table width="100%" border="0" cellspacing="2" cellpadding="0">
      <tr>
        <td width="13%" class="tarja"><strong>Código</strong></td>
        <td width="74%" align="center" class="tarja"><strong>Categorias</strong></td>
	    <td colspan="2"><div align="center" class="tarja"><strong>Ação</strong></div></td>
        </tr>
		
		<?php 
			if (isset($_POST["consulta_categoria"]))
			{
				$txt_categoria = $_POST["txt_categoria"];
				$sql = mysql_query("select * from categoria where descriscao_cat like '$txt_categoria%' order by descriscao_cat") or die ("Erro nº 2");
			}
			else
			{
				$sql=mysql_query("select * from categoria order by descriscao_cat") or die ("Erro nº 2 ");
			}

			while ($linha = mysql_fetch_array($sql)){	
		?>
      <tr>
        <td align="center" class="meio"><?php echo $linha[codigo_cat]; ?></td>
        <td class="meio"><?php echo $linha[descriscao_cat]; ?></td>
        <td width="7%" align="center" class="meio"><a href="frm_categoria.php?acao=Alterar&codigo_cat=<?php echo $linha[codigo_cat]; ?>"><img src="imagens/alterar.gif" width="16" height="16" border="0" /></a></td>
        <td width="6%" align="center" class="meio"><a href="frm_categoria.php&acao=Excluir&codigo_cat=<?php echo $linha[codigo_cat]; ?>"><img src="imagens/excluir.gif" width="16" height="16" border="0" /></a></td>
      </tr>
	  <?php } ?>
      <tr>
      
        <td colspan="4" align="right" class="meio"><a href="frm_exames.php"><img src="imagens/inserir.gif" alt="" width="55" height="16" border="0" /></a></td>
        </tr>
    
    </table></td>
    
    
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
</form>
</body>
</html>

Entrar

Arquivado

Abrir um tela dentro da outra usando o AJAX

Recommended Posts

Marcos Barbosa 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

J.Casagrande 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Barbosa 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante