Several different questions on this topic, but none of the answers helped, so thought I'd try and see if anyone can figure this out..
So I have a simple grid, here is the HTML/PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo PROPERTY_TITLE; ?></title>
<!-- LOAD KENDO CSS -->
<link rel="stylesheet" type="text/css" href="css/kendo.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.common.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.default.min.css"/>
<!-- -------------- -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>css/style.css" />
<script src="js/jquery.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- LOAD KENDO -->
<script type="text/javascript" src="js/kendo.all.min.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- ---------- -->
</head>
<body class="bg">
<div class="grid-box7 box2close min_height_700" style="display: none;">
<script>
// Function to build the grid
function generateRawDataGrid() {
var from = $("#fromDate").val();
var to = $("#toDate").val();
<? if ( isset($_GET['source']) && is_numeric($_GET['source']) ) { ?>
var source = <? echo trim($_GET['source']); ?>;
<? } else { ?>
var source = '';
<? } ?>
$(".li_current_report").html("Raw Statistical Data");
$("#rawDataGrid").kendoGrid({
columns: [
{ title: "Action",
field: "comment"
}
],
dataSource: {
transport: {
read: {
url: "data/get_stats.php?from=" + from + "&to=" + to + "&source=" + source + "&rt=3"
}
},
schema: {
data: "data"
},
type: "json"
},
pageable: {
refresh: true,
pageSize: 15,
pageSizes: [
15,30,60,100
]
},
sortable: true,
filterable: true,
scrollable: false,
selectable: "row",
reorderable: true
}); // END: Report Grid
} // END: Function generateGrid()
</script>
<div id="rawDataGrid" >
<!-- Grid is here -->
</div>
</div>
</body>
</html>
Here is the datasource code:
// Build SQL statement
$SQL_STATS = "
SELECT comment
FROM stats_tracking
WHERE date_entered between '" . $FROM . "' AND '" . $TO . "' AND
action_detail1 NOT In(" . $excludeIPs . ") AND active = 1";
if ( is_numeric($_GET['source']) && trim($_GET['source']) != "" ){
$SQL_STATS .= "
AND source = '" . $_GET['source'] . "'";
}
$SQL_STATS .= "
ORDER BY date_entered DESC
";
// Get the data
$statResult = mysql_query($SQL_STATS); // Run the actual query.
$dataOut = array(); // Create empty array for temp data to store in main output array
while ( $stat = mysql_fetch_object($statResult) ) {
$dataOut[] = $stat;
}
header("Content-type: application/json");
echo "{\"data\":" . json_encode($dataOut). "}";
The output seems fine - and LINTs fine as well, here's a piece of it:
{"data":[{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"}]}
But the grid isn't rendering. I've used several JSON validators. And the browser is seeing this output as APPLICATION/JSON.
Any ideas?
Thanks to all in advance!
I don't see where you are calling this method. generateRawDataGrid()
Perhaps you need to create a document.ready() function and call it from there.
$(document).ready(function () {
generateRawDataGrid();
});
Related
I am pulling data from a mySql database using php to plot a graph using flot. The query works fine but no graph is being displayed when I run the code. A blank space is coming up where the graph should be. Here is what I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Graph</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Graph</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<?php
$mysqli=new mysqli('localhost','root',"",'simpledb');
$sql="select name, age from `people` where age=23";
$results = $mysqli->query($sql);
if ($results)
{
while ($row=$results->fetch_assoc())
{
$dataset1[] = array($row['name'],$row['age']);
}
}
else
{
echo "Error";
}
?>
<script type="text/javascript">
var dataset1 = <?php echo json_encode($dataset1); ?>;
$(function ()
{
$.plot($("#placeholder"), [
{
data: dataset1,
bars: {show: true}
}
]);
});
</script>
</body>
</html>
It looks like your x values are strings, yet you haven't included the categories plugin.
Thanks everyone. I got it to work. I'm not sure what the problem was but it worked after I changed the javascript part to :
$(function ()
{
$.plot("#placeholder", [ dataset1 ], {
series: {
bars: {
show:true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength:0
}
});
});
I am new to jQuery. I am trying jQuery autocomplete remote data source here is my code:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<meta charset="utf-8">
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
var cache = {},
lastXhr;
$( "#birds" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] = data;
if ( xhr === lastXhr ) {
response( data );
}
});
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" value="" />
</div>
</div><!-- End demo -->
</body>
</html>
FILE: search.php
<?php
require_once("includes/connection.php");
$q = strtolower($_GET["birds"]);
echo $q;
$return = array();
$query = "SELECT title
FROM `project`
WHERE `title` LIKE CONVERT( _utf8 '%$q%'
USING latin1 )";
$resultset=mysql_query($query,$connection);
$json = '[';
$first = true;
while ($row = mysql_fetch_assoc($resultset)) {
if (!$first) {
$json .= ',';
} else {
$first = false;
}
$json .= '{"value":"'.$row['title'].'"}';
}
$json .= ']';
echo $json;
?>
getting the following error:
Notice:
Undefined
index: birds in /var/www/html/workbench/sudeepc/project/search.php
on line 4
[
{"value":"chandrayaan"},
{"value":"Project Management System"},
{"value":"shoping cart"},
{"value":"hospital management system"}
]
fire bug show the following error while searching on that text box and there is no suggestion for search.
How to resolve this problem?
As per the comments, it appears that the first error was caused by looking for the wrong $_GET variable. Props to you for spotting that with Firebug and correcting it appropriately.
The reason that it is not filling in a value currently is because of the extra string echoed in front of the JSON. Remove the line echo $q; and it should work.
I don't know if this is correct - I just followed the example on the jeditable website, but I can't seem to be able to get this simple code working. I just want to save the data into the database and still show the changes on the page.
Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeditable WYSIWYG Custom Input Demo</title>
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="/mint/?js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js""
type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.css" type="text/css" media="screen" charset="utf-8">
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
/* Fix FireBug */
/*
if ($.browser.mozilla) {
window.loadFirebugConsole();
};
*/
/* Handle links inside editable area. */
$('.editable > a').bind('click', function() {
$(this).parent().trigger('click');
return false;
});
$('#wysiwyg_2').editable('test-jedit.php',
{
id : 1,
content : 'wysiwyg_2',
indicator : '<img src="../img/indicator.gif">',
type : 'POST',
type : 'wysiwyg',
width : 640,
height : 'auto',
onblur : 'ignore',
submit : 'OK',
cancel : 'Cancel',
wysiwyg : { controls : { separator04 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true }
}
}
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Jeditable</h1><br />
<small>Edit in place plugin for jQuery.</small>
<ul id="nav">
<li id="first">weblog</li>
<li>projects</li>
</ul>
</p>
</div>
<div id="content">
<div class="entry">
<p>You might also want to check other custom inputs demo.
<h2>Extra settings</h2>
<div style="width: 640px" class="editable" id="wysiwyg_2"><img
src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>
Here's the PHP code:
<?php
$con = mysql_connect("localhost","username","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$id = $_POST['id'];
$content = $_POST['content'];
mysql_query("INSERT INTO editable (id, content)
VALUES ('$id', '$content')");
echo $content;
mysql_close($con);
?>
The first thing to say is please read the php.net page about SQL Injection
To your problem ...
I think I might have spotted a problem ... your JavaScript is being executed before the DOM is ready ... enclose your javascript code (all of it) within the following block :
$(document).ready(function() {
// your code here
});
This means that the code within the function will only be executed once the whole page has been loaded ... calling functions on DOM elements that are not loaded will cause you issues ... further reading on ready() ...
Looking at the code I can see no obvious issue - however there are few basic things you can do to debug this issue ... first off check (using something like firebug) that the AJAX request is actually being sent ...
Secondly you can check the the PHP MySQL code is working correctly ...
$result = mysql_query($query); // execute your query
// Check result
// This shows the actual query sent to MySQL, and the error. Useful for debugging.
if (!$result) {
$message = 'Invalid query: ' . mysql_error() . "\n";
$message .= 'Whole query: ' . $query;
die($message);
}
// if you get to here the query worked fine ...
Update
I took your code and created a jsfiddle
There are a few minor changes needed to get it working :
<div style="width: 640px" class="editable" id="wysiwyg_2">
<img src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd
<span style="font-style: italic;"> gfd</span>
<big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
should be :
<div style="width: 640px" class="editable" id="wysiwyg_2"><span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><br>sdfsdf<br>sdfsdf<br><br></span></div>
I have removed the strange characters !
Update 2
When the OK button is pressed the PHP is called - it POSTs the following data :
1:wysiwyg_2
value:<span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span>
So in your PHP you need to change $_POST['content'] to $_POST['value']
I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:
Saving changes in SlickGrid
So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:
Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:
<?php
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');
$data = '';
$i = 0;
$query = "
SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data .= '
data['.$i.'] = {
id: "'.$row['id'].'",
title: "'.$row['title'].'",
duration: "'.$row['duration'].'",
percentComplete: "'.$row['percentComplete'].'",
start: "'.$row['start'].'",
finish: "'.$row['finish'].'",
effortDriven: "'.$row['effortDriven'].'"
};
';
$i++;
echo $data;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<?php // include("includes/cms_head_scripts.php"); ?>
<link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" src="js/jquery.json.js"></script>
</head>
<body>
<div id="content_cont">
<div id="main">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
pricing
</div><!-- #main -->
</div><!-- #content_cont -->
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title", editor:TextCellEditor},
{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
{id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
{id:"start", name:"Start", field:"start", editor:TextCellEditor},
{id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true
};
$(function() {
<?php echo $data ?>
grid = new Slick.Grid($("#myGrid"), data, columns, options);
})
</script>
<form method="POST" action="save_price.php">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
</body>
</html>
I was trying to create a notifications system for a website with the following code :
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
And the notifications.php :
$userid = $_SESSION[username];
$notifications = array();
$sql = "SELECT appreciation FROM ms_notifications WHERE email = '$userid' AND new = '1'";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
while ($r = mysql_fetch_object($res)) {
$notifications[] = $r->appreciation;
}
$nb_result = mysql_num_rows($res);
}
$sql = "UPDATE ms_notifications SET new = '0' WHERE email = '$userid'";
mysql_query($sql) or die(mysql_error());
echo $nb_result;
Problem is that, as I'm new to jquery/Js, I don't know how to put the result inside of a div. For now it stays on the top of the page, above everything.
I tried that, inside the data function but not working... :
$('#test_app').html(data);
I guess it's a very stupid question but help would be really appreciated ! Thank you very much.
UPDATE : Here the HTML Code
<?php
session_start();
include ('connection/database.php');
include ('login_script.php');
include ('notifications.php');
if($logged_in){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Home</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ms.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/font_i/specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<!-- FONT SCRIPT-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 505; // Background image height
var headerHeight = 59; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#main_logo').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed)
</script>
<!-- NOTIFICATIONS_SCRIPT !!!!!! -->
<script type="text/javascript" charset="utf-8">
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
</script>
<style>
body{
font-family:SommetRoundedLight;
}
</style>
</head>
<body>
<div id="container">
<div id="header_contain">
<div id="test_app">
</div>
</div>
</div>
</body>
</html>
<?php }
else{
echo '<script language="javascript" type="text/javascript">
<!--
window.location.replace("connexion.php");
-->
</script>';
} ?>
Thanks again
Use .append() instead of .html()
Instead of
$('#test_app').html(data);
just use:
$('#test_app').html('<div>' + data + '</div>');
Seems to simple to be it. Am I missing something?