ajax

kakaroto753 · Setembro 4, 2014

Olá galera, bom dia.

Estou tentando fazer um método para retornar várias respostas em várias divs diferentes e estou fazendo algo errado.

este é o meu código javascript:

function checkAjaxMultiple(action, resp_1, resp_2, resp_3, resp_4, resp_5, p_1, p_2, p_3, p_4, p_5) {
if(p_1){pr_1 = document.getElementById(p_1).value;}
if(p_2){pr_2 = document.getElementById(p_2).value;}
if(p_3){pr_3 = document.getElementById(p_3).value;}
if(p_4){pr_4 = document.getElementById(p_4).value;}
if(p_5){pr_5 = document.getElementById(p_5).value;}
var div = document.getElementById(resp_1).id;// se não pego o id da div ele dá um outro erro
if(resp_2){div += '|' + document.getElementById(resp_2).id;}
if(resp_3){div += '|' + document.getElementById(resp_3).id;}
if(resp_4){div += '|' + document.getElementById(resp_4).id;}
if(resp_5){div += '|' + document.getElementById(resp_5).id;}
var url = "teste.php?action=" + action;
if(p_1){url += "&pr_1=" + pr_1;}
if(p_2){url += "&pr_2=" + pr_2;}
if(p_3){url += "&pr_3=" + pr_3;}
if(p_4){url += "&pr_4=" + pr_4;}
if(p_5){url += "&pr_5=" + pr_5;}
ajax = ajaxInit();
if(ajax) {
ajax.open("GET", url, true);
ajax.onreadystatechange = function(){
if (ajax.readyState==1){
for(var i=0; i < div.length; i++){
div[i].innerHTML = "<img src='images/ajax-loader.gif' />";
}
}
if(ajax.readyState == 4){
var ich = ajax.responseText.split('|');
var div_ich = div.split('|');
for(var i = 0; i < div.length; i++){
div_ich[i].innerHTML = ich[i];
}
}
}
ajax.send(null);
}
}

Eu preciso clicar em um botão e atualizar vários campos diferentes com nomes diferentes pois usarei o mesmo em várias páginas, no código acima o erro é o seguinte:

"Uncaught TypeError: Cannot set property 'innerHTML' of undefined "

Se alguém puder me ajudar.

Obrigado.

Lucas Guima · Setembro 4, 2014

Em algum momento do seu laço, a variável div_ich fica indefinida.

William Bruno · Setembro 4, 2014

Essa variavel div e div_ich não fazem nenhum sentido.

Utilize um loop através do retorno do document.querySelectorAll(), e então retorne um json para ser mais simples manipular o resultado.

gpontes · Setembro 4, 2014

Seu código não está bom, está uma macarronada, mal dá para ler, dá uma estudada e tenta refatorar isso daí, que você reduz isso e faz em menos de 10 linhas de código. Por que não usa jQuery?

Mas só de bater o olho já dá pra ver o problema, a variável div que você está interando, está interando pelo length do id, e não pela quantidade de divs.

Mas é como eu disse, tenta diminuir isso daí, que você para de fazer esse tipo de confusão com o código.

William Bruno · Setembro 4, 2014

Exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div id="r4"></div>


<script src="xhr.js"></script>
<script>
var data = '?';
data += 'action=teste';
data += '&p1=1';
data += '&p2=2';
data += '&p3=2';
data += '&p4=4';

XHR.get('processa.php' + data, function(ret){
    var json = JSON.parse(ret),
        arr = [].slice.call(json);

    for(r in json) {
        document.getElementById(r).innerHTML = json[r];
    }
});
</script>
</body>
</html>

processa.php

<?php

$arr = Array();

$arr['r1'] = $_GET['p1'] * 10;
$arr['r2'] = $_GET['p2'] * 7;
$arr['r3'] = $_GET['p3'] * 18;
$arr['r4'] = $_GET['p4'] * 4;


echo json_encode($arr);

xhr.js

/**
 * @author William Bruno <wbrunom@gmail.com>
 */

var XHR = (function () {

  var module = {};

  module._init = function () {
    return new XMLHttpRequest();
  };

  module._onready = function (xmlhttp, cb) {
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.status === 200 && xmlhttp.readyState === 4) {
        cb(xmlhttp.responseText);
      }
    };
  };

  module.get = function (url, cb) {
    var xmlhttp = module._init();
    xmlhttp.open('GET', url);
    xmlhttp.send();

    module._onready(xmlhttp, cb);
  };

  module.post = function (url, data, cb) {
    var xmlhttp = module._init();
    xmlhttp.open('POST', url);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(data);

    module._onready(xmlhttp, cb);
  };

  return {
    get: module.get,
    post: module.post
  };

}());

Altere os valores enviados, e verá q ao recarregar a página, irá alterar o resultado. Pois fiz uma conta simples lá no server-side.

kakaroto753 · Setembro 5, 2014

Olá,

bom, @Lucas Guima, isso que você fala não é nenhuma novidade, o erro eu já tenho, estou procurando a solução. mas obrigado.

@gpontes, eu realmente não estou procurando uma crítica, quero ajuda. Eu sei que não é bonito o código mas ele funcionava para uma única DIV o que quero é só corrigir a parte que não funciona para várias DIVs, não quero criar um outro código pois já uso esta função para várias outras páginas só quero adequá-la a nova situação. Mas mesmo assim obrigado.

@Willian Bruno, o seu código está bem diferente do que tenho, eu sei que deve funcionar e tudo mas o meu problema é que não conheço muito e o seu eu não entendi quase nada acho que vai piorar minha situação.

Eu queria somente uma solução para a parte do código onde ele dá o erro pois como eu já disse ele funciona sem a parte das várias DIVs.

Se alguém puder me ajudar nesta parte do código:

if(ajax.readyState == 4){
			var ich = ajax.responseText.split('|');
			var div_ich = div.split('|');
			for(var i = 0; i < div.length; i++){
				div_ich[i].innerHTML = ich[i];
			}
       	}

Quando eu altero esta parte do código:

var div = document.getElementById(resp_1).id;

para:

var div = document.getElementById(resp_1);

e dou um print pra ver o que ele retorna: [object HTMLDivElement] (este é o resultado)

E quando coloco a "id" ele retorna o nome dela e dá aquele erro que mencionei inicialmente.

Obrigado.

William Bruno · Setembro 5, 2014

pq não faz sentido vc concatenar objetos DOM.

Não dá para fazer o Loop da forma q vc está tentando. Vc já leu sobre o querySelectorAll() como eu te sugeri?

com o seu código atual, ele resolve.

Mas enfim, não vejo oq não olhar a outra solução e entender ela, já q está melhor. Escolha sua.

kakaroto753 · Setembro 8, 2014

Olá.

Bom, aparentemente era um erro idiota meu, eu estava transformando um objeto em uma string e depois querendo usar como objeto.

agora está funcionando.

Segue o código:

function checkAjaxMultiple(action, resp_1, resp_2, resp_3, resp_4, resp_5, p_1, p_2, p_3, p_4, p_5) {
//alert(name);
 if(p_1){pr_1 = document.getElementById(p_1).value;}
 if(p_2){pr_2 = document.getElementById(p_2).value;}
 if(p_3){pr_3 = document.getElementById(p_3).value;}
 if(p_4){pr_4 = document.getElementById(p_4).value;}
 if(p_5){pr_5 = document.getElementById(p_5).value;}
//alert(pr_1);
 var div = resp_1;
 if(resp_2){div += '|' + resp_2;}
 if(resp_3){div += '|' + resp_3;}
 if(resp_4){div += '|' + resp_4;}
 if(resp_5){div += '|' + resp_5;}
//document.writeln(div);
 var url = "functionAjax.php?action=" + action;
 if(p_1){url += "&pr_1=" + pr_1;}
 if(p_2){url += "&pr_2=" + pr_2;}// attention aux noms
 if(p_3){url += "&pr_3=" + pr_3;}
 if(p_4){url += "&pr_4=" + pr_4;}
 if(p_5){url += "&pr_5=" + pr_5;}
//alert(url);
 ajax = ajaxInit();
 if(ajax) {
	ajax.open("GET", url, true);
	ajax.onreadystatechange = function(){
		if (ajax.readyState==1){
			for(var i=0; i < div.length; i++){
				div[i].innerHTML = "<img src='images/ajax-loader.gif' />";
			}
		}
		//alert(ajax.responseText);
		
		if(ajax.readyState == 4){
			var ich = ajax.responseText.split('|');
			var div_ich = div.split('|');
			for(var i = 0; i < div.length; i++){
				document.getElementById(div_ich[i]).innerHTML = ich[i];
			}
       	}
	}
	ajax.send(null);
 }
}

Obrigado!

Arquivado

ajax

Recommended Posts

kakaroto753 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

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

gpontes 9

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

kakaroto753 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

kakaroto753 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