jQWidgets Forums
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 11 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Hello
I am trying to build a “Row Details” view with the grid with php & mysql. For the moment I have the grid and each record opens a Row Details view, but the data itself is all “undefined”
Here are the files:
1. The i4.php<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.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/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/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = {}; var theme = 'classic'; var source = { datatype: "json", cache: false, datafields: [ { name: 'EmployeeID' }, { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' }, { name: 'Country' }, { name: 'Notes' } ], id: 'EmployeeID', url: 'data4.php', updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'data4.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function (jqXHR, textStatus, errorThrown) { commit(false); } }); } }; var initrowdetails = function (index, parentElement, gridElement, datarecord) { var tabsdiv = null; var information = null; var notes = null; tabsdiv = $($(parentElement).children()[0]); if (tabsdiv != null) { information = tabsdiv.find('.information'); notes = tabsdiv.find('.notes'); var title = tabsdiv.find('.title'); title.text(datarecord.firstname); var container = $('<div style="margin: 5px;"></div>') container.appendTo($(information)); var photocolumn = $('<div style="float: left; width: 15%;"></div>'); var leftcolumn = $('<div style="float: left; width: 45%;"></div>'); var rightcolumn = $('<div style="float: left; width: 40%;"></div>'); container.append(photocolumn); container.append(leftcolumn); container.append(rightcolumn); var photo = $("<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>"); var image = $("<div style='margin-top: 10px;'></div>"); // var imgurl = '../../images/' + datarecord.firstname.toLowerCase() + '.png'; var imgurl = ''; var img = $('<img height="60" src="' + imgurl + '"/>'); image.append(img); image.appendTo(photo); photocolumn.append(photo); var firstname = "<div style='margin: 10px;'><b>First Name:</b> " + datarecord.firstname + "</div>"; var lastname = "<div style='margin: 10px;'><b>Last Name:</b> " + datarecord.lastname + "</div>"; var title = "<div style='margin: 10px;'><b>Title:</b> " + datarecord.title + "</div>"; var address = "<div style='margin: 10px;'><b>Address:</b> " + datarecord.address + "</div>"; $(leftcolumn).append(firstname); $(leftcolumn).append(lastname); $(leftcolumn).append(title); $(leftcolumn).append(address); var postalcode = "<div style='margin: 10px;'><b>Postal Code:</b> " + datarecord.postalcode + "</div>"; var city = "<div style='margin: 10px;'><b>City:</b> " + datarecord.city + "</div>"; var phone = "<div style='margin: 10px;'><b>Phone:</b> " + datarecord.homephone + "</div>"; var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + datarecord.hiredate + "</div>"; $(rightcolumn).append(postalcode); $(rightcolumn).append(city); $(rightcolumn).append(phone); $(rightcolumn).append(hiredate); var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>' + datarecord.notes + '</span></div>'); $(notes).append(notescontainer); $(tabsdiv).jqxTabs({ width: 750, height: 170}); } } var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, height: 250, source: dataAdapter, rowdetails: true, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 }, ready: function () { $("#jqxgrid").jqxGrid('showrowdetails', 0); $("#jqxgrid").jqxGrid('showrowdetails', 1); }, initrowdetails: initrowdetails, columns: [ { text: 'First Name', datafield: 'firstname', width: 200 }, { text: 'Last Name', datafield: 'lastname', width: 200 }, { text: 'Title', datafield: 'title', width: 180 }, { text: 'City', datafield: 'city', width: 100 }, { text: 'Country', datafield: 'country'} ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> </div> </body> </html>2. The data4.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 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 Employees"; if (isset($_GET['insert'])) { // INSERT COMMAND $insert_query = "INSERT INTO <code>Employees</code>(<code>FirstName</code>, <code>LastName</code>, <code>Title</code>, <code>Address</code>, <code>City</code>, <code>Country</code>, <code>Notes</code>) VALUES ('".$_GET['FirstName']."','".$_GET['LastName']."','".$_GET['Title']."','".$_GET['Address']."','".$_GET['City']."','".$_GET['Country']."','".$_GET['Notes']."')"; $result = mysql_query($insert_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['update'])) { // UPDATE COMMAND $update_query = "UPDATE <code>Employees</code> SET <code>FirstName</code>='".$_GET['FirstName']."', <code>LastName</code>='".$_GET['LastName']."', <code>Title</code>='".$_GET['Title']."', <code>Address</code>='".$_GET['Address']."', <code>City</code>='".$_GET['City']."', <code>Country</code>='".$_GET['Country']."', <code>Notes</code>='".$_GET['Notes']."' WHERE <code>EmployeeID</code>='".$_GET['EmployeeID']."'"; $result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['delete'])) { // DELETE COMMAND $delete_query = "DELETE FROM <code>Employees</code> WHERE <code>EmployeeID</code>='".$_GET['EmployeeID']."'"; $result = mysql_query($delete_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else { // SELECT COMMAND $result = mysql_query($query) or die("SQL Error 1: " . mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $employees[] = array( 'EmployeeID' => $row['EmployeeID'], 'FirstName' => $row['FirstName'], 'LastName' => $row['LastName'], 'Title' => $row['Title'], 'Address' => $row['Address'], 'City' => $row['City'], 'Country' => $row['Country'], 'Notes' => $row['Notes'] ); } echo json_encode($employees); } ?>Can also be viewed at http://www.ephp.org/yyy/phpdemos/dir4/i4.php
If I just want to view/update the table without Row Details, everything works fine.
p.s. // var imgurl = ‘../../images/’ + datarecord.firstname.toLowerCase() + ‘.png’; this is commented out because otherwise I get a javascript error: toLowerCase() cannot be applied to “undefined”
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.