Question

I’m quite new to php and jquery so any help would be much appreciated. I basically have a grid called ‘booking’ which displays all the information about bookings stored in a database.

When you double click a row it brings up a Jquery Dialog Box that displays all the information about their booking:

At the moment, no matter which booking you click on it always displays the information from the first row of the database. What I want is for it to display the data from the database by which row is selected.

This is the PHP code:

        $pdo = new SQL();
        $dbh = $pdo->connect(Database::$serverIP, Database::$serverPort, Database::$dbName, Database::$user, Database::$pass);

        try {

            $query = "SELECT * FROM tblbookings";


            $stmt = $dbh->prepare($query);

            $stmt->execute();

            $row = $stmt->fetch(PDO::FETCH_BOTH);

 /*           Company::set_id($row['Id']);
            Company::set_name($row['CompName']); */
            BookingDocket::set_id($row['id']);
            BookingDocket::set_bookref($row['bookref']);
            BookingDocket::set_returndate($row['returndate']);


            $stmt->closeCursor();

        }

        catch (PDOException $pe) {
            die("Error: " .$pe->getMessage(). " Query: ".$stmt->queryString);
        }

        $dbh = null;

    }

JQGrid Code:

$("#bookings").jqGrid({
    url:'scripts/php/bootstrp/cp.request.php?ft=gg&table=bookings&showindex=0',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['id', 'Booking Reference','Date of Booking','Time of Booking','Fare'],
    colModel :[{name:'id', index:'id', hidden:'true', align:'center', search:false, width:'210px'},
    {name:'bookref', index:'bookref', align:'center', search:true, width:'210px'},
        {name:'recordeddate', index:'recordeddate', align:'center', search:false, width:'210px'},
        {name:'recordedtime', index:'recordedtime', align:'center', search:false, width:'210px'},
        {name:'fare', index:'fare', align:'center', search:false, width:'210px'}],
    pager: $('#bookingsPager'), rowNum:500, rowList:[500,2000,5000,10000],
    sortname: 'recordeddate',
    sortorder: "desc",
    viewrecords: true,
hidegrid: false,
rowNum: 500,
    imgpath: 'lib/themes/steel/images',
    height: '300px',
    forceFit: true,
    caption: 'Bookings History',
    loadtext: 'Loading',
    loadui:'enable',
    ondblClickRow: function(rowid)
    {
        var rowData = new Array();
        rowData = $("#bookings").getRowData(rowid);
    $("#cp-bookings-dialog").dialog({ hide: 'slide', height: 625, width: 733, title: 'Booking Reference: - '+ rowData['bookref'] });
    },
    editurl: 'scripts/php/bootstrp/cp.request.php?ft=ug&table=bookings'
}).navGrid("#bookingsPager",{refresh:true,search:true,add:false,edit:false,del:false});

$("#bookings").setGridWidth('710px',false);

Any help would be great!

Answer 1

I think that it would be much more easy to include all booking information in the grid as hidden columns and to use viewGridRow method to display detailed information. To make the hidden columns be visible in the View-form you need add editrules: { edithidden: true } setting in the column definition.

I made the demo for you which uses

ondblClickRow: function (id) {
    $(this).jqGrid('viewGridRow', id, { caption: "Booking Reference" });
}

As the result the grid with a few columns

will display the detailed information after the double-click or after selection a row and clicking on the “View” navigator button:

I think it would be the easiest way to implement your requirements.