Problema no envio de campo array criado por ajax‏

Everaldo Romeiro · Julho 31, 2012

Bom Pessoal, estou tendo problema para enviar um campo array criado por um ajax pelo metodo POST.

O problema é o seguinte: eu tenho uma página que chama um ajax onde faz uma leiutra do banco

e cria varios campos texto desta foram:

Acontece que no internet explorer 8 funciona normal, mas no internet explorer 9 não funciona, a

não ser clicando no icone "modo de exibição de compatibilidade". O máximo que consegui para resolver

foi adicionar a tag abaixo na seção head no sistema:

para que o ie9 entre em modo de compatibilidade com o ie8 por padrão. Mas o problema é o seguinte:

isso só resolve para o internet explorer, já no google chrome não funciona, e se meus clientes

precisarem usar o sistema em um micro que tem instalado o linux não irá funcionar.

Obs: Já tentei resolver de várias forma, sendo uma delas: troquei a função ajax, por outra com jquery e não resolveu este problema. Gostaria de que vocês me ajudasse com este problema.

Desde já agradeço a todos...

William Bruno · Agosto 1, 2012

como está o js que envia esses campos ?

Everaldo Romeiro · Agosto 1, 2012

como está o js que envia esses campos ?

William Bruno, a função que chama o ajax é esta:

function carrega_medias(){

	cod_escola = document.form1.cod_escola.value;
	ano_letivo = document.form1.ano_letivo.value;

	url="./window.php?janela=./servidor/servidor_mediaturma_carregar.php&cod_escola="+cod_escola+"&ano_letivo="+ano_letivo;
	ajax(url,'div_media');

}

Esta é função ajax:

function ajax(url,id) { 

   var req = null; 

   try{ 
       req = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
   }catch(erro1){ 
       try{ 
           req = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 6.0+
       }catch(erro2){ 
           try{ 
			req = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 5.5+
           }catch(erro3){ 
               req = false; 
           } 
       } 
   } 

   if(req){ 
req.open("get",url,true); 
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
req.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
req.setRequestHeader("Pragma", "no-cache");
req.onreadystatechange = function(){   
				try{ 
					if(req.readyState == 4){ // apenas quando o estado for "completo"
						if(req.status == 200){ // apenas se o servidor retornar "OK"
							document.getElementById(id).innerHTML = req.responseText; // procura pela div id="id" e insere o conteudo retornado nela, como texto HTML
						}else{ 
							alert("Houve um problema na conexão: "+req.statusText);
						}
					}else{ 
						document.getElementById(id).innerHTML = '<img src="./img/wait.gif" border="0" width="20" height="20">';
					}
				}catch(e){ 
					alert('Houve um problema na requisição: '+e.description); 
				} 
			}; 
       req.send(null); 
   }  
}

E o arquivo que cria os campos é este:

<?php

empty($_GET["cod_escola"])		? $cod_escola = ""		: $cod_escola = (int)$_GET["cod_escola"];
empty($_GET["ano_letivo"])		? $ano_letivo = ""		: $ano_letivo = (int)$_GET["ano_letivo"];

if(!empty($cod_escola) and !empty($ano_letivo)){
	$sql = "SELECT a.cod_turma_media,
				   CONCAT(c.descricao,' ',b.turma) turma, 
				   d.descricao periodo, 
				   REPLACE(a.media, '.',',') media  
			FROM tb_servidor_turma_avaliacao_media a 
				LEFT JOIN tb_escola_turma b ON a.cod_turma = b.cod_turma AND b.id_status = 'ATI'   
				LEFT JOIN tb_escola_serie c ON b.cod_serie = c.cod_serie 
				LEFT JOIN tb_escola_periodo_tipo d ON a.cod_periodo = d.cod_periodo 
			WHERE a.id_status = 'ATI'
			AND b.cod_escola = $cod_escola 
			AND b.ano_letivo = $ano_letivo 
			ORDER BY CONCAT(c.descricao,' ',b.turma),d.cod_periodo";
	//echo $sql."<br>";	
	$rs = $db->query($sql);	
}else{
	$rs = "";
}
?>
<table align="left" width="100%" border="1" bordercolor="#999999" style="border-collapse: collapse;">
<tr id="form_cabec">
	<td align="center"><?php echo utf8_encode("Turma"); ?></td>
	<td align="center"><?php echo utf8_encode("Média"); ?></td>
</tr>
<?php
if($rs != "" and $db->num_rows($rs) > 0){
	while($r = $db->fetch_array($rs)){ ?>
		<tr>
			<td align="left">
				<?php echo utf8_encode($r["turma"]); ?> - <?php echo utf8_encode($r["periodo"]); ?>
				<input type="hidden" name="cod_turma_media[]" value="<?php echo $r["cod_turma_media"]; ?>">
			</td>
			<td align="center">
				<input type="text" name="media[]" value="<?php echo $r["media"]; ?>" maxlength="6" id="campo" style="width: 45px" onBlur="this.className='editNoFocus';" class="editNoFocus" onFocus="this.className='editFocus';" onKeyPress="if(this.value.length < 6) { entrada_numero(this,2); }" onKeyUp="backspace_numero(this,2);" >
			</td>
		</tr>
<?php	}
}
?>
</table>

Mas acho que não deva ter erro nestes arquivos, pois ele funciona normal busca e cria os campos corretamente. O problema é que no internet explorer 9 ele não envia estes campo arrays pelo metodo POST para a proxima pagina onde eu gravo as alterações no banco, ele só envia pelo internet explorer 8.

Eu percebi que no ie9 se eu clicasse no icone "modo de exibição de compatibilidade" ele funcionava normal então eu adicionei esta tag na seção head do sistema:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Isso faz com que o sistema entre em modo de compatibilidade com o ie8 sem que o usuário tenha que clicar no referido icone.

O fato é que nos outros browsers como o google chrome e firefox isso não funciona e se meus clientes precisarem usar este browsers não irá funcionar.

Como chega a variavel $_POST no arquivo onde gravo no banco:

Array
(
   [p] => servidor_mediaturma_alterar
   [cod_escola] => 21
   [ano_letivo] => 2011
   [id_status] => ATI
)

Como deveria chegar:

Array
(
   [p] => servidor_mediaturma_alterar
   [cod_escola] => 21
   [ano_letivo] => 2011
   [id_status] => ATI
   [cod_turma_media] => Array
       (
           [0] => 862
           [1] => 1081
           [2] => 863
           [3] => 1082
           [4] => 864
           [5] => 1083
           [6] => 1642
           [7] => 588
           [8] => 1646
           [9] => 589
           [10] => 1643
           [11] => 1647
       )

   [media] => Array
       (
           [0] => 77,00
           [1] => 94,00
           [2] => 100,00
           [3] => 93,00
           [4] => 100,00
           [5] => 99,00
           [6] => 80,00
           [7] => 82,00
           [8] => 95,00
           [9] => 98,00
           [10] => 100,00
           [11] => 57,00
       )

)

Desculpa pelo tamanho da explicação, mas achei necessario detalhar o problema para um melhor entendimento.

Obrigado e fico no aguardo...

Vadio · Agosto 1, 2012

mó trampo faze isso em puro js.. lol

nem li direito a questão.

mas se não ta conseguindo envia os dados do form para o serv direito

utilize essa função q ela vai resolve teus problemas..

Jquery.serialize()

ref: http://api.jquery.com/serialize/

dai você instancia essa função dentro de uma var "data" por exemplo e envia via ajax

William Bruno · Agosto 1, 2012

o erro está neste trecho aqui:

                cod_escola = document.form1.cod_escola.value;
               ano_letivo = document.form1.ano_letivo.value;

você realmente não está enviando de forma correta o array de campos.

Everaldo Romeiro · Agosto 1, 2012

o erro está neste trecho aqui:
                cod_escola = document.form1.cod_escola.value;
               ano_letivo = document.form1.ano_letivo.value;
você realmente não está enviando de forma correta o array de campos.

William, qual é o erro? Pois neste trecho não é enviado o campo de array é enviado um valor inteiro por variavel. O array de campos são criados na outra página, onde tem a sql que lê os dados do banco e cria em um while.

Vadio · Agosto 1, 2012

não sei se vai dar certo

mas tenta assim

 cod_escola = document.form1.cod_escola[].value;
 ano_letivo = document.form1.ano_letivo[].value;

Everaldo Romeiro · Agosto 1, 2012

não sei se vai dar certo

mas tenta assim

 cod_escola = document.form1.cod_escola[].value;
 ano_letivo = document.form1.ano_letivo[].value;

Testei aqui e não deu certo. Nesta parte que vcs estão falando esta certo, pois eu tenho que pegar o código da escola e o ano letivo que o usuário selecionou, e estes valores são enviados a função ajax como paramentros na url. Daí a função ajax chama este arquivo:

<?php

empty($_GET["cod_escola"])		? $cod_escola = ""		: $cod_escola = (int)$_GET["cod_escola"];
empty($_GET["ano_letivo"])		? $ano_letivo = ""		: $ano_letivo = (int)$_GET["ano_letivo"];

if(!empty($cod_escola) and !empty($ano_letivo)){
	$sql = "SELECT a.cod_turma_media,
				   CONCAT(c.descricao,' ',b.turma) turma, 
				   d.descricao periodo, 
				   REPLACE(a.media, '.',',') media  
			FROM tb_servidor_turma_avaliacao_media a 
				LEFT JOIN tb_escola_turma b ON a.cod_turma = b.cod_turma AND b.id_status = 'ATI'   
				LEFT JOIN tb_escola_serie c ON b.cod_serie = c.cod_serie 
				LEFT JOIN tb_escola_periodo_tipo d ON a.cod_periodo = d.cod_periodo 
			WHERE a.id_status = 'ATI'
			AND b.cod_escola = $cod_escola 
			AND b.ano_letivo = $ano_letivo 
			ORDER BY CONCAT(c.descricao,' ',b.turma),d.cod_periodo";
	//echo $sql."<br>";	
	$rs = $db->query($sql);	
}else{
	$rs = "";
}
?>
<table align="left" width="100%" border="1" bordercolor="#999999" style="border-collapse: collapse;">
<tr id="form_cabec">
	<td align="center"><?php echo utf8_encode("Turma"); ?></td>
	<td align="center"><?php echo utf8_encode("Média"); ?></td>
</tr>
<?php
if($rs != "" and $db->num_rows($rs) > 0){
	while($r = $db->fetch_array($rs)){ ?>
		<tr>
			<td align="left">
				<?php echo utf8_encode($r["turma"]); ?> - <?php echo utf8_encode($r["periodo"]); ?>
				<input type="hidden" name="cod_turma_media[]" value="<?php echo $r["cod_turma_media"]; ?>">
			</td>
			<td align="center">
				<input type="text" name="media[]" value="<?php echo $r["media"]; ?>" maxlength="6" id="campo" style="width: 45px" onBlur="this.className='editNoFocus';" class="editNoFocus" onFocus="this.className='editFocus';" onKeyPress="if(this.value.length < 6) { entrada_numero(this,2); }" onKeyUp="backspace_numero(this,2);" >
			</td>
		</tr>
<?php	}
}
?>
</table>

E ele cria os campo para receber a digitação de cada média.

Vou posta a tela que é montada após ser selecionada a escola e o ano letivo.

http://imageshack.us/photo/my-images/441/imagemut.jpg/

Mas após a tela ser montada eu tenho que grava no banco de daods e quando clico no botão alterar os array de campos não são enviados a proxima página.

Não sei se entenderam, mas é isso. Se não entenderam podem perguntar que eu passo maiores detalhes. E agradeço a dedicação de vcs em me ajudar.

William Bruno · Agosto 1, 2012

Ok, se você diz que está certo,

então onde raios você acha que está enviando os campos array ?

não tem nenhum js seu que envie, por isso que você não recebe.

shini · Agosto 1, 2012

tenta assim....

var cod_escola = new Array();
var ano_letivo = new Array();

cod_escola = document.getElementsByName('cod_escola');
ano_letivo = document.getElementsByName('ano_letivo');

Everaldo Romeiro · Agosto 1, 2012

Ok, se você diz que está certo,

então onde raios você acha que está enviando os campos array ?

não tem nenhum js seu que envie, por isso que você não recebe.

Ok Willian, entendi o que esta dizendo.

Na verdade não tem js que envie os campos mesmo, eu envio o formulário onde estam todos os campos criados com um botão type="image".

E se fosse criar um js que enviasse como seria?

Vadio · Agosto 1, 2012

com jquery é mole....

antes de iniciar add a seguinte tag script ao seu html onde será gerado o forulário

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

para que esse script funcione é necessário a tag <form id="xyz" name="xyz"></form> em seu html

JS - jQuery

$(document).ready(function() {
  $("#xyz input[^type='submit']").click(function(){
    var data = $("#xyz").serialize();

    //sua funcao ajax enviando var data 
  })
});

isso vai te poupa dedo e perca de tempo xD

maiores informações: http://api.jquery.com/

Everaldo Romeiro · Agosto 1, 2012

com jquery é mole....

antes de iniciar add a seguinte tag script ao seu html onde será gerado o forulário
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
para que esse script funcione é necessário a tag <form id="xyz" name="xyz"></form> em seu html

JS - jQuery
$(document).ready(function() {
  $("#xyz input[^type='submit']").click(function(){
    var data = $("#xyz").serialize();

    //sua funcao ajax enviando var data 
  })
});
isso vai te poupa dedo e perca de tempo xD

maiores informações: http://api.jquery.com/

Isso que você me passou é para enviar um array a uma pagina chamada pelo ajax, não é? O que quero é enviar os valores de campos criados dinamicamente por um ajax a outra pagina para inserir no banco de dados. O fato é que os valores criados no ajax não é enviado para a próxima página ao dar submit no formulário.

Vadio · Agosto 1, 2012

não. isso vai na tua página com seu formulário gerado dinamicamente.

ele serve pra enviar os dados desse seu formulário gerado dinamicamente para uma variavel data

qe em seguida será enviada para sua página php que irá tratar os dados de acordo com seu algoritmo

a função abaixo faz instancia os dados e realiza a requisição requisição

$(document).ready(function() {
  $("#id_do_botao_q_ira_fazer_a_req_ajax").click(function(){
    var data = $("#xyz").serialize();

  $.ajax({ 
     url:"url_q_ira_receber_os_dados_do_form.php",
     type: "post"
  })
  .done(function(data) { alert(data); })
  .fail(function() { alert("error"); })
  .always(function() { alert("complete"); })
  })
});

referencia jQuery.ajax: http://api.jquery.com/jQuery.ajax/

referencia jQuery.Serilize: http://api.jquery.com/serialize/

Everaldo Romeiro · Agosto 2, 2012

Opa Galera consegui resolver. O erro era o posicionamento do form com relação a table que existe no meu formulário.

Exemplo como estava:

<table>
<form>
	<tr>
		<td>
			<div id="retorno_req_ajax"></div>
		</td>
	</tr>
</form>
</table>

Como ficou:

<form>
<table>
	<tr>
		<td>
			<div id="retorno_req_ajax"></div>
		</td>
	</tr>
</table>
</form>

Explicação: A explicação que eu encontrei para este problema não é concreta, mas eu acredito que seja pelo fato dos browsers com versões mais antigas não interpretarem o HTML5, e por isso não exigia esta organização destes elementos na página. Já com o HTML5 este elementos devem seguir esta organização.

Isso explica o fato do meu formulário funcionar no ie8 e não no ie9, onde o ie9 interpreta o HTML5 e o ie8 não.

Arquivado

Problema no envio de campo array criado por ajax‏

Recommended Posts

Everaldo Romeiro 0

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

Everaldo Romeiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

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

Everaldo Romeiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Everaldo Romeiro 0

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

shini 318

Compartilhar este post

Link para o post

Compartilhar em outros sites

Everaldo Romeiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Everaldo Romeiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Everaldo Romeiro 0

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

Fóruns

Tempo Real

Informação importante