AJAX - Como recorer elemntos de una respuesta Ajax?

   
Vista:

Como recorer elemntos de una respuesta Ajax?

Publicado por riztak (14 intervenciones) el 08/02/2016 18:35:32
Hola,

Me gustaria que me resolvieran esta duda:

Envio unos valores mediante ajax al arxivo procesar.php , en este archivo se realiza una consulta a la base de datos y el resultado lo imprimo en etiquetas <li>. en este mismo archivo he creado una input hidden que recibira valores de la consulta mysql.

La idea es al recibir la respuesta ajax pudiera recorer los elemntos input hidden y obtener su valor (a partir de su atributo value)

Archivo peticion Ajax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var dades_test=[];
llista_test=document.formulari.elements["seleccio_test[]"];
llista2_test=document.formulari.elements["seleccio_test[]"].selectedIndex;
opcions_test = llista_test.options;
	if( llista2_test !=-1 ) {
 
			 for (i=0;i<opcions_test.length;i++) {
				  if (opcions_test[i].selected) {
				   dades_test.push(opcions_test[i].value);
						}
					}
				}
	else {
 
		 for (i=0;i<opcions_test.length;i++){
		 dades_test.push(opcions_test[i].value);
			}
		}
 
var capaTEST;
var pagina="show_test.php";
 
//alert("org: "+organization+" evaluation: "+evaluation);
 $.ajax({
             async:false,
             cache:false,
             dataType:"html",
             type: 'POST',
             url: pagina,
			 data: "dades_test="+dades_test,
             success:  function(resultat){
 
	var contenido= $("#KTK").html(resultat);
 
 
     var valor= contenido.find('input[type=hidden]');
	var rebre=contenido.find('input[type=hidden]').each(function(index, element) {
/*index=index+1;
parseInt(index);*/	
 
        alert("El index es: "+index+" i elemnt es: "+valor.val());
    });
 
 
 
 
 
			 //alert(rebre.val()); 
 
 
				},
                beforeSend:function(){},
                error:function(objXMLHttpRequest){alert("Error envio")}
                    })
 
 }

Archivo procesar.php

1
2
3
4
5
6
7
.
.
.
echo"<input type='hidden' id='obtCapa' name='obtCapa[]' value='$CapaTest'>";
.
.
.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Como recorer elemntos de una respuesta Ajax?

Publicado por xve (167 intervenciones) el 08/02/2016 19:01:23
Hola Riztak, la mejor manera de hacerlo que quieres, es que la función AJAX, espere los valores en formato JSON, de esta manera, podrás enviar varios valores por separado, por ejemplo, valores separados del código HTML, de esta manera podrías coger los valores, y posteriormente mostrar el código HTML sin tener que hacer ninguna búsqueda... algo así:

1
2
3
$variable.="<input type='hidden' id='obtCapa' name='obtCapa[]' value='$CapaTest'>";
$variable.="...";
echo json_encode($array("valor1"=>23, "valor2"=>15, "html"=>$variable));

De esta manera, desde tu función AJAX, puedes coger los valores así:

1
2
3
resultat.valor1;
resultat.valor2;
resultat.html;

Eso, si, le tienes que indicar a la función AJAX, que los valores que espera son JSON, no HTML...

Espero que me haya sabido explicar... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por riztak (14 intervenciones) el 08/02/2016 19:15:38
Muchas gracias por la respuesta!,

Quisiera añadir , que el archivo processar.php , lo que tiene es que recibe una array que contiene las opciones seleccionadas en un campo select. esta array es recorrida valor a valor , y por cada recorrido realizo una consulta mysql para obtener otros valores . tal como tengo montado estas etiquetas <li> se ubicaran en una capa, pero el id de esta capa lo tengo creado dinamicamente i es la concatenación de dos valores. por tanto yo lo que actualmente recibo son los <li> y los inputs hidden que contienen el nobre del id de la capa donde ira cada <li> segun la consulta mysql. por este motivo queria saber el numero de elemntos input hidden , y como se imprimen secuencialmente ire recuperando su valor , que sera el nombre de la capa dinamica donde se ubicaran los <li>.


Aqui tenesi el codigo de processar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<?php  session_start();
 
 
include_once('conectar.php');
if (!$conexio=conectar_bd()){
 
	echo"Imposible conectarse con la base de datos: ".mysqli_connect_error();
 
	}
 
if(isset($_POST["dades_test"])){
 
$dades_test=$_POST["dades_test"];
$tok = explode(',',$dades_test);
$idtest=0;
$pagina="show4.php";
$pagina='"'.$pagina.'"';
$seleccio_content="seleccio_content[]";
$seleccio_content='"'.$seleccio_content.'"';
$llista_content="llista_content";
$llista_content='"'.$llista_content.'"';
 
 
if (is_array($tok)){ //Lo seleccionat en organization
      foreach($tok as $valor_test){
		if(!empty($valor_test)){
		 for($i=0;$i<count($valor_test);$i++){
 
 
$sql = mysqli_query($conexio, "SELECT * from test where test_name='".$valor_test."';");
 
 
 
if(mysqli_num_rows($sql)>0){
while($fila=mysqli_fetch_assoc($sql)){
 
 
//$_SESSION["orgshow3"]=$fila["organization"];
//$_SESSION["evalshow3"]=$fila["EvaluationType"];
 
//construccio id capa ara amb tres valors(org,eval,test)
$format_org=str_replace(" ","_",$fila["organization"]);
$format_eval=str_replace(" ","_",$fila["EvaluationType"]);
$format_test=str_replace(" ","_",$fila["test_name"]);
 
$id_capa=$format_org.$format_eval.$format_test;
$id_capa='"'.$id_capa.'"';
$capaCONTENT=str_replace('"','',$id_capa);
 
$valor_org=str_replace("_"," ",$format_org);
$valor_eval=str_replace("_"," ",$format_eval);
 
$valor_org='"'.$valor_org.'"';
$valor_eval='"'.$valor_eval.'"';
$valor_test='"'.$fila["test_id"].'"';
 
$CapaEnviar=$format_org.$format_eval;
$CapaEnviar='"'.$CapaEnviar.'"';
$CapaTest=str_replace('"','',$CapaEnviar);
 
echo"<input type='hidden' id='obtCapa' name='obtCapa[]' value='$CapaTest'>";
 
echo"<li><label for='test'>".$fila["test_name"]."</label><input type='checkbox' id='$capaCONTENT".$idtest."' name='test[]' value='".$fila["test_name"]."' onclick='show_content($seleccio_content,$id_capa,$llista_content,$pagina,$idtest,$valor_org,$valor_eval,$valor_test)';></li>";
 
		echo"<ol>";
		echo"<div id='$capaCONTENT' style='display: none;'>";
		echo"</div>";
		echo"</ol>
</li>";
		$idtest++;
	   }
}
else{echo "<span class='missatge'>No hi ha cap test</span>";}
 
		 }
		}
	  }
	}
}
?>

espero haberme explicado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por Riztak (14 intervenciones) el 09/02/2016 16:23:23
Alquien tiene alguna idea!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Como recorer elemntos de una respuesta Ajax?

Publicado por Vainas (71 intervenciones) el 09/02/2016 18:38:18
Buenas:

Nos puedes pasar algun ejemplo de lo que devuelve tu php?

En un principio no se si entiendo el problema. Definelo en una sola frase a ver si se entiende.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por rizTak (14 intervenciones) el 09/02/2016 19:53:55
Hola,

de acuerdo, lo que tengo es el siguiente:

pagina1.php:

en esta pagina realizo la peticion ajax enviando la array "datos_test", esta array contiene las opciones seleccionadas de un campo select.esta array se manda a la pagina2.php.La peticion ajax la tengo configurada como "json" en dataType.

pagina2.php

en esta pagina , lo que hago es recorer esta array (datos_tes) y por cada valor realizo una consulta mysql obteniendo asi dos valores de los sigientes campos:

- $fila[organizaion]
-$fila[evaluacion]

a demas imprimo en etiquetas <li> , cada "valor test", :

<li>$valor_test</li>

El problema lo tengo al volver a ajax para poner los resultados en la capa correspondiente porque esta capa se genera apartir de la concatenación de los dos valores extraidos anteriormente( $fila[organizaion]
y $fila[evaluacion]), por esta razon lo que intento es que en ajax, obtener estas dos variables y realizar la concatenacion para poder seleccionar la capa como porejemplo $("#capaConcatendada") , y volcar solo los resultados de las etiquetas <li>. actualmente me da problemas por :Requested JSON parse failed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$llista="<div id='TEST'>";
$llista.="<ol><li><label for='test' id='etiquetalabel'>".$fila["test_name"]."</label><input type='checkbox' id='$capaCONTENT".$idtest."' name='test[]' value='".$fila["test_name"]."'  onclick='show_content($seleccio_content,$id_capa,$pagina,$idtest,$valor_org,$valor_eval,$valor_test)';>";
 
$llista="</div>";
$llista.="<ol>";
$llista.="<div id='$capaCONTENT' style='display: none;'>";
$llista.="</div>";
$llista.="</ol>";
$llista.="</li>";
$llista.="</ol>";
 
$array[] = array('llista'=> $llista,'CapaTest'=> $CapaTest);
 
 
 
$json_string= json_encode($array);
echo $json_string;

con esto lo que pretendi es poder separar el nobre de la capa y los datos que se van a volcar en ella
no se si me explicado, es un poco complicado?¿
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Como recorer elemntos de una respuesta Ajax?

Publicado por Vainas (71 intervenciones) el 09/02/2016 20:33:44
Buenas:

Un poco complicado si que es pero bueno intenemos a ver hasta donde llegamos.

Que tengas configurada dataType: "html" solo indica que la respuesta sera en text/html pero no lo que se envia (esto es importante saberlo para mas adelante).

Yo en le codigo veo esto: recorres un select y si se selecciona solo uno pues lo metes en un array de javascript. Si se seleccionan varios o ninguno metes todo en el array. Luego comienza la llamada ajax. en data haces:

1
data: "dades_test="+dades_test

Que cuando se envia al server viene a ser algo como:

1
data_test=valor

Donde valor puede ser o un solo numero o string o varios. Si son varios lo que hace jQuery en ese punto es concatenar el array de este modo:

1
data_test=1,2,3

Por poner un ejemplo. La funcion:

1
success:  function(resultat){

Espera un html o un texto plano asi que puedes pasarlo a una variable jQuery con algo como esto:

1
var $html = $(resultat);

A partir de este punto a $html le puedes aplicar funciones de jQuery como "find".

En este punto podrias intentar hacer un:

console.log($html.find('input[type=hidden]'));

a ver si obtienes los valores deseados.

Yo lo que te decia para entender es que me pasaras la respuesta del pagina2.php, que sera algo asi?:

1
2
3
4
5
6
7
8
9
10
11
<div id='TEST'>
	<ol>
		<li>
			<label for='test' id='etiquetalabel'>algo</label>
			<input type='checkbox' id='un_id' name='test[]' value='d'>
</div>
<ol>
	<div id='$capaCONTENT' style='display: none;'></div>
</ol>
		</li>
	</ol>

Fijate que hay un div que no cierra donde deberia sino que tendria que cerrar mas abajo.

Si vas a enviar html como pones en el dataType mas arriba no envies despues un json por que marcara error. asi que debes quitar esto:

1
2
$json_string= json_encode($array);
echo $json_string;

Si quieres enviarlos mandalos como capas (con display none o algo asi) en html o como inputs hidden.

Te recomiendo 2 herramientas para que pruebes tus respuestas del servidor, son extensiones de chrome:

1. Advance Rest Client
2. Postman - REST Client.

Puedes generar una peticion post y enviarla para ver si el html que recibes es correcto.

Espero que sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por rizTak (14 intervenciones) el 09/02/2016 20:47:52
Gracias por la respuesta,

lo que no logro entender es porque me sale este error: Requested JSON parse failed.

actiualmente uso firebug, pero no lo domino mucho.Aqui tienes el resultado qu eme devuelve:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Requested JSON parse failed.<html>
 
<head>
 
 
 
<!--<link href="_styles_prova.css" rel="stylesheet" type="text/css" />-->
 
 
 
<style type="text/css">
 
 
 
 .missatge{
 
	 color:#F00; 
 
	}
 
 
 
</style>
 
 
 
</head>
 
<body>
 
 
 
[{"llista":"<\/div><ol><div id='cliente1' style='display: none;'><\/div><\/ol><\/li><\/ol>","CapaTest":"Cliente1Proveidor1"}]
 
 
 
</body>
 
</html>

saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por rizTaka (14 intervenciones) el 09/02/2016 21:14:17
Buenas,

queria añadir que el siguiente codigo no funciona:

1
2
3
var $html=$(resultat);
		var input= $html.find('input[type=hidden]').val();
		alert(input);

en canbio este si que funciona:

1
2
3
var valor= contenido.find('#obtCapa').val();
 
		alert(valor);

es necessario una capa para poder acceder a los elemntos de una respuesta(html) mediante ajax?

e visto que solo me devuelve el la "capaTest" correspondiente al primer elemento del campo select, que estoy haciendo mal?como almacenarlos todas las capasTest en una array i recorrer las en ajax?
Muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Como recorer elemntos de una respuesta Ajax?

Publicado por Vainas (71 intervenciones) el 09/02/2016 23:14:35
Buenas:

Requested JSON parse failed es que igual se esta generando mal el data que se envia al php. Que valor tienes en:

1
2
3
4
$.ajax({
....
    data: ???,
...


Sino funciona esto:

1
2
3
4
5
6
success:  function(resultat){
...
    var $html=$(resultat);
    var input= $html.find('input[type=hidden]').val();
    alert(input);
}

Tendria que funcionar asi:

1
2
3
4
5
success:  function(resultat){
...
    var input= $(resultat).find('input[type=hidden]').val();
    alert(input);
}

Y sino funciona es que algo esta pasando en la respuesta. Lo mejor es probar primero si lo que se envia al cliente esta bien formado como te he comentado con las herramientas del chrome.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por riztaka (14 intervenciones) el 11/02/2016 16:30:31
Hola de nuevo,

Lo que estoy enviando es una lista de las opciones seleccionadas en un campo "select", el parametro Data contiene lo siguiente:

1
data: "dades_test="+dades_test

con firebug, puedo ver lo siguiente:
1
2
3
dades_test
VSDCa,VCPSRT,EMV lvl 2 TerminalTATGFD contactATA,EMV lvl 2 Terminals contactlessGUN,GP Mapping Guidelines,Contaat
,Contactgfdrt D-PASS,VMPAJAJKT
de verdad ya no se que puedo hacer.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como recorer elemntos de una respuesta Ajax?

Publicado por riztak (14 intervenciones) el 11/02/2016 17:29:15
Hola,

no seria mejor forma , realizarlo con json, para poder asi recorer el array i poder selecionar asi tanto la lista <li> i el nombre de la capa donde se tendria que ubicar. lo que pase es que lo intente anteriroment pero la variable se ve que el array que cree daba problemas, aqui tienes lo que habia echo:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
if(isset($_POST["dades_test"])){
 
$dades_test=$_POST["dades_test"];
$tok = explode(',',$dades_test);
$idtest=0;
$pagina="show4.php";
$pagina='"'.$pagina.'"';
$seleccio_content="seleccio_content[]";
$seleccio_content='"'.$seleccio_content.'"';
 
 
if(isset($_POST["dades_test"])){
 
$dades_test=$_POST["dades_test"];
$tok = explode(',',$dades_test);
$idtest=0;
$pagina="show4.php";
$pagina='"'.$pagina.'"';
$seleccio_content="seleccio_content[]";
$seleccio_content='"'.$seleccio_content.'"';
if (is_array($tok)){
      foreach($tok as $valor_test){
		if(!empty($valor_test)){
$sql = mysqli_query($conexio, "SELECT * from test where test_name='".$valor_test."';");
 
 
 
 
if(mysqli_num_rows($sql)>0){
while($fila=mysqli_fetch_assoc($sql)){
 
 
$format_org=str_replace(" ","_",$fila["organization"]);
$format_eval=str_replace(" ","_",$fila["EvaluationType"]);
$format_test=str_replace(" ","_",$fila["test_name"]);
 
$id_capa=$format_org.$format_eval.$format_test;
$id_capa='"'.$id_capa.'"';
$capaCONTENT=str_replace('"','',$id_capa);
 
$valor_org=str_replace("_"," ",$format_org);
$valor_eval=str_replace("_"," ",$format_eval);
 
$valor_org='"'.$valor_org.'"';
$valor_eval='"'.$valor_eval.'"';
$valor_test='"'.$fila["test_id"].'"';
 
$CapaEnviar=$format_org.$format_eval;
$CapaEnviar='"'.$CapaEnviar.'"';
$CapaTest=str_replace('"','',$CapaEnviar);
 
echo"<input type='hidden' id='obtCapa' name='obtCapa[]' value='$CapaTest'>";
 
$llista="<div id='TEST'>";
$llista.="<ol><li><label for='test' id='etiquetalabel'>".$fila["test_name"]."</label><input type='checkbox' id='$capaCONTENT".$idtest."' name='test[]' value='".$fila["test_name"]."'  onclick='show_content($seleccio_content,$id_capa,$pagina,$idtest,$valor_org,$valor_eval,$valor_test)';>";
 
$llista="</div>";
$llista.="<ol>";
$llista.="<div id='$capaCONTENT' style='display: none;'>";
$llista.="</div>";
$llista.="</ol>";
$llista.="</li>";
$llista.="</ol>";
 
$array = array(
  'llista'=>$llista,
  'CapaTest'=>$CapaTest
);
 
$json_string= json_encode($array);
echo $json_string;

Creo que el error esta en la formalización de la variable $llista, que me dices?

mi idea es poder hacer lo siguinete en ajax?
1
2
3
4
5
for(var i=0;i<resultat.length;i++){
 
var capa= ("#"resultat[i].CapaTest);
capa.html(resultat[i].llista);
}

Sludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Como recorer elemntos de una respuesta Ajax?

Publicado por Vainas (71 intervenciones) el 12/02/2016 10:44:57
Buenas:

Estas en lo cierto. La variable lista esta mal creada. si te fijas lo que desvuelve del server es algo asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type='hidden' id='obtCapa' name='obtCapa[]' value='algo'>
<div id='TEST'>
	<ol>
		<li>
			<label for='test' id='etiquetalabel'>valorX</label>
			<input type='checkbox' id='idX' name='test[]' value='YYY'  onclick="XXX">";
 
</div>
<ol>
	<div id='valorZ' style='display: none;'>
	</div>
</ol>
</li>
</ol>

No tiene un buen orden de abrir y cerrar etiquetas.

Ademas otra cosa que he visto ahora. Haces:

1
2
3
4
echo"<input type='hidden' id='obtCapa' name='obtCapa[]' value='$CapaTest'>";
...
$json_string= json_encode($array);
echo $json_string;

Es decir estas intentando enviar primero html y despues un json y no deberia ser.

Un error mio ha sido no indicarte que para el json tienes que fijar una cabacera (pero OJO solo si envias json no envies html):

1
header('Content-Type: application/json');

Y esto se fija antes que cualquier echo.

Yo tu, para evitarme mas dolores de cabeza enviaria primero todo por html que es la forma mas rapida. Si lo que quieres enviar son unos datos con un valor extra lo podemos hacer (siguiendo una estructura de arbol) de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id='obtCapa' data-value='algo'>
    <div id='TEST'>
        <ol>
            <li>
                <label for='test' id='etiquetalabel'>valorX</label>
                <input type='checkbox' id='idX' name='test[]' value='YYY'  onclick="XXX">
            </li>
        </ol>
    </div>
    <ol>
        <li>
            <div id='valorZ' style='display: none;'></div>
        </li>
    </ol>
</div>

Fijate que el orden que aplicas al cerrar las etiquetas tiene que ser este y no otro para que no tengas fallos.

He creado al principio del todo en vez de un input una capa (div) con el valor donde se va a insertar el codigo de la capa siguiente (div id='test'). Esta capa tiene dentro todo lo que se va a colocar en otro sitio (siguiendo una buena sintaxis html a la hora de abrir y cerrar etiquetas).

En javascript, usando jQuery llegara por ajax como un objeto html (o varios), y se puede recorrer con la funcion "each". Puedes probar algo como esto:

1
2
3
4
5
6
success: function(resultat){
    var obj_html= $(resultat);
	obj_html.each(function( index, element ) {
		alert($(element).data("value));
	});
}


Tenias razon en que:

1
var input= $html.find('input[type=hidden]').val();
No funciona ya que te regresa solo el ultimo valor. Me he equivocado alli. En realidad "$html.find('input[type=hidden]')" son varios inputs asi que hay que recorrerlos con un each.

Espero que sirva.

Tu utiliza las herramientas que te dije en chrome y veras por lo menos si las respuestas del servidor estan bien formadas. O sino busca alguna herramienta alternativa en firefox.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar