[Resolvido] Fazer tudo na <DIV id='conteudo'>

Eduardo Villa · Maio 5, 2010

Olá galera,

A um tempo atrás conversei com o William Bruno e ele me deu a maior força neste mesmo problema, mas derepente tudo parou de funcionar...

O formulário não pratica a sua acão e se tirar o type='button' e substituir por type='submit' abre for da <DIV>

Alguém pode dar uma analisada por favor...

FUNCOES.JS

// FUNÇÃO AJAX
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();

// FUNÇÃO QUE PEGA OS LINKs DE CADA PÁGINA
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 alt='carregando...' src='../imagens/carregando.gif'>";
	}
	return url;
}

// FUNÇÃO QUE FAZ COM QUE ABRA AS PÁGINAS NA DIV 'CONTEÚDO'
function mostraPag(){
	if(xmlRequest.readyState == 4){
		document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
	}
}

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <INPUTs> DOS FORMULÁRIOS
function form2Qs(form_ajax){
	var form = document.getElementById(form_ajax);
	var inputs = form.getElementsByTagName('input');
	
	var dados = '';
	for( var i=0; i<inputs.length; i++ ){
		dados += inputs[i].name+'='+inputs[i].value+'&';
	}
	return dados;
}

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <TEXTAREAs> DOS FORMULÁRIOS
function form3Qs(form_ajax){
	var form = document.getElementById(form_ajax);
	var textareas = form.getElementsByTagName('textarea');
	
	var dados = '';
	for( var i=0; i<textareas.length; i++ ){
		dados += textareas[i].name+'='+textareas[i].value+'&';
	}
	return dados;
}

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <SELECTs> DOS FORMULÁRIOS
function form4Qs(form_ajax){
	var form = document.getElementById(form_ajax);
	var selects = form.getElementsByTagName('select');
	
	var dados = '';
	for( var i=0; i<selects.length; i++ ){
		dados += selects[i].name+'='+selects[i].value+'&';
	}
	return dados;
}

// FUNÇÃO QUE RECEBE TODOS OS NOMES E VALORES DE TODOS OS <INPUTs> E <TEXTAREAa> RECOLHIDOS DOS FORMULÁRIOS
function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	var dados = '?'+form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax')+'&funcao='+document.getElementById('funcao').value;
	
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}


function id(el){
	return document.getElementById(el);
}

NOTICIAS.PHP

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

/***********************************************************/
/******************* INSERIR NOTÍCIAS **********************/
if($funcao == "inserir"){
	echo "
		<form action=\"#\" id='form_ajax' method='post'>
			<input name='funcao' type='hidden' value='cadastrar' />
			
			<label>Título</label><br />
				<input class='dados_resp' id='titulo' name='titulo' type='text' size='60' /><br /><br />
				
			<label>Chamada</label><br />
				<textarea class='dados_resp' onkeyup='blocTexto(this.value)' name='chamada' style='width:46%' rows='4'></textarea><br />
				<div class='exemplo' style='width:386px; text-align:right;'>
					Caracteres restantes: <span id='cont'>200</span>
				</div><br />
					  
			<label>Reporter</label><br />
				<input class='dados_resp' id='reporter' name='reporter' type='text' size='60' /><br /><br />
			
			<textarea class='dados_resp' id='texto' name='texto' style='width:98%' rows='10'></textarea><br /><br />
			
			<label>Status</label><br />
				<select name='status' class='dados_resp'>
					<option value=''></option>
					<option value='sim'>Sim</option>
					<option value='nao'>Não</option>
				</select><br />
			
			<input class='formulario' onclick='f_ajx()' type='button' value='Cadastrar' />
		</form>";



if($funcao == "cadastrar"){
	$diretorio = '../xxxxx/xxxxx/noticias/';
	$pesoMax = '5000000'; //Corresponde a 10Mb

	$imagem = $_FILES['img'];
	if($imagem['size'] > $pesoMax){
		echo '<script type="text/javascript">
				alert("Arquivo muito grande, o arquivo deve ter no máximo 5Mb");
				history.back();
			  </script>';
		exit;				
	}else{
		$caminho = $diretorio.$imagem['name'];
		if(move_uploaded_file($imagem['tmp_name'], $caminho) == ""){
			echo '<script type="text/javascript">
					alert("Selecione a imagem desejada!");
					history.back();
			  	  </script>';
		}else{
			$casas  = strlen($imagem['name']) -4;
			$extensao = substr($imagem['name'], -4, 4);
			$aqv = substr($imagem['name'], 0, $casas);
			$img = strtolower(remover($aqv).$extensao);

			$tabela_ = "xxxxx";
			$campos_ = "empresa, coordenadoria, titulo, chamada, imagem, reporter, texto, status, ipcad, cadastradopor, datacad, horacad";
			$valores_ = "'".$_SESSION['empresa']."', '".$_POST['coordenadoria']."', '".$_POST['titulo']."', '".$_POST['chamada']."', '".$img."', '".$_POST['reporter']."', '".$_POST['texto']."', '".$_POST['status']."', '".$ip."', '".$_SESSION['nome']."', '".$data."', '".$hora."'";
			$alertap_ = "A notícia foi cadastrada com sucesso!";
			$alertan_ = "Ocorreu um erro! Tente novamente mais tarde.";
			$redirecionar_ = "noticias.php";
			
			inserir($tabela_, $campos_, $valores_, $alertap_, $alertan_, $redirecionar_);
		}
	}
}

?>

Pensei que desta forma fosse me ajudar, mas cada dia um problema diferente...

Acho que vou voltar para o IFRAME mesmo kkkkk

valew galera...

consegui fazer mas ainda esta dando erro no retorno dos dados...

O que não estou conseguindo fazer é pegar alguns dados do formulário pelo JAVASCRIPT e recuperar via POST.

Notei que tem hora que funciona normal e tem hora que não funciona, principalmente quando tento pegar o valor de um <INPUT>

Para pegar os valores, fiz um LOOP assim:

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <INPUTs> DOS FORMULÁRIOS
function form2Qs(form_ajax){
   var form = document.getElementById(form_ajax);
   var inputs = form.getElementsByTagName('input');
  
   var dados = '';
   for( var i=0; i<inputs.length; i++ ){
      dados += inputs[i].name+'='+inputs[i].value+'&';
   }
   return dados;
}
 
// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <TEXTAREAs> DOS FORMULÁRIOS
function form3Qs(form_ajax){
   var form = document.getElementById(form_ajax);
   var textareas = form.getElementsByTagName('textarea');
  
   var dados = '';
   for( var i=0; i<textareas.length; i++ ){
      dados += textareas[i].name+'='+textareas[i].value+'&';
   }
   return dados;
}
// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <SELECTs> DOS FORMULÁRIOS
function form4Qs(form_ajax){
   var form = document.getElementById(form_ajax);
   var selects = form.getElementsByTagName('select');
  
   var dados = '';
   for( var i=0; i<selects.length; i++ ){
      dados += selects[i].name+'='+selects[i].value+'&';
   }
   return dados;
}
 
// FUNÇÃO QUE RECEBE TODOS OS NOMES E VALORES DE TODOS OS <INPUTs> E <TEXTAREAa> RECOLHIDOS DOS FORMULÁRIOS
function f_ajx(){
   var url = id('form_ajax').action;
   xmlRequest.open("POST", url, true);
   xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 
   var dados = '?'+form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax');
   xmlRequest.send(dados);
   xmlRequest.onreadystatechange = function(){
      id("conteudo").innerHTML = xmlRequest.responseText;
   }
}

Será que pode ter alguma coisa que quando pega o INPUT, não funcione o TEXTAREA ou o SELECT?

William Bruno · Maio 6, 2010

Dá um alert aqui:

var dados = '?'+form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax');

   alert( dados );
   xmlRequest.send(dados);

veja se a query string formada está correta.

Eduardo Villa · Maio 6, 2010

William o ALERT recebe todos os dados corretamente, mas quando eu recupero com o POST ele não funciona...

Por exemplo:

Ao inserir uma notícia o $_POST['título'] não é recuperado e na parte de alterar é utilizado o mesmo $_POST['titulo'] é recuperado normalmente.

William Bruno · Maio 6, 2010

Cara, faz os testes de inserir e atualizar, e cola aqui exatamente como ficou a querystring pra mim.

Talvez algo esteja quebrando a QS.

é uma estrategia diferente, mas veja que aqui, ele faz um encode da URL:

http://www.plugmasters.com.br/sys/materias/779/1/Enviando-um-formul%E1rio-POST-com-AJAX-e-PHP

talvez você esteja precisando disso tambem.

Após isso, faz um var_dump() lá do lado do servidor, e cola também exatamente oque ele te retornou.

Eduardo Villa · Maio 6, 2010

1-) Resultado do alert(dados):

?titulo=sdfsdf&reporter=sdfsdf&=Cadastrar&chamada=sdf&texto=sfsdfs&coordenadoria=3&

=Cadastrar -> É o valor do botão

2-) Resultado do var_dump($_POST):

array(5) { ["?titulo"]=> string(3) "sdf" ["reporter"]=> string(3) "sdf" ["chamada"]=> string(3) "sdf" ["texto"]=> string(3) "sdf" ["coordenadoria"]=> string(1) "6" }

3-) E quando mando inserir no banco faço uma função assim:

$tabela_ = "xxxx";

$campos_ = "empresa, coordenadoria, titulo, chamada, imagem, reporter, texto, status, ipcad, cadastradopor, datacad, horacad";

$valores_ = "'".$_SESSION['empresa']."', '".$_POST['coordenadoria']."', '".$_POST['descricao']."', '".$_POST['chamada']."', '".$_POST['imagem']."', '".$_POST['reporter']."', '".$_POST['texto']."', 'nao', '".$ip."', '".$_SESSION['nome']."', '".$data."', '".$hora."'";

$alertap_ = "A notícia foi cadastrada com sucesso!";

$alertan_ = "Ocorreu um erro! Tente novamente mais tarde.";

$redirecionar_ = "noticias.php";

Resultado do item 3:

xxxx

empresa, coordenadoria, titulo, chamada, imagem, reporter, texto, status, ipcad, cadastradopor, datacad, horacad

'1', '4', '', 'asdasd', 'imagem.jpg', 'sdasd', 'asdasd', 'nao', '201.48.211.123', 'Eduardo Barros Villa', '2010-05-06', '08:34:40'

A notícia foi cadastrada com sucesso!

Ocorreu um erro! Tente novamente mais tarde.

noticias.php

'' -> Note que aqui o campo título recebe um valor vazio... Este é o erro que está apresentando!

4-) Recarregamento automatico:

Depois de fazer a INSERÇÃO e a ALTERAÇÃO dos dados no banco de dados, fiz um redirecionamento por exemplo para a página "noticias.php" e assim que ela aparece os dados não foram atualizados... E para que eles sejam vizualidados agora alterados é necessário abrir novamente a página.

Não teria como fazer alguma coisa que ao ser redirecionado ele atualize a página dentro da <DIV>?

William Bruno · Maio 6, 2010

Olha o erro mostrado ali no teu var_dump():

array(5) { ["?titulo"]=>

troca:

var dados = '?'+form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax');

por:

var dados = form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax');

Mas na string que você captura os POSTs:

$valores_ = "'".$_SESSION['empresa']."', '".$_POST['coordenadoria']."', '".$_POST['descricao']."',
 '".$_POST['chamada']."', '".$_POST['imagem']."', '".$_POST['reporter']."', '".$_POST['texto']."', 'nao',
 '".$ip."', '".$_SESSION['nome']."', '".$data."', '".$hora."'";

não achei o $_POST['titulo'] ... :huh:

Qnto ao redirecionamento, o correto seria você disparar outro AJAX, para ir no banco, e atualizar a lista inteira novamente..

ou seja, sistemas muito baseados em AJAX, dão cada vez mais trabalho... e se não forem feitos com muito cuidado, pararão de funcionar, além do que, dependendo da metodologia que você usar, se desativar o suporte à js do navegador, já era tua aplicação completamente...

:P

Eduardo Villa · Maio 6, 2010

Ok! William,

Deu tudo certo... O erro do $_POST é que tinha mudado o item para fazer um teste se não era só com o item TÍTULO e esqueci de voltar.

Agora, sobre o redirecionamento tem como adaptar alguma funcão em AJAX para poder fazer a atualização da lista ao receber um novo registro no banco?

William Bruno · Maio 6, 2010

? adaptar ?

você deve criar uma rotina, e dispara-la, aqui:

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

e é isso ^_^

Eduardo Villa · Maio 6, 2010

Ok!

Vou dar uma estudada e qualquer coisa volto a postar aqui novamente.

Valew

William, estou no caminho certo:

xmlRequest.onreadystatechange = function(){
    setTimeout('GetXMLHttp()', 1000);
    id("conteudo").innerHTML = xmlRequest.responseText;
    //id("conteudo").innerHTML = xmlRequest.responseText;
}

Ou teria alguma outra coisa que eu possa dar uma lida...

Eduardo Villa · Julho 16, 2010

valew galera,ja esta tudo resolvido...

Arquivado

[Resolvido] Fazer tudo na <DIV id='conteudo'>

Recommended Posts

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

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante