Browser Error:
Use Mozilla 2+ or Chrome 4+ or IE 9+ browsers for Canvas support!!
// init
$(document).ready(function(){
$('#action').val('3');
$("#show_jscode_btn").attr("disabled", false);
$("#show_phpcode_btn").attr("disabled", false);
$('#loadData_btn').attr("disabled", false);
$('#hideData_btn').attr("disabled", true);
$('#loadGrid_btn').attr("disabled", false);
$('#hideGrid_btn').attr("disabled", true);
$.ajaxSetup ({
cache: false
});
});
// Function for Login button
$('#loginBtn').click(function(){
var form_data = {'action': 1, 'username': $('#username').val(), 'password':$('#password').val()}
var errors='';
if (form_data.username ==''){
errors += '<div style="color:red">Please enter a Username !!</div>';
}
if(form_data.password ==''){
errors += '<div style="color:red">Please enter a Password !!</div>';
}
if (errors != ''){
$('#loginResults').html(errors)
return false;
}
$.ajax({
type: 'POST',
url: 'ajax/sample.php',
data: form_data,
dataType: 'json',
success: function(response) {
if (response.status=='success'){
$('#loginResults').html('<;div style="text-align:center; color:green">'+response.rows.data+'</div>');
window.location.href = 'php_sample.php'
}else{
$('#loginResults').html('<;div style="text-align:center; color:red">'+response.rows.data+'</div>');
$('#username').val('');
$('#password').val('');
}
}
});
});
// Function for Logout button
$('#logoutBtn').click(function(){
$('#action').val('2');
$('#loginform').submit();
});
// Sample 2 - Function to load AJAX JSON data from PHP page
$('#loadData_btn').click(function(){
var jsonData;
$.ajax({
type: 'POST',
url: 'ajax/sample.php',
data: 'action=3',
dataType: 'json',
success: function(response) {
if (response.status=='success'){
$('#ajaxData').html(response.rows);
}else{
$('#ajaxData').html('<div style="text-align:center; color:red">'+response.rows+'</div>');
}
}
});
$('#loadData_btn').attr("disabled", true);
$('#hideData_btn').attr("disabled", false);
});
// Sample 2 - Function to hide AJAX JSON data
$('#hideData_btn').click(function(){
$('#ajaxData').html('');
$('#loadData_btn').attr("disabled", false);
$('#hideData_btn').attr("disabled", true);
});
// Sample 3 - Function that builds and loads jqGrid from sample.php page
$('#loadGrid_btn').click(function(){
$("#list2").jqGrid({
url: "ajax/sample.php",
datatype: "json",
mtype: "POST",
postData: { action: 4 },
jsonReader: {
repeatitems: false,
root: "rows",
},
colNames:['id','Company', 'Price', 'Change','perchange','Last Updated'],
colModel:[
{name:'companyid',index:'companyid', key:true, width:100,editable:true,editoptions:{size:10}, align:'center'},
{name:'company',index:'company', width:100, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;'}, editable:true},
{name:'price',index:'price', width:100,editable:true,editoptions:{size:10}, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
{name:'change',index:'change', width:100,editable:true,editoptions:{size:25}, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
{name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}, formatter:'integer', formatoptions:{suffix: " %"}, align:'center'},
{name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}, formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'm/d/Y'}, align:'center'},
],
rowNum: 4,
scrollerbar:true,
loadonce: true,
pager: '#pager2',
sortname: 'companyid',
sortorder: "asc",
height: "75",
shrinkToFit: true,
forceFit: true,
autowidth: true,
onSelectRow: function(id) {
var getID = $(this).jqGrid('getCell', id, 'companyid');
},
viewrecords: true,
caption:"PHP/MySQL/JSON Data to jqGrid Example"
});
// Function Dynamically resizes grid
$(window).bind('resize', function() {
var width = $('#gridData').width();
if (width == null || width < 1){
width = $('#gridData').attr('offsetWidth');
}
width = width - 2;
if (width > 0 &&
Math.abs(width - $("#list2").width()) > 5)
{
$("#list2").setGridWidth(width);
}
}).trigger('resize');
$('#loadGrid_btn').attr("disabled", true);
$('#hideGrid_btn').attr("disabled", false);
});
// Sample 3 - Function that unloads jqGrid
$('#hideGrid_btn').click(function(){
$("#list2").GridUnload();
$(window).unbind('resize');
$('#loadGrid_btn').attr("disabled", false);
$('#hideGrid_btn').attr("disabled", true);
});
// Function to Select code sample
function selectCode(){
var selID;
if ($('#jscode').css('display') == 'block'){
selID ='jscodetext';
}else{
selID ='phpcodetext';
}
deselect();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(selID));
range.select();
}else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(selID));
window.getSelection().addRange(range);
}
}
function deselect(){
if (document.selection) document.selection.empty();
else if (window.getSelection) window.getSelection().removeAllRanges();
}
// Function to display code sample
function displayJSCode() {
deselect();
$("#jscode").show();
$("#phpcode").hide();
$("#show_jscode_btn").attr("disabled", true);
$("#show_phpcode_btn").attr("disabled", false);
}
function displayPHPCode() {
deselect();
$("#jscode").hide();
$("#phpcode").show();
$("#show_jscode_btn").attr("disabled", false);
$("#show_phpcode_btn").attr("disabled", true);
}
<?PHP
session_start();
require_once('../conn/tek.php');
require_once('../functions/password.php');
require_once('../functions/functions.php');
ini_set('display_errors', '1');
error_reporting (E_ERROR);
$action=0;
// Get our action type from the post data
if ($_SERVER['REQUEST_METHOD']=='POST' && isset($_POST['action'])) $action= $_POST['action'];
$_POST=sanitize($_POST);
switch ($action) {
// Action = 0 We have no action
case 0:
$json_data = array('status'=>'failure','rows'=>'A server error occured');
break;
// Action = 1 Sample 1 Login button Pushed. Connect to MySQL DB and and check username and password
case 1:
$username=trim($_POST['username']);
$password=trim($_POST['password']);
$whereArr['username'] = $username;
$loggedIn=checkLogin($username,$password);
if($loggedIn){
$rows['data'] = 'Successfully Logged In User: '.$username;
$_SESSION['sample_auth'] = '29altwm3fsetkig';
$json_data = array('status'=>'success','rows'=>$rows);
}else {
$rows['data'] = 'Login Results: Wrong Username or Password';
$json_data = array('status'=>'failure','rows'=>$rows);
}
break;
// Action = 2 Logut Button Pushed.
case 2:
session_destroy();
header("location:../php_sample.php");
break;
// Action = 3 Sample 2 Button Pushed. Open raw HTML file and return JSON Object
case 3:
$html_data=file_get_contents('test.html');
if ($html_data){
$json_data = array('status'=>'success','rows'=>$html_data);
}else{
$json_data = array('status'=>'failure','rows'=>'A server error occured');
}
break;
// Action = 4 Sample 3 Button Pushed. Connect to MySQL DB and return Company table as JSON object
case 4:
$result = $db->query("SELECT * FROM company");
if ($result){
$rows = array();
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
$rows[] = $row;
}
$json_data = array('status'=>'success','rows'=>$rows);
}else{
$json_data = array('status'=>'failure','rows'=>'A server error occured');
};
break;
}
header('Content-Type: application/json');
echo json_encode($json_data);