jQuery Grid Plugin - jqGridForum

Topic RSS

jqdata not displaying data

30/10/2009
05:24

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

i am trying to get a tutorial on jqgrid from ... and i can add data but it is not displaying any data in the grid from the database. the grid is just blank. i would be grateful if someone could look over the code and show me where i am going wrong.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/D.....038;hellip;..html11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" target="_blank" target="_blank">http://www.w3.org/1999/xhtml" xml:lang="en">

<h2>JQGrid</h2>
<p>JQGrid is <del>a free</del> the best plugin for organizing tabulated or grid data using jQuery, made by Tony Tomov. Owing to a bit of difficulty getting concrete working examples of the grid that can work just out of a package, here is one for your use. Inside you'll find a static JSON file that can give you a good idea of how to start.</p>

<table> Filter by:
<tr><td>Title</td><td><input type="text" id="search_title" onkeydown="doSearch(arguments[0]||event)" /></td></tr>
<tr><td>Director</td><td><input type="text" id="search_director" onkeydown="doSearch(arguments[0]||event)" /></td></tr>
<tr><td>Year</td><td><input type="text" id="search_year" onkeydown="doSearch(arguments[0]||event)" /></td></tr>
<tr><td>Bond</td><td><input type="text" id="search_bond" onkeydown="doSearch(arguments[0]||event)" /></td></tr>

</table>
<table id="list2″ class="scroll" cellpadding="0″ cellspacing="0″></table>
<div id="pager2″ class="scroll" style="text-align:center;"></div>
<br />
<a href="javascript:void(0)" id="m1″>Get selected row IDs</a> <br />
<a href="javascript:void(0)" id="m2″>Add or edit a row</a>
<hr />

// When you want to select certain rows
jQuery("#m1″).click(function() {
var s;
s = jQuery("#list2″).getGridParam('selarrrow');
alert('The selected rows are: ' + s);
});

jQuery("#m2″).click(function(){
var gr = jQuery("#list2″).getGridParam('selrow');
if( gr != null ) {
jQuery("#list2″).editGridRow(gr,{height:280,reloadAfterSubmit:false});
}
else {
jQuery("#list2″).editGridRow("new",{height:280,reloadAfterSubmit:false});
}
});

// This is the actual grid
jQuery("#list2″).jqGrid({
    url:'json.php',
    datatype: 'json',
    width:500,
    height:'auto',
    colNames:['ID','Title','Director', 'Year', 'Bond','Budget'],
    colModel:[
        {name:'id',index:'id', width:50, editable:false},
        {name:'title',index:'title', width:120, editable:true, editoptions:{size:10}},
        {name:'director',index:'director', width:95, editable:true, editoptions:{size:10}},
    {name:'year',index:'year', width:60, editable:true, editoptions:{size:10}},
        {name:'bond',index:'bond', width:90, align:"right", editable:true, editoptions:{size:10}},
        {name:'budget',index:'budget', width:60, align:"right", editable:true, editoptions:{size:10}}
    ],
    pager: jQuery('#pager2'),
    rowNum:7,
    rowList:[10,20,30],
    imgpath: 'themes/sand/images',
    sortname: 'year',
   mtype: 'POST',
    viewrecords: true,
    sortorder: 'desc',
    loadonce: false,
multiselect: true,
editurl: 'edit.php',
    caption: "James Bond movies"
});

    // jqGrid Form tune
    jQuery.jgrid.edit = {
    addCaption: "Add Record",
    editCaption: "Edit Record",
    bSubmit: "Submit",
closeAfterAdd: true,
    bCancel: "Cancel",
    msg: {
        required:"Field is required",
        number:"Please enter valid number",
        minValue:"value must be greater than or equal to ",
        maxValue:"value must be less than or equal to"
        },
    processData: "Processing…",
    editData:{myname:"myvalue"},
height:100,
    top:0,
    left:0
     };

var timeoutHnd;
var flAuto = true;

// Live search
function doSearch(ev){
if(timeoutHnd) {
clearTimeout(timeoutHnd); }
timeoutHnd = setTimeout(gridReload,500);
}

// Send the data and refresh the grid
function gridReload(){
var title_mask = jQuery("#search_title").val();
var director_mask = jQuery("#search_director").val();
var year_mask = jQuery("#search_year").val();
var bond_mask = jQuery("#search_bond").val();
jQuery("#list2″).setGridParam({url:"json.php?title_mask="+title_mask+"&director_mask="+director_mask+"&year_mask="+year_mask+"&bond_mask="+bond_mask,page:1}).trigger("reloadGrid");
}

</script>
</div>
</body>
</html>

json.php

<?php

$page = $_POST['page']; // get the requested page
$limit = $_POST['rows']; // get how many rows we want to have into the grid
$sidx = $_POST['sidx']; // get index row – i.e. user click to sort
$sord = $_POST['sord']; // get the direction
$searchField = $_POST['searchField'];
$searchString = $_POST['searchString'];

if(!$sidx) $sidx =1; // connect to the database

if(isset($_GET["title_mask"])) $title_mask = $_GET['title_mask'];
else $title_mask = "";
if(isset($_GET["director_mask"])) $director_mask = $_GET['director_mask'];
else $director_mask = "";
if(isset($_GET["year_mask"])) $year_mask = $_GET['year_mask'];
else $year_mask = "";
if(isset($_GET["bond_mask"])) $bond_mask = $_GET['bond_mask'];
else $bond_mask = "";

$dbhost = "localhost"; // Add your data here
$dbuser = "jqgrid_peterc"; // Add your data here
$dbpassword = "xxxxxx"; // Add your data here
$database = "jqgrid"; // Add your data here
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");

//construct where clause
$where = "WHERE 1=1″;
if($title_mask!='') $where.= " AND title LIKE '$title_mask%'";
if($director_mask!='') $where.= " AND director LIKE '$director_mask%'";
if($year_mask!='') $where.= " AND year LIKE '$year_mask%'";
if($bond_mask!='') $where.= " AND bond LIKE '$bond_mask%'";

$result = mysql_query("SELECT COUNT(*) AS total FROM jqgrid ".$where) or die( mysql_error() );
$row = mysql_fetch_array($result,MYSQL_ASSOC);

$count = $row['count'];
if( $count >0 ) { $total_pages = ceil($count/$limit); } else { $total_pages = 0; }
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page – $limit; // do not put $limit*($page – 1)

$SQL = "SELECT id, title, director, director, year, bond, budget FROM jqgrid ".$where." ORDER BY $sidx $sord LIMIT $start , $limit";

$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());

$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0; while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array($row[id],$row[title],$row[director],$row[year],$row[bond],$row[budget]); $i++; }
echo "<pre>";
var_dump($responce);
echo "</pre>";
echo json_encode($responce);
mysql_close($db);
?>

i haven't attached the edit file because that is working ok and also there is a staic json file which i haven't included. i have tried to debug using var_dump but nothing is being output. i have tried both localhost with wamp and on my linux server. other db apps are working fine. many thanks

Wish i knew more about jqGrid

30/10/2009
08:38

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

any chance of any help with this please? many thanks

Wish i knew more about jqGrid

30/10/2009
08:43

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Using FireBug – do you see the data returned from server?

If the grid is empty this means

1. No data is returned from server

2. If the data is returned it can not be accepted from jqGrid becouse of bad configuration

Regards

Tony

I have just noted.

Remove this from php code:

...

echo “<pre>”;
var_dump($responce);
echo “</pre>”;

...

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.

30/10/2009
15:57

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

thanks for reply tony. often helps if json is enabled on the server 🙂 many thanks

Wish i knew more about jqGrid

07/11/2009
02:43

Zandar

Guest

Guests

I'm struggling with editing the grid with the "editurl" paramater using PHP.

Could you please post your edit code?