hi there!
I have a problem working on JSON, its my first time to try JSON and I having some trouble here's my code
vet-modify.html
<?php
// get data and store in a json array
$query = "SELECT * FROM reg_tblvetinfo";
if (isset($_POST['update']))
{
// UPDATE COMMAND
$update_query = "UPDATE `reg_tblvetinfo` SET `firstname`='".mysql_real_escape_string($_POST['firstname'])."',
`lastname`='".mysql_real_escape_string($_POST['lastname'])."',
`clinic_name`='".mysql_real_escape_string($_POST['clinic_name'])."' WHERE `system_md_id`='".mysql_real_escape_string($_POST['system_md_id'])."'";
$result = $modx->query($update_query) or die("SQL Error 1: " . mysql_error());
echo $result;
}
else
{
// SELECT COMMAND
$result = $modx->query($query) or die("SQL Error 1: " . mysql_error());
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$employees[] = array(
'system_md_id' => $row['system_md_id'],
'firstname' => $row['firstname'],
'lastname' => $row['lastname'],
'clinic_name' => $row['clinic_name']
);
}
$output = json_encode($employees);
return $output;
}
vet-info
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
click the 'Cancel' button in the popup dialog.</title>
<link rel="stylesheet" href="[[++base_url]]assets/templates/tfvet/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/templates/tfvet/scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source =
{
datatype: "json",
datafields: [
{ name: 'system_md_id', type: 'string'},
{ name: 'firstname', type: 'string'},
{ name: 'lastname', type: 'string'},
{ name: 'clinic_name', type: 'string'}
],
cache: false,
id: 'system_md_id',
url: 'vet-modify.html',
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
var data = "update=true&firstname=" + rowdata.firstname + "&lastname=" + rowdata.lastname + "&clinic_name=" + rowdata.clinic_name;
data = data + "&system_md_id=" + rowid;
$.ajax({
dataType: 'json',
url: 'vet-modify.html',
type: 'POST',
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize the input fields.
$("#firstname").jqxInput({width: 150, height: 23});
$("#lastname").jqxInput({width: 150, height: 23});
$("#clinic_name").jqxInput({width: 150, height: 23});
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 600,
source: dataAdapter,
autoheight: true,
columns: [
{ text: 'system_md_id', editable: false, datafield: 'system_md_id', width: 100 },
{ text: 'firstname', columntype: 'dropdownlist', datafield: 'firstname', width: 100 },
{ text: 'lastname', columntype: 'dropdownlist', datafield: 'lastname', width: 100 },
{ text: 'clinic_name', columntype: 'dropdownlist', datafield: 'clinic_name', width: 100 },
{ text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
return "Edit";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row's data and initialize the input fields.
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
$("#firstname").val(dataRecord.firstname);
$("#lastname").val(dataRecord.lastname);
$("#clinic_name").val(dataRecord.clinic_name);
// show the popup window.
$("#popupWindow").jqxWindow('open');
}
}
]
});
// initialize the popup window and buttons.
$("#popupWindow").jqxWindow({
width: 280, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
});
$("#popupWindow").on('open', function () {
$("#firstname").jqxInput('selectAll');
});
$("#Cancel").jqxButton();
$("#Save").jqxButton();
// update the edited row when the user clicks the 'Save' button.
$("#Save").click(function () {
if (editrow >= 0) {
var row = { firstname: $("#firstname").val(), lastname: $("#lastname").val(), clinic_name: $("#clinic_name").val()};
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
$('#jqxgrid').jqxGrid('updaterow', rowID, row);
$("#popupWindow").jqxWindow('close');
}
});
});
</script>
</head>
when I view the page no data is viewed. what would be the problem?
Thanks In Advance!
john
