I create a simple REST service with Slim PHP framework. You can retrive the Mayan calendar in JSON format:
Example: https://snap.apigee.com/HUN6NV or
http://almanac.alwaysdata.net/openalmanac/getMayanCalendar/
Now I would like to call it with latest JQuery Framework.
I write a very simple HTML helper:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example!</title>
<link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script2.js"></script>
</head>
<body> etc etc....
I use http://code.jquery.com/jquery-1.7.2.js in a very simple HTML example that call this function:
$(document).ready(function(){
$.getJSON('http://almanac.alwaysdata.net/openalmanac/getMayanCalendar/',
function(data) {
alert('Fetched ' + data.length + ' items!');
});
});
But doesn't works! I am very sad and I don't understand what's the problem!!
Can you help me...with a very simple code working??
Thank you for you help!!
The error I see is just in using the .lenght with the 'data' variable, which is not appropriate, the rest is "by the book". See this one working:
$(document).ready(function()
{
$.getJSON('http://192.168.41.94/Admin/Open/JSON/data.php', '',
function(data)
{
// NOPE: alert('Fetched ' + data.length + ' items!');
$.each(data, function(key, val) { alert(key + ' is ' + val); });
}
);
});
Related
I have an FTP setup on zymic.com. I have a jsonfile names testJson.json and a php file named index.php (obviously the default). I have some temperature data in the testJson.json file coming from a sensor. I want to display that onto the website (index.php) using highcharts. I have both testJson.json and index.php file on the same directory.
Although I believe that I am doing right but I am not getting the results. Below is my code of index.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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('testJson.json', function(data) {
// Create temperature chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Temperature graph in °C'
},
series : [{
name : 'Temperature',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="Highstock-1.3.2/js/highstock.js"></script>
<script src="Highstock-1.3.2/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I think you need to put your script after you load the hightstock.js and exporting.js
I'm trying to load a page when a div from my content is loaded , but isn't working. Can you help me and tell me where is my error or why isn't working ? Thanks !
Here's the code
index.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>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li>index</li>
<li>contact</li>
</ul>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
</body>
</html>
hello.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>Untitled Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
And javascript
$(document).ready(function() {
$('#content').load('hello.php');
});
Use this in head section
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
Change your html like this:
<!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>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
</head>
<body>
<ul id="nav">
<li>index</li>
<li>contact</li>
</ul>
<div id="content"></div>
</body>
</html>
And your Jquery like th is:
$("#content").load("/hello.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
This should work, and if not it will let you know what happened.
You have to make sure this script tag
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
is executed before
$(document).ready(function() {
$('#content').load('hello.php');
});
With jquery, I'm attempting to pull information from a .php file and run it in another html page.
To try this out I attempted to use this example:
http://www.tutorialspoint.com/jquery/ajax-jquery-get.htm
The .php file would include:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
================ The html page code includes:
<!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" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.get(
"/testing.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
The jquery library has successfully loaded, as per the "test result".
For some reason, the contents of the "testing.php" file are not being pulled... almost as though it's linked incorrectly. Is the file linked improperly? (both the .php and .html files are in the same folder)
I even tried doing something simple, like an echo statement in the php, but still nothing was pulled from the file and published to the html page.
There might be a simple fix that you see. I appreciate your time and energy in helping me resolve this issue. Thanks in advance!
You could simply do this: $('#stage').load('testing.php?name=Zara');
The files are hosted from a folder on my computer
This gives you two problems:
Browsers put pretty strict restrictions on what webpages loaded from the filesystem can do, loading other files via XMLHttpRequest is forbidden
PHP is a server side technology, it needs a server to work (in this context)
Host your site on a webserver. It can be one you run locally, then you can access the site via http://localhost/etc
Use jquery.ajax instead. Here is your HTML 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" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax({
url: "testing.php",
data: { name: "Zara" },
success: function(data) {
$('#stage').html(data);
}
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
I would rather do the following...
<?php
if( $_GET["name"] )
{
$name = htmlspecialchars(trim($_GET['name']));
echo "Welcome ". $name;
}
?>
and
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.load( "testing.php?name=Zara, function(data) {
$('#stage').html(data);
}
);
});
});
</script>
Hi im fairly new to using JSON and have been trying to pass an array from PHP to Javascript using JSON. I have been reading up a bit on it but am having an error on the eval function in javascripts side of the code. If anyone couid please help id really appreciate it thanks in advance!
PHP (lang.en.php)
<?php
$lang['TITLE'] = 'My Title';
$lang['MESSAGE'] = 'My Message';
?>
HTML/Javascript (index.php)
<?php
include "lang/lang.en.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' xml:lang='en' lang='en'>
<head>
<title>My Page</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language='JavaScript' type='text/javascript'>
$(function(){
//Get the JSON string and pass it to the cb function
$.get("index.php", function(data){cb(data)});
})
function cb(data){
//converts the JSON string to a JavaScript object
eval("lang="+data); //This is where the error occurs
lang = dataToObj;
alert(lang.TITLE);
}
</script>
</head>
<body>
<? json_encode($lang); ?>
</body>
</html>
for example when you get a new badge on stack overflow, you get the notifaction message on the top, telling you have a new badge, it deos that on the backgroung!! is thier a toturial or article that can help me with this kind eventing updates!!
You should look into notifications such as jGrowl. The site has some samples to help you get going :)
EDIT
How will you be storing notifications? Within a DB? I will get back to you later - My lunch break is over for now :(
EDIT 2
Here is a basic example of how to get it working with php by declaring an array of messages which you could easily populate from a database. You could make this more advanced by using the other options offered by jGrowl such as stickies etc by using a multidimentional array to store such options and outputting the correct javascript.
<?php
$messages = array("This is a message", "And this is another", "etc...");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jGrowl and PHP Test</title>
<link type="text/css" rel="stylesheet" href="jquery.jgrowl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
<?php foreach ($messages as $message) { ?>
$.jGrowl("<?php echo $message; ?>", { life: 3000 });
<?php } ?>
});
</script>
</head>
<body>
</body>