[Resolvido] Conteúdo abre na <DIV> com GET

Eduardo Villa · Março 23, 2010

Olá galera,

Estou com uma dúvida.

Consigo abrir uma página HTML ou PHP em uma <DIV id='conteudo'>, mas na hora que chamo reunioes.php?funcao=inserir não funciona...

ajax.js

function GetXMLHttp(){
	var xmlHttp;
	try{
		xmlHttp = new XMLHttpRequest();
	}
	catch(ee){
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				xmlHttp = false;
			}
		}
	}
	return xmlHttp;
}
var xmlRequest = GetXMLHttp();

funcoes.js

function Pag(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='imagens/carregando.gif'>";
	}
	return url;
}

function mudancaEstado(){
	if(xmlRequest.readyState == 4){
		document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
	}
}

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript" src="js/funcoes.js"></script>
</head>
<body>

<div id="menu">
	<a href="#" onClick="Pag('reunioes.php?funcao=inserir');">Cadastrar</a>
	<a href="#" onClick="Pag('0.php');">0</a>
	<a href="#" onClick="Pag('1.php');">1</a>
</div>

<br><br>
<div id="conteudo"></div>

<div id="rodape"></div>
</body>
</html>

Aguardo resposta...

Valew

Eduardo Villa · Março 24, 2010

Descobri que não tinha nada errado com o código postado... eu que estava fazendo bobeira.

Mas se você puder mover para a parte correta agradeço.

Estou com um problema, não consigo fazer com que a ação do formulário abra dentro da <DIV>

Exemplo:

<form action='xxxx.php?funcao=inserir' method='post'>
  <input type='submit' class='botao' value='Salvar Dados'>     
</form>

Para os links eu utilizo assim:

<a href="#" onClick="Pag('default.php');"> xxxxx </a>

William Bruno · Março 24, 2010

Bom cara, ai acredito que você não poderá usar o action.

você precisa disparar outra requisição ajax, mandando os dados por POST/GET

lembre-se de pegar os valores de todos os campos do form, antes de tentar envia-lo.

exemplo:

reunioes.php

<form action="xxxx.php" method="post" id="form-ajx">
		<input type="text" name="teste" id="teste" value="Teste" />
		<input type="button" value="Salvar Dados" onclick="f_ajx()" />     
	</form>

xxxx.php

<?php
	var_dump( $_POST );

index.php

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Carregando Página em DIV / AJAX</title>
<script type="text/javascript">
function GetXMLHttp(){
	var xmlHttp;
	try{
		xmlHttp = new XMLHttpRequest();
	}
	catch(ee){
		try{
			xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
		}catch(e){
			try{
				xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
			}catch(e){
				xmlHttp = false;
			}
		}
	}
	return xmlHttp;
}
var xmlRequest = GetXMLHttp();
function Pag( url )
{
	xmlRequest.onreadystatechange = mudancaEstado;
	xmlRequest.open( 'GET', url, true );
	xmlRequest.send(null);
	if( xmlRequest.readyState==1 )
	{
		id('conteudo').innerHTML = '<img src="imagens/carregando.gif" alt="" />';
	}
	return url;
}

function mudancaEstado()
{
	if( xmlRequest.readyState == 4 ){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}
function f_ajx()
{
	var url = id('form-ajx').action;
	xmlRequest.open( 'POST', url, true );
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xmlRequest.send( 'teste='+id('teste').value );
	xmlRequest.onreadystatechange = function()
	{
		Pag( url );
	}
}
function id( el )
{
	return document.getElementById( el );
}
</script>
</head>
<body>
	<div id="menu">
		<a href="#" onclick="Pag('reunioes.php');">Cadastrar</a>
		<a href="#" onclick="Pag('0.php');">0</a>
		<a href="#" onclick="Pag('1.php');">1</a>
	</div>

	<br><br>
	<div id="conteudo"></div>

	<div id="rodape"></div>
</body>
</html>

dá para melhorar essa função Pag. Acredito que o # na URL não era a tua intenção, além do que teu sistema não funciona se o cara desativar o Javascript.

Eduardo Villa · Março 24, 2010

Alterei meu código de acordo com o exemplo que você me passou e não está funcionando o formulário...

Você tem algum material que possa me passar para dar uma melhorada na função Pag?

William Bruno · Março 24, 2010

erro meu, desculpe.. só tinha testado no Chrome..

troque:

        xmlRequest.onreadystatechange = function()
        {
                Pag( url );
        }

por:

        xmlRequest.onreadystatechange = function()
        {		
                id("conteudo").innerHTML = xmlRequest.responseText;
        }

cara, não tenho nenhum material por aqui.. pesquise.. uma idéia que tive, foi deixar nos links, o caminho real, para o caso do cara estar sem JS, poder funcionar o sistema. Ai usando um preventDefault() você desativa o click com JS.

Mas se concentra em resolver o problema primeiro.

Você deve ter errado ou mudado algo. Mostre como fez.

Eduardo Villa · Março 24, 2010

vixi, cara depois eu tento fazer essas mudançascom preventDefault()... kkkk

será que fiz algo errado?

ajax.js

function GetXMLHttp(){
	var xmlHttp;
	try{
		xmlHttp = new XMLHttpRequest();
	}
	catch(ee){
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				xmlHttp = false;
			}
		}
	}
	return xmlHttp;
}
var xmlRequest = GetXMLHttp();

funcoes.js

function Pag(valor){
	var url = valor;
	xmlRequest.onreadystatechange = mostraPag;
	xmlRequest.open("GET",url,true);
	xmlRequest.send(null);
	if(xmlRequest.readyState == 1){
		document.getElementById("conteudo").innerHTML = "<img src='imagens/carregando.gif'>";
	}
	return url;
}
function mostraPag(){
	if(xmlRequest.readyState == 4){
		document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
	}
}
function form(){
	var url = id('form-ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xmlRequest.send('login='+id('login').value);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}
function id(el){
	return document.getElementById(el);
}

reunioes.php

<?php
if($funcao == "formulario"){
	echo "<form action='' method='post' id='form-ajax'>
  <label>Login</label> <font class='obs'>(máximo 20 caracteres)</font><br />
    <input id='login' maxlength='20' name='login' size='21' type='text' value=".$empresas['login']."><br />

  <input class='botao' onclick='form()' type='submit' value='Salvar Dados'>     
</form>";
}

elseif($funcao == "inserir"){
  var_dump($_POST['login']);	
}
?>

Eduardo Villa · Março 24, 2010

Willian me explique uma coisa, você falou que se o cara estiver com o JS boqueado, não funciona o sistema.

Então não compensa fazer o cadastro por meio de função JS, utilizando PHP e MySQL?

William Bruno · Março 24, 2010

Pessoalmente, eu não faria ^_^ Mas enfim...

de onde vem: $funcao ??

está tentando trabalhar com register_globals ativado ? (retire esse IF, ou então envie esse parâmetro por POST tb, e valide com if( $_POST['funcao'] ).. )

ps: deixa todos esses códigos JS no mesmo arquivo.

Eduardo Villa · Março 24, 2010

nunca me atentei a isso, mas você acha que devo utilizar ini_set("register_globals", "OFF");?

$funcao = $_GET['funcao'];

- quando vou cadastrar utilizo $funcao = "cadastrar";

Exemplo:

if($funcao = "cadastrar"){

INSERT...

}

- quando vou alterar os dados utilizo $funcao = "alterar";

Exemplo:

elseif($funcao = "alterar"){

UPDATE...

}

- quando vou excluir os dados utilizo $funcao = "apagar";

Exemplo:

else{

DELETAR...

}

William Bruno · Março 24, 2010

nunca me atentei a isso, mas você acha que devo utilizar ini_set("register_globals", "OFF");?

Sim! certamente que sim! register_globals é uma má prática!

você pode até ter problemas de segurança, ao confiar teu script com register_globals On

Aviso

Este recurso tornou-se OBSOLETO a partir do PHP 5.3.0 REMOVIDO do PHP 6.0.0. Confiar neste recurso é extremamente não recomendado.

http://br.php.net/manual/pt_BR/ini.core.php#ini.register-globals

Essa diretiva não será mais configurável, e virá OFF nas próximas versões do php, comece desde já a se acostumar com boas práticas de programação.

no teu caso, envie por POST tb:

xmlRequest.send('login='+id('login').value+'&funcao=inserir');

Eduardo Villa · Março 24, 2010

Nossa preciso de tempo para estudar mais de tudo viw...

Me explique por favor esta linha.

xmlRequest.send('login='+id('login').value+'&funcao=inserir');

Pois no caso peguei um item do formulário(LOGIN) e se tiver mais?

E também esse item que vai na $funcao como INSERIR, ALTERAR, APAGAR e outros é uma variavél... Como que ficaria?

William Bruno · Março 24, 2010

id() é uma função apelido que criei para:

document.getElementById()

.value é o atributo value="" dos inputs. É através dele que você consegue oque foi digitado.

+ é o operador de concatenação do Javascript.

os dados são enviados em formato de query string

xmlRequest.send('login='+id('login').value+'&senha='+id('senha').value+'&funcao=inserir');

basta ir formando a qs com os valores que você deseja, e enviar o post via ajax.

deu certo ?

Eduardo Villa · Março 24, 2010

nossa estou te enchendo o saco né kkk

sustitui esta linha e não funcionou não...

não retorna nada, será que não pode ser porque eu coloco $funcao = $_GET['funcao'];

function form(){//ACTION DOS FORMULÁRIOS
	var url = id('form-ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xmlRequest.send('login='+id('login').value+'&senha='+id('senha').value+'&funcao=inserir');
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

if($funcao == "formulario"){
	echo "<form action='#' method='post' id='form-ajax'>
    <label>Login</label> <font class='obs'>(máximo 20 caracteres)</font><br />
		<input id='login' maxlength='20' name='login' size='21' type='text' value=".$empresas['login']."><br />
    
    <label>Senha</label> <font class='obs'>(máximo 15 caracteres)</font><br />
    	<input id='senha' maxlength='15' name='senha' size='21' type='password' value=".$empresas['senha'].">
}

elseif($funcao == "inserir"){
    echo $_POST['login'];
}

William Bruno · Março 24, 2010

Repetindo:

(retire esse IF, ou então envie esse parâmetro por POST tb, e valide com if( $_POST['funcao'] ).. )

veja:

reuniao.php

<?php
$funcao = $_POST['funcao'];


	if($funcao == "formulario")
	{
			echo "<form action='#' method='post' id='form-ajax'>
		<label>Login</label> <font class='obs'>(máximo 20 caracteres)</font><br />
					<input id='login' maxlength='20' name='login' size='21' type='text' value=".$empresas['login']."><br />
		
		<label>Senha</label> <font class='obs'>(máximo 15 caracteres)</font><br />
			<input id='senha' maxlength='15' name='senha' size='21' type='password' value=".$empresas['senha'].">";
	}

	elseif($funcao == "inserir")
	{
		echo $_POST['login'];
	}

Eduardo Villa · Março 24, 2010

William,

Desculpe mas não sei mais o que fazer...

Então zipei a pasta com 4 arquivos, se você puder dar uma olhada.

BAIXAR

TESTE(pasta principal)

|- js (pasta dos arquivos javascript)

|- default.php (arquivo principal)

|- menu.html (itens do menu)

|- meusdados.php (arquivo com o formulário)

William Bruno · Março 24, 2010

tem coisas básicas erradas.. dá uma estudada em tudo.. HTML, php, CSS, Javascript..

meusdados.php

<?php
	$sql = mysql_query("SELECT * FROM empresas WHERE id='".$_SESSION['id']."'");
	$empresas = mysql_fetch_array($sql);
?>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/sistemanews.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/funcoes.js"></script>


	<div id="contorno">
		<legend>Meus Dados</legend>

		<form action="processa_meusdados.php" method="post" id="form_ajax">
			<label>Login</label> <font class="obs">(máximo 20 caracteres)</font><br />
				<input id="login" maxlength="20" name="login" size="21" type="text" value="<?php echo $empresas['login']; ?>" /><br />

			<label>Senha</label> <font class="obs">(máximo 15 caracteres)</font><br />
				<input id="senha" maxlength="15" name="senha" size="21" type="password" value="<?php echo $empresas['senha']; ?>" /></td>

			<br /><br />
			<label>Responsável</label><br />
				<input name="responsavel" type="text" size="50" value="<?php echo $empresas['responsavel']; ?>" /><br />

			<label>Razão Social</label><br />
				<input name="razaosocial" type="text" size="50" value="<?php echo $empresas['razaosocial']; ?>" /><br />

			<label>CNPJ</label><br />
				<input name="cnpj" type="text" size="50" value="<?php echo $empresas['cnpj']; ?>" /><br />

			<label>Endereço</label><br />
				<input name="cnpj" type="text" size="50" value="<?php echo $empresas['endereco']; ?>" /><br />
			
			<input class="botao" onclick="f_ajx()" type="button" value="Salvar Dados" />     
		</form>
	</div><!-- /contorno -->

troca a tua função: form()

por esta:

function f_ajx()
{
	var url = id('form_ajax').action;
	alert( url );
	
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	var dados = 
		'login='+id('login').value+
		'$senha='+id('senha').value+
		'&funcao=inserir';
		
		
	xmlRequest.send( dados );
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

e agora:

processa_meusdados.php

<?php

	var_dump( $_POST );

qnto aos includes, deixa eles lá na tua 'default.php', junto com o session_start().. não tem pq você abrir a sessão em cada página que trazer..

Eduardo Villa · Março 25, 2010

Finalmente funcionou...

Agora só me explica uma coisa:

var dados = 
           'login='+id('login').value+
           '$senha='+id('senha').value+
           '&funcao=inserir';

1- No arquivo processa_meusdados.php como vou chamar afuncao=inserir?

2- Como farei para fazer está parte dinâmica, pois cada formulário tem os seus itens e valores?

3- Só quero ver como vou fazer para separar os dados visualizados pelo var_dump($_POST); kkkk

Eduardo Villa · Março 25, 2010

o item 1 e 3 já resolvi, só falta saber o 2...

William Bruno · Março 25, 2010

Faz um loop percorrendo todos as tags input do form.

a funcao getElementsByTagName() pode te ajudar com isso.

Acesse os atributos .name e .value e forme a query string que você precisa.

Eduardo Villa · Março 25, 2010

Muito obrigado pela sua ajuda e tempo...

Pode fechar o tópico!

Arquivado

[Resolvido] Conteúdo abre na <DIV> com GET

Recommended Posts

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2