[SOLUCIONADO] Json y Jquery los objetos no se muestran

[marco64yes]

Hola,

Bueno yo soy nuevo en jquery y json, estuve tratando de obtener un resultado via json y jquery y no logor obtener los resultados estuve buscando en google ejemplos pero no logro encontrar algo que me funcione,

Yo tengo lo siguiente que modifique de un codigo que encontre y funciona pero muestra el resultado en un listbox.

Código PHP:

   <script type="text/javascript"> 
    $(document).ready(function () { 
         
         
         
        // prepare the data 
        var source = 
        { 
            datatype: "json", 
            datafields: [ 
             { name: 'CUPO' }, 
             { name: 'TOTAL_USERS' } 
            ], 
            url: 'datos.php', 
            async: false 
        }; 
 
         
  
      
    var dataAdapter = new $.jqx.dataAdapter(source); 
 
        $("#dropdownlist").jqxDropDownList( 
        { 
            source: dataAdapter, 
             
            width: 250, 
            height: 25, 
            selectedIndex: 0, 
            displayMember: 'TOTAL_USERS', 
            valueMember: 'CUPO' 
        });       
 
    }); 
    </script>  
  

Esto si funciona pero con un tipo listbox, si lo trato de hacer para un div o textbox no funciona>

Código PHP:

  $("#dropdownlist").text( 
        { 
            source: dataAdapter, 
         
            displayMember: 'TOTAL_USERS', 
            valueMember: 'CUPO' 
        });  
   

Si deseo ver los datos que traigo de esta manera tampoc funciona solo me muestra como resultado TOTAL_USERS y CUPO textualmente mas no el valor.

Código PHP:

    
 for (var i in source.datafields) { 
       alert(source.datafields[i].name); 
    }  
   

Como hago para poder obtener esos valores? de la primer forma funciona pero en un listbox. Que esta mal y como es que puedo obtener esos valores realmente no entiendo mucho :S me podrian orientar ?

Gracias!

[fhederico]

Hola,

Que retorna tu datos.php? ya que segun esto es lo que obtienes, me explico

Tengo un de ejemplo datos.php que no recibe nada, solo retorna un array definido

Código PHP:

$retorno = array();
$retorno["cod"] = 1; //Clave y valor
$retorno["mens"] = "hola"; //Clave y valor
 
//Json retorna tu Array en un codigo JSON valido
return json_encode($retorno);
 

En mi pagina HTML con Jquery

Código Javascript:

$.ajax(
{
        //Le indicamos que estamos haciendo un JSON
     dataType: "json",
     contentType: "application/json",
        //Que los parametros se los pasaremos por GET
    type: "GET",
       //Ruta donde esta tu archivo que recibira todo esto
    url: "datos.php",
        //Parametros que le pasamos,
       //Seria "clave" : "valor", asi al otro lado recuperamos "codigo"
    data: { "codigo" : cod},
       //Caso exitoso, que funciono y retorno datos
    success: function(data, textStatus, XMLHttpRequest)
    {
               //Recorremos "data" que es donde se retornaron los datos
        $.each(data, function(key, val)
        {
                       //Aqui viene toda la logica de que harias con estos datos
                       alert("la clave es: "+key+" y el valor es: "+val);
        });        
    },
       //Ocurrio algun problema
    error: function() {
               alert("Noooo... me cai y no funciono bien");
    }
});
 

Obviamente en donde va tu logica puedes por ejemplo hacer que el valor lo muestre en un div

Código HTML:

$("#prueba").html(val);
 

Aqui asumimos que existe un DIV con un ID llamado prueba y reemplazara todo el contenido HTML de dicho div con "val", que es el valor que viene en el each

Código HTML:

<div id="prueba">contenido antes de mi JSON</div>
 

Una ultima cosa, como te daras cuenta al ejecutar te mostrara un alert asi

la clave es: cod y el valor es: 1
la clave es: mens y el valor es: hola


Saludos

[marco64yes]

fhederico Muchas gracias, la explicación ahora es muy clara, para no errar cree todo de nuvo e ingrese los datos que me pasaste de php para probar con ellos, pegue el codigo que me pasaste pero no veo el mensaje de alerta, no entiendo que podria estar mal :S el codigo html tal cual es:

Código PHP:

  <!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery.getJSON demo</title> 
 <script type="text/javascript" src="clase_files/jquery-1.js"></script> 
    <script type="text/javascript" src="clase_files/jqxcore.js"></script> 
    <script type="text/javascript" src="clase_files/jqxbuttons.js"></script> 
    <script type="text/javascript" src="clase_files/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="clase_files/jqxdata.js"></script> 
    <script type="text/javascript" src="clase_files/jqxlistbox.js"></script> 
    <script type="text/javascript" src="clase_files/jqxdropdownlist.js"></script>     
    <script type="text/javascript" src="clase_files/demos.js"></script><link rel="stylesheet" href="clase_files/jqx_002.css" media="screen"> 
<style> 
img { 
height: 100px; 
float: left; 
} 
</style> 
 
</body> 
<script> 
 
    $.ajax( 
    { 
            //Le indicamos que estamos haciendo un JSON 
         dataType: "json", 
         contentType: "application/json", 
            //Que los parametros se los pasaremos por GET 
        type: "GET", 
           //Ruta donde esta tu archivo que recibira todo esto 
        url: "data.php", 
            //Parametros que le pasamos, 
           //Seria "clave" : "valor", asi al otro lado recuperamos "codigo" 
        data: { "codigo" : cod}, 
           //Caso exitoso, que funciono y retorno datos 
        success: function(data, textStatus, XMLHttpRequest) 
        { 
                   //Recorremos "data" que es donde se retornaron los datos 
            $.each(data, function(key, val) 
            { 
                           //Aqui viene toda la logica de que harias con estos datos 
                           alert("la clave es: "+key+" y el valor es: "+val); 
            });         
        }, 
           //Ocurrio algun problema 
        error: function() { 
                   alert("Noooo... me cai y no funciono bien"); 
        } 
    }); 
 
</script> 
</html>  
  

El codigo php de data.php

Código PHP:

  $retorno = array(); 
$retorno["cod"] = 1; //Clave y valor 
$retorno["mens"] = "hola"; //Clave y valor 
  
//Json retorna tu Array en un codigo JSON valido 
return json_encode($retorno);  
   

Pero no aparece nada :S me falta alguno otra libreria ahi? o que podria estar dandome tanta lata?

[fhederico]

Hola,

Te respondo a la rapida porque no estoy en el PC donde puedo probar tu codigo. Pero a simple vista, primero tu pagina HTML no cierra la etiqueta "head" y lo unico que requiere este ejemplo es tener la libreria de JQuery anexada o incluida, idealmente la ultima version, creo que es la 2.1, asi que podrias quitar las otras mientras haces la prueba por si generan algun conflicto.

Tambien no abres tu etiqueta body, solo la cierras, fijate bien en la estructura basica del HTML lo minimo que requiere es esto

Código HTML:

<html>
   <head>
      <title>prueba</title>
   </head>
   <body>
   </body>
</html>
 
<script type="text/javascript" src="clase_files/jquery-1.js"></script>
<script>
codigo JS
</script>
 

Los script pueden ir en el head o al final, eso cada cual puede darte su opinion.

Una vez corregidos los problemas de HTML, fijate con el depurador Firebug en su pestaña "Consola" si se hizo algun llamado o peticion por Ajax.

Si no se ha realizado ninguna peticion fijate en que este bien la ruta de tu libreria Jquery.

Si te hizo el llamado o la consulta por Ajax y te muestra el mensaje de error, puede ser que el archivo de ejemplo que te deje tenga problemas, puedes darle un alert y que te muestre el error por ejemplo

Código Javascript:

error: function(data, textStatus, XMLHttpRequest)
{
   alert(data);
}
 

Esto es lo que puedo decirte asi rapido, mas tarde probare tu codigo si es que aun tienes problemas.

Saludos

[marco64yes]

Hola,

Gracias por tu pronta respuesta!, entiendo los errores anteriores ya que con la desesperación ya solo copias y pegas y haces y deshaces xD, estuve tratando de hacer correr ese codigo pero en verdad no sé que tiene que no funciona :S pero bueno les comparto el que utilice:

El único problema es que muestra solo un resultado de un array y no uno con varios arrays dentro de un array: [["35","37"],["Marta","Juan"],["Mexico","Monterrey"]]

Código PHP:

   
<html> 
    <head> 
       <title>jQuery Test</title> 
    <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
 
            $("#submit").click(function(){ 
 
            $.ajax({ 
            url: "data.php", 
            type: "POST", 
            data: { 
                amount: $("#amount").val(), 
                firstName: $("#firstName").val(), 
                lastName: $("#lastName").val(), 
                email: $("#email").val() 
            }, 
            dataType: "JSON", 
            success: function (jsonStr) { 
                //$("#result").text(JSON.stringify(jsonStr)); 
                alert(jsonStr.lastName); 
            } 
        }); 
 
    });  
 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="result"></div> 
        <form name="contact" id="contact" method="post"> 
        <input type="button" value="Get It!" name="submit" id="submit"/> 
        </form> 
 
    </body> 
</html>  
  

Código PHP:

  <?php 
 
    $amount      = 20; 
    $firstName   = "juan"; 
    $lastName    = "perez"; 
    $email       = "correo"; 
    if(isset($amount)){ 
        $data = array( 
            "amount"     => $amount, 
            "firstName"  => $firstName, 
            "lastName"   => $lastName, 
            "email"      => $email 
        ); 
        echo json_encode($data); 
    } 
 
 
?>