jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by wfr 11 years, 4 months ago.

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

Author

Data from mySQL Posts

February 24, 2014 at 7:36 pm Data from mySQL #50023

wfr

Participant

Hi,
I have tried the example with mySQL/PHP to populate the grid.
But nothing happens, no error, nothing. Maybe I have missed something.

Here is my connect.php

<?php
# FileName="connect.php"
$hostname = "my_host";
$database = "my_database";
$username = "user";
$password = "******";
?>

Here is my 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
$query = "SELECT * FROM my_table";
$from = 0;
$to = 30;
$query .= " LIMIT ".$from.",".$to;
 
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $my_table[] = array(
        'datum' => $row['datum'],
        'bank' => $row['bank'],
	'bank_wert' => $row['bank_wert'],
	'zu_an' => $row['zu_an'],
	'zu_wert' => $row['zu_wert'],
	'info_text' => $row['info_text'],
	'info_wert' => $row['info_wert'],
	'bemerkungen' => $row['bemerkungen']
      );
}
 
echo json_encode($my_table);
?>

And finally, my HTML-page:

<!DOCTYPE html> 
<head> 
<title>Title</title>
<meta charset="utf-8">

<link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
	<script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script>

   
<div id="jqxgrid"></div>

<script>
$(document).ready(function () {
// prepare the data
var source ={
datatype: "json",
datafields: [{ name: 'datum' },{ name: 'bank' },{ name: 'bank_wert' },{ name: 'zu_an' },{ name: 'zu_wert' },],
{ name: 'info_text' },{ name: 'info_wert' },{ name: 'bemerkungen' }
url: 'data.php'
};

$("#jqxgrid").jqxGrid({
source: source,
theme: 'classic',
columns: [
{ text: 'Datum', datafield: 'datum', width: 100 },
{ text: 'Bank', datafield: 'bank', width: 100 },
{ text: 'Bank-Wert', datafield: 'bank_wert', width: 100 },
{ text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 100 },
{ text: 'Zahlung unterwegs Wert', datafield: 'zu_wert', width: 100 },
{ text: 'Info-Text', datafield: 'info_text', width: 100 },
{ text: 'Info-Wert', datafield: 'info_wert', width: 100 },
{ text: 'Bemerkungen', datafield: 'bemerkungen', width: 100 }
]
});
});   
</script>
   
     
   
   </body>
</html>

Thank you for your help
Walter

February 25, 2014 at 6:03 am Data from mySQL #50040

Peter Stoev

Keymaster

Hi Walter,

My suggestion is to test at first your PHP code i.e data.php. Open it with the Browser and see the results. If necessary, debug it. After that check whether the URL on your client side is specified correctly i.e in the current case data.php should be in the same folder where index.php is. As an additional suggestion – the Grid should be bound to a dataAdapter created from the source, not to the source object directly.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 25, 2014 at 1:25 pm Data from mySQL #50096

wfr

Participant

Thank you for your reply, Peter.
I have tested the data.php as you’ve suggested. The data is shown:

[{"datum":"2014-02-20","bank":"SPC","bank_wert":"230","zu_an":null,"zu_wert":"2054","info_text":"info","info_wert":"458","bemerkungen":"bemerkung"},{"datum":"2014-02-20","bank":"SPC","bank_wert":"-297125","zu_an":null,"zu_wert":"8954","info_text":null,"info_wert":null,"bemerkungen":null},{"datum":"2015-02-20","bank":"STP","bank_wert":"5431","zu_an":null,"zu_wert":null,"info_text":"info","info_wert":"145","bemerkungen":null},{"datum":"2015-02-20","bank":"SPC","bank_wert":"-254874","zu_an":null,"zu_wert":"894","info_text":"info","info_wert":"985","bemerkungen":"bemerkung"},{"datum":"2016-02-20","bank":"STP","bank_wert":"548","zu_an":null,"zu_wert":"897","info_text":null,"info_wert":null,"bemerkungen":null},{"datum":"2016-02-20","bank":"STP","bank_wert":"-784896","zu_an":null,"zu_wert":null,"info_text":null,"info_wert":null,"bemerkungen":null},{"datum":"2017-02-20","bank":"SPC","bank_wert":"874","zu_an":null,"zu_wert":"321","info_text":null,"info_wert":null,"bemerkungen":null},{"datum":"2017-02-20","bank":"STP","bank_wert":"-569212","zu_an":null,"zu_wert":"141","info_text":null,"info_wert":null,"bemerkungen":null}]

So the data connection seems to be ok.

You mentioned the index.php which I don’t have. What should be in there?

As an additional suggestion – the Grid should be bound to a dataAdapter created from the source, not to the source object directly.

Can you show how to do this based on my example?- sorry I’m a newbie.

Thank’s again
Walter

February 25, 2014 at 1:38 pm Data from mySQL #50098

Peter Stoev

Keymaster

Hi Walter,

var dataAdapter = new $.jqx.dataAdapter(source);
			
		$("#jqxgrid").jqxGrid(
		{
		source: dataAdapter ,	
		columns: [
			{ text: 'Company Name', datafield: 'CompanyName', width: 250},
			{ text: 'ContactName', datafield: 'ContactName', width: 150 },
			{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
			{ text: 'Address', datafield: 'Address', width: 200 },
			{ text: 'City', datafield: 'City', width: 120 }
		]
		});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 25, 2014 at 3:22 pm Data from mySQL #50112

wfr

Participant

Hi Peter,

My index.html looks now like this (according to your last post):

<!DOCTYPE html> 
<head> 
<title>Title</title>
<meta charset="utf-8">

<link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script>
	
   
<div id="jqxgrid"></div>

<script>
$(document).ready(function () {
// prepare the data
var source ={
datatype: "json",
datafields: [{ name: 'datum' },{ name: 'bank' },{ name: 'bank_wert' },{ name: 'zu_an' },{ name: 'zu_wert' },],
{ name: 'info_text' },{ name: 'info_wert' },{ name: 'bemerkungen' }
url: 'data.php'
};

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

$("#jqxgrid").jqxGrid({
source: dataAdapter,
theme: 'classic',
columns: [
{ text: 'Datum', datafield: 'datum', width: 100 },
{ text: 'Bank', datafield: 'bank', width: 100 },
{ text: 'Bank-Wert', datafield: 'bank_wert', width: 100 },
{ text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 100 },
{ text: 'Zahlung unterwegs Wert', datafield: 'zu_wert', width: 100 },
{ text: 'Info-Text', datafield: 'info_text', width: 100 },
{ text: 'Info-Wert', datafield: 'info_wert', width: 100 },
{ text: 'Bemerkungen', datafield: 'bemerkungen', width: 100 }
]
});
});   
</script>
   
   </body>
</html>

index.html, data.php and connect.php are in the same folder. Still no luck. But what about the index.php ?

Thx
Walter

February 25, 2014 at 3:31 pm Data from mySQL #50114

Peter Stoev

Keymaster

Hi Walter,

index.htm or index.php – it is the same. On your page I don’t find the body tag’s Start tag and the head tag’s closing tag. The datafields closing “]” is missing, too. A “,” after the datafields Array is missing as well.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 25, 2014 at 5:16 pm Data from mySQL #50121

wfr

Participant

YES, YES, YES !!!!

Thank you so much!

Walter

Author

Posts

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

You must be logged in to reply to this topic.