jQWidgets Forums

Forum Replies Created

Viewing 10 posts - 16 through 25 (of 25 total)

← 1 2

Author

Posts

October 15, 2013 at 10:18 pm in reply to: Load jqxMenu data from MySQL problem Load jqxMenu data from MySQL problem #30775

Hop

Participant

This is really killing me, and I am so sorry for the self-answered posts. It’s MAGIC I guess, that I finally post for help here and then I do something I see in stackoverflow and then it works.

I got it working by adding “async: false,” in the source declaration. Apparently, it matters WHERE it is placed, because I did this already but I added the line after my data field. This time, I put it right after the datatype field and it works now.

DAYS I labored on this because I didn’t want to post until I exhausted all the options. Thank you Peter for your patience!

So for those ending up here searching for an answer like I was, adding

async: false,

after

datatype: "JSON",

fixed this for me using the code I posted above.

Thank you for your time and patience!!

October 15, 2013 at 10:06 pm in reply to: Load jqxMenu data from MySQL problem Load jqxMenu data from MySQL problem #30773

Hop

Participant

I figured it out I think. I was just posting in code tags in text view while editing.
menu-fetch.php

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array
$name = $_GET['name']; 
$query = "SELECT menuid,parentid,subMenuWidth,text FROM menus_cfg where name='".$name."' order by menuid asc";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$menudata[] = array(
        'id' => $row['menuid'],
				'parentid' => $row['parentid'],
				'text' => $row['text'],
 				'subMenuWidth' => $row['subMenuWidth'],
     );
}
echo json_encode($menudata);
?>

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxMenu is built from JSON data.</title>
		<link href="../../styles/hop.budget.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
</head>
<body>
<div style="position:absolute; top:50px; left:5px" id='jqxWidget'>
<script type="text/javascript">
            $(document).ready(function () {
                var theme = "shinyblack";
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
										id: 'id',
                    url: 'menu_fetch.php',
										data: {
                      name: 'main_menu'
                    },
										cache: false
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
								// perform Data Binding.
                dataAdapter.dataBind();
								
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
								$('#jqxWidget').jqxMenu({ source: records, height: '30px', width: '400px', theme:'shinyblack' });
                $("#jqxWidget").on('itemclick', function (event) {
                    $("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text());
                });
            });
</script>
</div>

MySQL menu_cfg table (result from query using ‘main_menu’ for ‘name’ field

SQL result
Host: localhost
Database: home
Generation Time: Oct 15, 2013 at 02:48 PM
Generated by: phpMyAdmin 4.0.5 / MySQL 5.1.40-community
SQL query: SELECT * FROM `menus_cfg` LIMIT 0, 200 ;
Rows: 9
id	menuid	parentid	subMenuWidth	text	name	
3	1	-1	NULL	HOME	main_menu
4	2	-1	200	File	main_menu
5	3	-1	200	Edit	main_menu
6	4	-1	200	View	main_menu
7	5	-1	200	Tools	main_menu
8	6	-1	200	Windows	main_menu
9	7	-1	200	Help	main_menu
10	10	2	NULL	New	main_menu
11	11	10	NULL	Account	main_menu

October 8, 2013 at 10:37 pm in reply to: Grid Date Field Different Than MySQL Grid Date Field Different Than MySQL #30464

Hop

Participant

I got this working now too. This makes total sense now that I understand why. For someone looking for an answer like I was, I found my answer on stack overflow. Apparently, the date is parsed as UTC with midnight as the time, so when GMT-0700 factors in, the date returned is the day before. Parsing the MYSQL formatted date down into month, day, and year and using the date constructor via a function solved this for me. Now my calendar shows the actual date selected and not the day before.

October 8, 2013 at 5:40 pm in reply to: Grid Updated by Calendar Event Grid Updated by Calendar Event #30445

Hop

Participant

Never mind, I got it to work this morning. I rebuilt the source variable and dataAdapter, and reinitialized the grid from inside a calendar event and all is good. I didn’t think about doing it this way because I thought it would result in grids stacked on each other until my browser crashed. Actually, I still do not know if that is happening, but I clicked on many different dates, causing several grid updates with the new query data from my database, and never noticed any slowdown or increase in size of the page/process in chrome.

Thank you for your time! I will post the code below for anyone who is curious. I searched for hours for this and came up empty. It’s messy and not commented because I haven’t cleaned it up yet. My apologies.

data.php

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array
$limit = $_GET['limit']; 
$qdate = $_GET['qdate']; 
$query = "SELECT transaction,date,description,memo,amount_debit,amount_credit FROM budget_bank_statements_sfcu where date between '".$qdate."' and curdate() order by date asc";
$to = 20;
$query .= " LIMIT 0,".$limit;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$bankrecords[] = array(
        'transaction' => $row['transaction'],
				'date' => $row['date'],
				'description' => $row['description'],
				'memo' => $row['memo'],
				'amount_debit' => $row['amount_debit'],
				'amount_credit' => $row['amount_credit'],
      );
}
echo json_encode($bankrecords);
?>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
           
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'transaction', type: 'string'},
                    { name: 'date', type: 'date'},
                    { name: 'description', type: 'string'},
                    { name: 'memo', type: 'string'},
                    { name: 'amount_debit', type: 'number'},
                    { name: 'amount_credit', type: 'number'}
                ],
                url: 'data.php',
                data: {
                  limit: 30,
                  qdate: '2013-01-17'
                },
        cache: false
            };
            var cr1 = function (row, column, value) {
              if(value=='DEPOSIT') {
                return '<div style="text-align: center; margin-top: 2px; bgcolor: #58FA58;">' + value + '</div>';
              }
              else {
                return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>';
              }
              
            }
            var cr2 = function (row, column, value) {
              var column = $("#jqxgrid").jqxGrid('getcolumn', column);
                    if (column.cellsformat != '') {
                        if ($.jqx.dataFormat) {
                            if ($.jqx.dataFormat.isDate(value)) {
                                value = $.jqx.dataFormat.formatdate(value, column.cellsformat);
                            }
                        }
                    }
              return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>';
            }
            var cr3 = function (row, column, value) {
              if(value=='DEPOSIT') {
                return '<div style="text-align: center; margin-top: 2px; background: #58FA58;">' + value + '</div>';
              }
              else if (value=='PURCHASE'){
                return '<div style="text-align: center; margin-top: 2px; background: #A9BCF5;">' + value + '</div>';
              }
              else	
              {
                return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>';
              }
            }
            var cr4 = function (row, column, value) {
              return '<div style="margin-left: 3px; margin-top: 2px;">' + value + '</div>';
            }
            var cr5 = function (row, column, value) {
              if(value!=0){
                if(value>0){
                  value = $.jqx.dataFormat.formatnumber(value, 'c2');
                  return '<div style="text-align: right; margin-right: 3px; margin-top: 2px; color: darkgreen"><strong>' + value + '</strong></div>';
                }
                else{
                  value = $.jqx.dataFormat.formatnumber(value, 'c2');
                  return '<div style="text-align: right; margin-right: 3px; margin-top: 2px;">' + value + '</div>';
                }
              }
              else {
                return '';
              }
              
            }
            var cr6 = function (row, column, value) {
              return '<div style="margin-left: 3px; margin-top: 2px;">' + value + '</div>';
            }
           var dataAdapter = new $.jqx.dataAdapter(source);
            // events
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
      
      // initialize jqxGrid
      $("#jqxgrid").jqxGrid(
            {
                width:900,
                height:496,
                rowsheight: 16,
                columnsheight: 20,
                source: dataAdapter,
                theme: 'shinyblack',
                editable: true,
                autoloadstate: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Xact', datafield: 'transaction', width: 50, cellsrenderer: cr1, cellsformat: 'c1',cellsalign: 'middle'},
                  { text: 'Date', columntype: 'datetimeinput', datafield: 'date',  width: 80, cellsformat:'MM/dd/yy',cellsalign: 'middle', cellsrenderer: cr2},
                  { text: 'Description', columntype: 'dropdownlist', datafield: 'description', cellsrenderer: cr3, width: 100,cellsalign: 'middle'},
                  { text: 'Memo', datafield: 'memo', cellsrenderer: cr4, width: 490},
                  { text: 'DEBIT', datafield: 'amount_debit', cellsformat: 'c2', cellsrenderer: cr5, width: 80},
                  { text: 'CREDIT', datafield: 'amount_credit', cellsrenderer: cr5, width: 80}
              ]
            });        
         // Create jqxCalendar
            $("#jqxcalendar").jqxCalendar({ width: '240px', height: '220px'});
            $('#jqxcalendar').on('change viewChange', function (event) {
                var date = event.args.date;
                var fdate=date.getFullYear()+'-'+('0' + (date.getMonth()+1)).slice(-2)+'-'+('0' + date.getDate()).slice(-2);
                var view = event.args.view;
                var viewFrom = view.from;
                var viewTo = view.to;
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'transaction', type: 'string'},
                    { name: 'date', type: 'date'},
                    { name: 'description', type: 'string'},
                    { name: 'memo', type: 'string'},
                    { name: 'amount_debit', type: 'number'},
                    { name: 'amount_credit', type: 'number'}
                ],
                url: 'data.php',
                data: {
                  limit: 30,
                  qdate: fdate
                },
                sortcolumn: 'date',
                sortdirection: 'asc',
                cache: false
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
      $("#jqxgrid").jqxGrid(
            {
                width:900,
                height:496,
                rowsheight: 16,
                columnsheight: 20,
                source: dataAdapter,
                theme: 'shinyblack',
                editable: true,
                sortable: true,
                autoloadstate: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Xact', datafield: 'transaction', width: 50, cellsrenderer: cr1, cellsformat: 'c1',cellsalign: 'middle'},
                  { text: 'Date', columntype: 'datetimeinput', datafield: 'date',  width: 80, cellsformat:'MM/dd/yy',cellsalign: 'middle', cellsrenderer: cr2, sortable: true},
                  { text: 'Description', columntype: 'dropdownlist', datafield: 'description', cellsrenderer: cr3, width: 100,cellsalign: 'middle'},
                  { text: 'Memo', datafield: 'memo', cellsrenderer: cr4, width: 490},
                  { text: 'DEBIT', datafield: 'amount_debit', cellsformat: 'c2', cellsrenderer: cr5, width: 80},
                  { text: 'CREDIT', datafield: 'amount_credit', cellsrenderer: cr5, width: 80}
              ]
            });
          });
        });
    </script>
</head>
<body class='default'>
  <div id="jqxgrid" style="font-size: 15px; font-family: Verdana; float: left;"></div>
  <div id='jqxcalendar'></div>
</body>
</html>

September 29, 2013 at 8:19 pm in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29795

Hop

Participant

OK thank you. I don’t know why the bind_grid_to_mysql_database_virtual_scrolling example goes to your server for jqxgrid.js and locally for the other two (bind_listbox_to_mysql_database and bind_grid_to_mysql_database) that work for me, but I changed it to go local like the other two that work, and I STILL get no data to display.

I give up. It’s a great idea, but your software offers too many other options and goodies for me to get hung up on this one example. Thank you sir for giving it a shot for success for me. I appreciate it.

September 29, 2013 at 12:49 am in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29779

Hop

Participant

Thank you Peter, and I am a little confused. Online jqxgrid.js file meaning the one that resides on my server? Interesting point you made. If I try to do the example on the server itself and not from a remote machine, I am fortunate to have GUI setup on the server so I can try it.

As far as firewall concerns… like a particular port or protocol? Wouldn’t this present a problem for any client from remote that hasn’t explored an extravagant modification to their firewall? I haven’t seen anything here about that.

Finally, what with a firewall would keep the virtual example from populating the grid initially where the firewall would not be a factor with the other grid examples I was able to get to work?

Again Peter, thank you for your time!

September 27, 2013 at 10:50 pm in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29749

Hop

Participant

Another reply to myself, I’m sorry.
Peter,
I tried two other examples. bind_listbox_to_mysql_database and bind_grid_to_mysql_database and they work fine. Only the scrolling example bind_grid_to_mysql_database_virtual_scrolling failed me.

If that helps.

September 27, 2013 at 10:29 pm in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29747

Hop

Participant

Thank you Peter for your reply.
I was actually using 2.9.3. I updated to 3.0.2, unpacked the whole archive to a new subfolder on my LAMP server, and tried the demo from its folder and got the same result. I only had to modify connect.php to include a password, using my existing connect.php as a guide to make sure it the variable data was the same except the change of database. My existing connect.php works as I have tested it successfully already.

So since it worked fine for you, and I tried the demo out of the box and failed, I have to wonder if it is something in the configuration of my Debian LAMP. I have a couple other Linux LAMP servers running, one that is on a RPi (Raspberry Pi), so I will give them a shot and see.

Anything you can think of about my LAMP (Apache, PHP, or MySQL) configurations that would cause this to fail would be greatly appreciated. Even anything I can do to debug parts of the process so I can eliminate stages of the whole process.

Thank you sir for your time and effort!

EDIT: I forgot to include that I did download the northwind database and successfully imported it into my MySQL.

September 27, 2013 at 2:29 am in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29644

Hop

Participant

I haven’t figured out how to edit my post here, so I have to reply to myself. Anyone that is offended by that, I wanted you to know why.

If someone can help me to put some debug points in the code, like prints, I would appreciate it. I realized that I had error reporting set to off in my PHP.INI so I fixed that. Then I went to print a variable to the page using document.print but then when everything crashed, I realized I was doing that from the document’s header. I wanted to output the source.totalrecords to the document so I could see what my PHP data.php file was sending back.

I guess I could output what data.php is sending to a panel and look at it. I will have to extensively change the index.php code to accomidate. But I do not know what the protocol is for what the grid needs for a data source so I’m not sure what help that would be.

Anyway, that’s where I am with this broken solution for me. I’m sure it works. I’m just stumped at where to start debugging the processes.

Again, thank you for your time. I’ll leave this here as bait on a hook, looking for a fish, until tomorrow. Until then…

September 27, 2013 at 12:10 am in reply to: Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL Example Fail – jqxGrid Virtual Scrolling with PHP and MySQL #29643

Hop

Participant

I found jquery-1.7.2.min.js and downloaded it. Changed the code to reference it, and I get the same results as when I used 2.0.2. I see the grid with “no data to display”.

I wanted to include this to help with any answers I can get. Thank you so much for your time!

Author

Posts

Viewing 10 posts - 16 through 25 (of 25 total)

← 1 2