Author Topic: bug with json and ajax loading  (Read 5306 times)

Maverick2786

  • Newbie
  • *
  • Posts: 1
    • View Profile
bug with json and ajax loading
« on: May 10, 2014, 03:58:44 am »
This is the code that generated query:
Code: [Select]
<?php

include("../../include/funciones.php");

/* variables */
$json '[';
$campos = array("Continent,Population");
$tabla "country";
$condicion "1 group by Continent";
$ordenamiento = array("1");

$cont 0;
$cadenaFecha '';
/* consulta */
$listado consultar($campos$tabla$condicion$ordenamiento);

class 
country {

    public 
$continent '';
    public 
$population '';
    public 
$color '';

}

function 
random_color_part() {
            return 
str_pad(dechex(mt_rand(0255)), 2'0'STR_PAD_LEFT);
        }

        function 
random_color() {
            return 
random_color_part() . random_color_part() . random_color_part();
        }

$totalFilas mysql_num_rows($listado);
if (
mysql_num_rows($listado) != 0) {
    while (
$reg mysql_fetch_assoc($listado)) {
        
$color '#'.random_color();

        
$objetoCountry = new country();
        
$objetoCountry->continent $reg["Continent"];
        
$objetoCountry->population $reg["Population"];
        
$objetoCountry->color $color;

        if (
$cont == $totalFilas 1)
            
$json $json json_encode($objetoCountry);
        else
            
$json $json json_encode($objetoCountry) . ",";
        
$cont++;
    }
    
$json $json ']';
    echo 
$json;
} else
    echo 
'false';
?>



This is the js code:
Code: [Select]
$(document).ready(function() {
    peticion_ajax();
});

function peticion_ajax()//se carga el select el personal del centro
{
    var xhr = $.ajax({
        url: "generar_consulta.php",
        dataType: "text",
        cache: false,
        statusCode: {
            404: function() {
                alert("La página no existe (personal cabecera)");
            }
        },
        context: document.body
    }).done(function(data) {//callBack
        var obj = {width: 700, height: 400, title: "Grid From JSON data", flexHeight: true};
        obj.colModel = [{title: "Rank", width: 100, dataType: "integer", dataIndx: "rank"},
            {title: "Company", width: 200, dataType: "string", dataIndx: "company"},
            {title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues"},
            {title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "profits",
                render: function(ui) {
                    var rowData = ui.rowData,
                            dataIndx = ui.dataIndx,
                            cellData = rowData[dataIndx],
                            profits = cellData.replace(",", ""),
                            revenues = rowData["revenues"].replace(",", "");
                    if (profits / revenues > 0.1) {
                        return "<span style='color:green;'>" + cellData + "</span>";
                    }
                    else {
                        return "<span style='color:red;'>" + cellData + "</span>";
                    }
                }
            }];
        obj.dataModel = {
            data: data,
            location: "local",
            sorting: "local",
            paging: "local",
            curPage: 1,
            rPP: 10,
            sortIndx: "revenues",
            sortDir: "up",
            rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
        };
        $("#grid_array").pqGrid(obj);

        xhr.abort();
    });
}

This is the html code:
Code: [Select]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <!-- Jquery General -->
        <script type="text/javascript" src="../../include/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../../include/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

        <!--PQ Grid files-->
        <link rel="stylesheet" href="grid/pqgrid.min.css" />
        <script src="grid/pqgrid.min.js"></script>
       
        <!--PQ Grid Office theme-->
        <link rel="stylesheet" href="grid/themes/office/pqgrid.css" />

        <!-- Jquery General -->
        <script type="text/javascript" src="funciones.js"></script>
       
    </head>
    <body>
        <div id="grid_array" style="margin:100px;">

        </div>

        <span id="results">

        </span>

    </body>
</html>

the error is:
Uncaught TypeError: undefined is not a function pqgrid.min.js:9
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: bug with json and ajax loading
« Reply #1 on: May 12, 2014, 06:19:35 pm »
please use unminified js file to find out the stack trace of the error.

your code need corrections:

dataType in $.ajax should be 'json'

Please check the format of data received in ajax callback. it should match this

http://paramquery.com/demos/getCustomers