jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

Cannot make jqGridEdit work after sucess with jqGridRender

Tags: jqgrid jqGridEdit jqGridRender beginner problems

06/02/2011
13:08

stevie

Brentwood

New Member

Members

Forum Posts: 1

Member Since:
06/02/2011

Offline

Ok I am total new to this and I wanted to build an app which allowed simple administration of some SQL tables. So basically normal stuff like select, insert, update and delete.

I know a little php and html and ok with SQL but know very little about java scripts. Part of the attraction of using jQuery and jEdit…

So I started with the some simple code that allows me to add records to the Northwind db. It works perfectly. Below is the code:

Main html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jqGrid PHP Demo</title>

And gridData.php is

<?php
define('DB_DSN','mysql:host=localhost;dbname=northwind');
define('DB_USER', 'root'); // Your MySQL username
define('DB_PASSWORD', 'root'); // …and password
// include the jqGrid Class
//echo UTILPATH;
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8″);
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Set output format to json
$grid->dataType = 'json';

// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
// Set the table to where we add the data
$grid->table = 'orders';
// We tell that the primary key is not serial, which should be inserted by the user
$grid->serialKey = false;

// Let the grid create the model
$grid->setColModel();

// Set the url from where we obtain the data
$grid->setUrl('gridData.php');

// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"orderID"
));

// Enable navigator
$grid->navigator = true;
// Enable only adding
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>true,"edit"=>false,"del"=>false,"view"=>false, "search"=>false));
// Close the dialog after the record is added
$grid->setNavOptions('add',array("closeAfterAdd"=>true,"reloadAfterSubmit"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;

The output is as expected (sorry the grid graphics will not copy):

[Image Can Not Be Found][Image Can Not Be Found]

OrderID OrderDate           CustomerID         Freight          ShipName
10248   1996-07-04 00:00:00   WILMK   32.3800   Vins et alcools Chevalier
10249   1996-07-05 00:00:00   TRADH   11.6100   Toms Spezialit‰ten
10250   1996-07-08 00:00:00   HANAR   65.8300   Hanari Carnes
10251   1996-07-08 00:00:00   VICTE   41.3400   Victuailles en stock
10252   1996-07-09 00:00:00   SUPRD   51.3000   SuprÍmes dÈlices
10253   1996-07-10 00:00:00   HANAR   58.1700   Hanari Carnes
10254   1996-07-11 00:00:00   CHOPS   22.9800   Chop-suey Chinese
10255   1996-07-12 00:00:00   RICSU   148.3300   Richter Supermarkt
10256   1996-07-15 00:00:00   WELLI   13.9700   Wellington Importadora
10257   1996-07-16 00:00:00   HILAA   81.9100   HILARI”N-Abastos
Page of 83                                                         View 1 – 10 of 830

great so far.

But to move to the full editable version the format seems to be different. See the code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>PHP jqGrid Class Example</title>

</head>
<body>
……
<table id="grid"></table>
<div id="pager"></div>
……
</body>
</html>

and the gridData.php is as follows:

// Create the jqGrid instance
$grid = new jqGrid($conn);
// enable debugging
$grid->debug = true;
/// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
$grid->dataType = "json";
$grid->queryGrid();
?>

I have run gridData independently and it does produce data for the grid:

{"records":"830″,"page":1,"total":42,"rows":[{"OrderID":"10248","OrderDate":"1996-07-04 00:00:00","CustomerID":"WILMK","Freight":"32.3800","ShipName":"Vins et alcools Chevalier"},{"OrderID":"10249","OrderDate":"1996-07-05 00:00:00","CustomerID":"TRADH","Freight":"11.6100","ShipName":null},{"OrderID":"10250","OrderDate":"1996-07-08 00:00:00","CustomerID":"HANAR","Freight":"65.8300","ShipName":"Hanari Carnes"},{"OrderID":"10251","OrderDate":"1996-07-08 00:00:00","CustomerID":"VICTE","Freight":"41.3400","ShipName":"Victuailles en stock"},{"OrderID":"10252","OrderDate":"1996-07-09 00:00:00","CustomerID":"SUPRD","Freight":"51.3000","ShipName":null},{"OrderID":"10253","OrderDate":"1996-07-10 00:00:00","CustomerID":"HANAR","Freight":"58.1700","ShipName":"Hanari Carnes"},{"OrderID":"10254","OrderDate":"1996-07-11 00:00:00","CustomerID":"CHOPS","Freight":"22.9800","ShipName":"Chop-suey Chinese"},{"OrderID":"10255","OrderDate":"1996-07-12 00:00:00","CustomerID":"RICSU","Freight":"148.3300","ShipName":"Richter Supermarkt"},{"OrderID":"10256","OrderDate":"1996-07-15 00:00:00","CustomerID":"WELLI","Freight":"13.9700","ShipName":"Wellington Importadora"},{"OrderID":"10257","OrderDate":"1996-07-16 00:00:00","CustomerID":"HILAA","Freight":"81.9100","ShipName":null},{"OrderID":"10258","OrderDate":"1996-07-17 00:00:00","CustomerID":"ERNSH","Freight":"140.5100","ShipName":"Ernst Handel"},{"OrderID":"10259","OrderDate":"1996-07-18 00:00:00","CustomerID":"CENTC","Freight":"3.2500","ShipName":"Centro comercial Moctezuma"},{"OrderID":"10260","OrderDate":"1996-07-19 00:00:00","CustomerID":"OLDWO","Freight":"55.0900","ShipName":null},{"OrderID":"10261","OrderDate":"1996-07-19 00:00:00","CustomerID":"QUEDE","Freight":"3.0500","ShipName":null},{"OrderID":"10262","OrderDate":"1996-07-22 00:00:00","CustomerID":"RATTC","Freight":"48.2900","ShipName":"Rattlesnake Canyon Grocery"},{"OrderID":"10263","OrderDate":"1996-07-23 00:00:00","CustomerID":"ERNSH","Freight":"146.0600","ShipName":"Ernst Handel"},{"OrderID":"10264","OrderDate":"1996-07-24 00:00:00","CustomerID":"FOLKO","Freight":"3.6700","ShipName":null},{"OrderID":"10265","OrderDate":"1996-07-25 00:00:00","CustomerID":"BLONP","Freight":"55.2800","ShipName":null},{"OrderID":"10266","OrderDate":"1996-07-26 00:00:00","CustomerID":"WARTH","Freight":"25.7300","ShipName":"Wartian Herkku"},{"OrderID":"10267","OrderDate":"1996-07-29 00:00:00","CustomerID":"FRANK","Freight":"208.5800","ShipName":"Frankenversand"}]}

But when I run the main html – nothing but the dots …….

Am I missing some sort of call to the function call to "#grid" in the body of html?

Unfortunately from what I have read, I cannot make jqGridEdit work in the first format.

Please, anybody who can put me on the correct path – I would be very grateful.

Steve.

PS Would it have anything to with the fact that I am running all of this on localhost and not over an internet URL?

[Image Can Not Be Found]

27/09/2012
11:55

bailamj

Member

Members

Forum Posts: 3

Member Since:
27/09/2012

Offline

I need help too for this 😉

27/09/2012
12:52

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Please write your question in the approriate forum here

Thank you

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
25 Guest(s)

Currently Browsing this Page:
1 Guest(s)