jQWidgets Forums

Tagged: php datagrid, php grid, php gridview, php table

This topic contains 9 replies, has 2 voices, and was last updated by robbrandt 13 years ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

How to debug php -> JSON Posts

March 20, 2012 at 10:09 pm How to debug php -> JSON #2878

Member

I have developed a grid with a lot of features using static data in an array. It is now time to connect the grid to real data, coming from a mysql query in php.

I have simplified the query results as much as possible to determine why I am getting empty results (1 row, no columns). I’ve followed the “Binding to JSON using PHP” example as closely as I can, but there’s no improvement.

Can I debug this using Firebug? I would like to see that the results of my query are actually making it into a js variable, but am not sure where to look.

Here is selected code from my project:

var url = "index.php?module=PSTeams&type=ajax&func=mentormatch&pid=4713";


            var source =

            {

                datatype: "json",

                datafields: [

                    { name: 'PeoplePID'},

                    { name: 'Username'}

                ],

                id: 'PeoplePID',

                url: url,

                root: 'data'

            };
           var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxmentorgrid").jqxGrid( { width: 1200, rowsheight: 30, height: 700, source: dataAdapter, theme: theme, filterable: true, sortable: true, ready: function () { //addfilter(); }, autoshowfiltericon: true, columnsresize: true, rowdetails: true, initrowdetails: initrowdetails, columns: [ { text: 'Username', dataField: 'Username', width: 70 } ] });

Thanks.

March 20, 2012 at 10:42 pm How to debug php -> JSON #2879

robbrandt

Member

Here’s the json-ized output of my query:

[{“PeoplePID”:”1″,”Username”:”1Bbrown”},{“PeoplePID”:”5″,”Username”:”1SRussell”},{“PeoplePID”:”28″,”Username”:”1LTuominen”}]

March 21, 2012 at 7:33 am How to debug php -> JSON #2886

Peter Stoev

Keymaster

Hi robbrandt,

According to me, the problem here is that there’s no initrowdetails definition in the sample code you sent us. Everything else looks Ok.

I have been able to successfully populate the Grid with your sample JSON data.

Here’s my test code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
                var data = '[{"PeoplePID":"1","Username":"1Bbrown"},{"PeoplePID":"5","Username":"1SRussell"},{"PeoplePID":"28","Username":"1LTuominen"}]';
                var source =
                {
                    datatype: "json",
                    datafields: [
                    { name: 'PeoplePID'},
                    { name: 'Username'}],
                    id: 'PeoplePID',
                    localdata: data,
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                {
                    width: 1200,
                    rowsheight: 30,
                    height: 700,
                    source: dataAdapter,
                    theme: theme,
                    filterable: true,
                    sortable: true,
                    autoshowfiltericon: true,
                    columnsresize: true,
                    columns: [{ text: 'Username', dataField: 'Username', width: 70 }]
                });     
        });
    </script>
</head>
<body class='default'>
     <div id="jqxgrid">
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 21, 2012 at 1:11 pm How to debug php -> JSON #2923

robbrandt

Member

Yes, my static text works too. I tried to simplify my pasted code too much, initrowdetails still has a lot of the additional column stuff in it, but it still works with my static text so I didn’t paste it in here as it didn’t seem to make a difference.

But my real question is how to debug this so that I can solve these questions myself. Where do I look in Firebug, or elsewhere?

Anyway, here’s the complete code:

        $(document).ready(function () {
            var theme = 'energyblue';
            
            var url = "index.php?module=PSTeams&amp;type=ajax&amp;func=mentormatch&amp;pid=4713";
            
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'PeoplePID'},
                    { name: 'Username'}
                ],
                id: 'PeoplePID',
                url: url,
                root: 'data'
            };
            var initrowdetails = function (index) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                var bio = null;
                var availnotes = null;
                tabsdiv = $.find('.tabs' + index);
                if (tabsdiv != null) {
                    information = $.find('.information' + index);
                    notes = $.find('.notes' + index);
                    bio = $.find('.bio' + index);
                    availnotes = $.find('.availnotes' + index);
                    var container = $('<div style="margin: 5px"></div>')
                    container.appendTo($(information));
                    var photocolumn = $('<div style="float: left;width: 15%"></div>');
                    var leftcolumn = $('<div style="float: left;width: 45%"></div>');
                    var rightcolumn = $('<div style="float: left;width: 40%"></div>');
                    container.append(photocolumn);
                    container.append(leftcolumn);
                    container.append(rightcolumn);
                    var datarecord = data[index];
                    var photo = $("<div style='margin: 10px'><b>Photo:</b></div>");
                    var image = $("<div style='margin-top: 10px'></div>");
                    var imgurl = 'images/avatar/' + datarecord.avatar;
                    var img = $('<img src="' + imgurl + '" />');
                    image.append(img);
                    image.appendTo(photo);
                    photocolumn.append(photo);
                    var firstname = "<div style='margin: 10px'><b>First Name:</b> " + datarecord.firstname + "</div>";
                    var lastname = "<div style='margin: 10px'><b>Last Name:</b> " + datarecord.lastname + "</div>";
                    var PeoplePID = "<div style='margin: 10px'><b>PID:</b> <a href="index.php?module=pagesetter&amp;func=viewpub&amp;tid=5&amp;pid=">"+datarecord.PeoplePID+"</a></div>";
                    var org = "<div style='margin: 10px'><b>Organization:</b> " + datarecord.org + "</div>";
                    $(leftcolumn).append(firstname);
                    $(leftcolumn).append(lastname);
                    $(leftcolumn).append(PeoplePID);
                    $(leftcolumn).append(org);
                    var availability = "<div style='margin: 10px'><b>Availability:</b> " + datarecord.availability + "</div>";
                    $(rightcolumn).append(availability);
                    var notescontainer = $('<div style="margin: 5px"><span>' + datarecord.adminnotes + '</span></div>');
                    var biocontainer = $('<div style="margin: 5px"><span>' + datarecord.bio + '</span></div>');
                    var availnotescontainer = $('<div style="margin: 5px"><span>' + datarecord.availnotes + '</span></div>');
                    $(notes).append(notescontainer);
                    $(bio).append(biocontainer);
                    $(availnotes).append(availnotescontainer);
                    $(tabsdiv).jqxTabs({ width: 1100, height: 170, theme: theme });
                }
            }
            
            var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '1LT';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = 'Tuo';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxmentorgrid").jqxGrid('addfilter', 'Username', filtergroup);
                // apply the filters.
                $("#jqxmentorgrid").jqxGrid('applyfilters');
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#jqxmentorgrid").jqxGrid(
            {
                width: 1200,
                rowsheight: 30,
                height: 700,
                source: dataAdapter,
                theme: theme,
                filterable: true,
                sortable: true,
                ready: function () {
                    //addfilter();
                },
                autoshowfiltericon: true,
                columnsresize: true,
                rowdetails: true,
                initrowdetails: initrowdetails,
                columns: [
		{ text: 'Username', dataField: 'Username', width: 70 }
                  ]
            });
            // set row details.
            $("#jqxmentorgrid").jqxGrid('beginupdate');
            for (var i = 0; i &lt; data.length; i++) {
            	var details = &quot;<div style='margin: 10px'>DetailsAdmin NotesBioAvail. Notes<div></div><div></div><div></div><div></div></div>";
            	$("#jqxmentorgrid").jqxGrid('setrowdetails',i, details, 200, true);
            }
            $("#jqxmentorgrid").jqxGrid('resumeupdate');
        });

March 21, 2012 at 1:59 pm How to debug php -> JSON #2926

Peter Stoev

Keymaster

Hi Rob,

I was able to modify your code and run it with sample PHP data returned as JSON.

PHP Filename: data.php

<?php
	$PeopleID = array("1", "2", "3", "4", "5");
	$Username = array("Fuller", "Davolio", "Burke", "Murphy", "Nagase");
	$data = array();
	$i=0;
	while($i < count($PeopleID))
	{    
	  $row = array();
	  $row["PeopleID"] = $PeopleID[$i];
	  $row["Username"] = $Username[$i];
	  $data[$i] = $row;
	  $i++;
	}
	 
	header("Content-type: application/json"); 
	echo "{\"data\":" .json_encode($data). "}";
?>

HTML + JavaScript. Filename: index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
         
                var source =
                {
                    datatype: "json",
                    datafields: [
                    { name: 'PeopleID'},
                    { name: 'Username'}],
                    id: 'PeoplePID',
					root: 'data',
			   	    url: 'data.php',
					async: false
			    };
                var dataAdapter = new $.jqx.dataAdapter(source);
    			 var initrowdetails = function (index) {
					var tabsdiv = null;
					var information = null;
					var notes = null;
					var bio = null;
					var availnotes = null;
					var data = dataAdapter.records;
					
					tabsdiv = $.find('.tabs' + index);	
					if (tabsdiv != null) {				
						$(tabsdiv).jqxTabs({ width: 500, height: 170, theme: '' });
					}					
				}
				
     
                $("#jqxgrid").jqxGrid(
                {
                    width: 1200,
                    rowsheight: 30,
                    height: 700,
                    source: dataAdapter,
                    rowdetails: true,
                    initrowdetails: initrowdetails,
					ready: function()
					{
						for (var i = 0; i < dataAdapter.records.length; i++) {
							var details = "<div class='tabs" + i + "' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Tab1 </li><li>Tab 2</li></ul><div>Content 1</div><div>Content 2</div></div>"
							$("#jqxgrid").jqxGrid('setrowdetails',i, details, 200, true);
						}					
					},
   				    theme: '',
                    filterable: true,
                    sortable: true,
                    autoshowfiltericon: true,
                    columnsresize: true,
                    columns: [{ text: 'Username', dataField: 'Username', width: 70 }]
                });				
        });
    </script>
</head>
<body class='default'>
     <div id="jqxgrid">
     </div>
</body>
</html>

To debug how it works with Firebug, you need to debug the jqxdata.js and jqxgrid.js scripts. However, these files are minimized by default.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2012 at 7:19 pm How to debug php -> JSON #3093

robbrandt

Member

I have this all working now (Thanks!) except for one thing, and that’s the filter/sort dropdown menu is too small. It is barely wide enough to contain the word “Ascending” and is only tall enough to And/Or dropdrown menu.

I thought maybe “columnsmenuwidth” was a setting for that, but setting it to something like 100 did nothing.

March 28, 2012 at 4:54 am How to debug php -> JSON #3104

Peter Stoev

Keymaster

Hi robbrandt,

Teh ‘columnsmenuwidth’ sets the width of the column’s menu dropdown arrow button displayed in each column. In the next version, we’ll add 2 new properties for configuring the DropDown Menu’s Width and Height.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 28, 2012 at 4:58 am How to debug php -> JSON #3105

robbrandt

Member

Thank you. Is there something I can do in the mean time?

March 28, 2012 at 5:15 am How to debug php -> JSON #3108

Peter Stoev

Keymaster

You can send a code that reproduces the menu’s issue to support@jqwidgets.com and we’ll debug it locally.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com