ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: nuno.nogueira on January 30, 2014, 10:34:27 pm

Title: Ajax error
Post by: nuno.nogueira on January 30, 2014, 10:34:27 pm

Hello,

I'm trying to get data from mySQL to a Json file.

From PHP, I managed to extract the data into the following:

Code: [Select]

{"data":[{"data":"2014-01-08","nome_conta":"BCP","nome_categoria":"Combust\u00edveis","nome_entidade": etc
My js script is using the following ajax call:

Code: [Select]

{dataModel:{
        dataType: "JSON",
        location: "remote",
        url: "../budget/incluir/json.php",
        getData: function (response) {
            return { data: response.data, curPage: response.curPage, totalRecords: response.totalRecords };
        }
    }}
However, this is returning an empty table with error in the console:

Uncaught Error : SyntaxError: Unexpected token E

Can you help?

Title: Re: Ajax error
Post by: paramvir on January 30, 2014, 10:51:13 pm

Error indicates that your JSON is not formatted correctly.

I need to look into your complete JSON data in order to see where it's wrong. You should probably start with returning first row only to make it easier to troubleshoot.

Are you using json_encode function to construct JSON data as shown in the demo?

Title: Re: Ajax error
Post by: nuno.nogueira on January 30, 2014, 11:02:23 pm

Hi,

The whole JSON data produced by PHP is:

Code: [Select]

{"data":[{"data":"2014-01-08","nome_conta":"BCP","nome_categoria":"Combust\u00edveis","nome_entidade":"Senhorio","orcamento":"500.00","atual":"900.00","desvio":"400.00","user_key":"1"},{"data":"2014-01-13","nome_conta":"BCI","nome_categoria":"Vendas","nome_entidade":"Jo\u00e3o Vitor","orcamento":"50.00","atual":"150.00","desvio":"100.00","user_key":"1"},{"data":"2014-01-15","nome_conta":"BCI","nome_categoria":"Vendas","nome_entidade":"Jo\u00e3o Vitor","orcamento":"1800.00","atual":"1650.00","desvio":"-150.00","user_key":"1"},{"data":"2014-01-15","nome_conta":"BZZ","nome_categoria":"Combust\u00edveis","nome_entidade":"Jo\u00e3o Vitor","orcamento":"80.00","atual":"90.00","desvio":"10.00","user_key":"1"},{"data":"2014-01-21","nome_conta":"BCP","nome_categoria":"Combust\u00edveis","nome_entidade":"Cliente Novo","orcamento":"10000.00","atual":"1800.00","desvio":"-8200.00","user_key":"1"},{"data":"2014-01-23","nome_conta":"BPI","nome_categoria":"Combust\u00edveis","nome_entidade":"Cliente Novo","orcamento":"500.00","atual":"400.00","desvio":"-100.00","user_key":"1"}]}
There seems to be a problem with the character encoding that I ignored (for now). Apart from that, it all seems normal.

I'm also attaching json.php in case you can have a look at it and check if it is ok. Basically, I used the same model as in demo pages. The connection to the database is provided by the file included in line 4.

Thanks in advance for your help!

Title: Re: Ajax error
Post by: paramvir on January 31, 2014, 10:05:36 am

Is there any specific reason for using htmlout( $sb ) instead of echo in the last line of your php code.

Please use echo.

Your JSON format is fine. How did you capture the JSON data? Did you capture it from the browser console or on the server side.

Title: Re: Ajax error
Post by: nuno.nogueira on January 31, 2014, 03:39:47 pm

Hi,

Htmlout is just a helper function that replaces $text with

Code: [Select]

echo (htmlspecialchars($text, ENT_QUOTES, 'UTF-8'));
I'm now using echo again.

The json data was captured from the page. I included json.php in the controller to make sure the data was being retrieved.

If the json.php and data is fine, then is it the javascritp code wrong? You may see in the attachment what I'm using:

Title: Re: Ajax error
Post by: paramvir on January 31, 2014, 04:54:07 pm

Yes your js is incorrect. pqGrid constructor accepts only one parameter object whereas you are trying to pass lot number of arguments.

Please work your way from simple to non trivial examples and going through the tutorial might also help.

Title: Re: Ajax error
Post by: nuno.nogueira on January 31, 2014, 05:15:36 pm

I am reading the tutorials and API. I was able to get the data to an HTML table and from there to pqgrid.

Now, I am trying to replicate the batch editing example, not adding more than the adjustments to my database structure. All the rest is just copy/paste of the code.

I still get the same ajax error, as you can see here: http://www.portal-gestao.com/youbudgetz.html (http://www.portal-gestao.com/youbudgetz.html)

You may also see the revised js and php file, where I correct the pqgrid constructor.  :P

Thanks in advance for your help!

Title: Re: Ajax error
Post by: paramvir on January 31, 2014, 05:44:24 pm

I see that your js is able to call and get the data from server.

The reason it's still not populating in the grid is that your  dataIndx in columns don't match with that of the response from server.

Your first column should have dataIndx : "data", second column dataIndx : "nome_conta" and so on. Please keep in mind that dataIndx are case sensitive also.

Title: Re: Ajax error
Post by: nuno.nogueira on January 31, 2014, 09:24:31 pm

Yep, that's it!

 ;D

The data is being correclty fetched from the server, the thing now is editing the cells.

When clicking on a cell, the edit box is being displayed at the bottom instead of being displayed inline as per your demo, why is that?  ???

Thanks in advance for your support!

Title: Re: Ajax error
Post by: paramvir on February 03, 2014, 10:58:57 am

Please ensure to include all css file dependencies correctly.

Title: Re: Ajax error
Post by: nuno.nogueira on February 03, 2014, 05:00:35 pm

It should be mentioned in the tutorial that

Code: [Select]

pqgrid.min.css solves the problem, while

Code: [Select]

pqgrid.dev.css doesn't.