here i am learning jsonp and i have a little problems with a simple code ,
what i am trying to do is a simple jsonp callback but it seems to not working
here is the code:
[index.php]
<html>
<head>
<script type="text/javascript" id="myJSONPCall" src="http://mySubDomain.comoj.com/jsoncall.php?jsonCallback=myCallback"></script>
<script type="text/javascript">
function myCallback(obj) {
alert(obj.text);
}
</script>
</head>
<body>
</body>
</html>
[jsoncall.php]
<?php
$myObject = array(
"text" => "Hello, I am data from the remote server.",
"created_at" => "Thu May 07 21:36:12 +0000 2009"
);
$myJSONObject = json_encode($myObject);
$myJSONCallback = filter_var($_REQUEST['jsonCallback'], FILTER_SANITIZE_STRING);
print "$myJSONCallback($myJSONObject)"
?>
right away , nothing happen.
what exactly goes wrong here?
You need to define your function before calling the url that loads the response
just switch the order your your scripts.
<html>
<head>
<script type="text/javascript">
function myCallback(obj) {
alert(obj.text);
}
</script>
<script type="text/javascript" id="myJSONPCall" src="http://mySubDomain.comoj.com/jsoncall.php?jsonCallback=myCallback"></script>
</head>
<body>
</body>
</html>
Related
I thought this would be simple enough, but I can't get it to work.
I have two files. main.html and data.php
The two files are in the same folder on a server.
I want to get a string from the PHP file and use it in jQuery. In the example below, I want the browser to create a pop-up, with the text "xxxx". I get no pop-up.
data.php
<?php
$var = "xxxx";
echo json_encode($var);
?>
main.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
var testString = <?php $var = json_decode(file_get_contents('data.php'), true); echo $var; ?>;
alert(testString);
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
Any takers?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$.ajax({
url:"data.php",
success:function(result){
alert(result);
}
});
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
The first problem with this is that on many servers .html is not parsed for PHP
The second problem is that the file_get_contents will actually display the full contents of your .php file (including the <?php) which is likely not what you're looking for.
Instead I would use an AJAX request such as http://api.jquery.com/jquery.get/
For this you will need to include jQuery in your <head>
You should get the php data before html initiates, like below
<?php
$var = json_decode(file_get_contents('data.php'), true);
?>
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
var testString = <?php echo $var; ?>;
alert(testString);
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I'm trying to pass a simple variable from my jQuery to my php and then echo it on my HTML. It doesn't seem to work though.
I can't get my variable $result to show up on my page. Any thoughts? The Ajax POST seems to be working fine. The problem seems to be communication between php and HTML.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
<?php echo $result; ?>
</body>
</html>
front.js:
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
});
});
back.php:
<?php $result = $_POST['name']; ?>
Try this
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
</body>
</html>
front.js:
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(result) {
$('body').html(result);
});
});
back.php:
<?php echo $_POST['name']; ?>
Change this
<body>
<div id="show-data"></div>
</body>
And
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
$('#show-data').html(data);
});
});
And
<?php echo $result = $_POST['name']; ?>
Change Your PHP Code :
<?php echo $_POST['name']; ?>
And Also Your HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
$('body').append(data)});
});
</script>
</html>
$result in back.php and $result in index.html aren't related. Setting it in back.php has no effect on index.html. If you echo something in back.php however, that output will be passed to the empty callback function you have in your $.post() call. You can handle the data there and use javascript to insert it into your page.
Just add the following line to your code: $('body').html(data);
Like your question we have three different files one is index.html
1) index.html
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
<?php echo $result; ?>
</body>
</html>
2) front.js
$(document).load(function(){
$.ajax({
url: '/back.php',
type: 'POST',
data: 'name=Bob',
async: false,
success: function(data) {
$('body').html(data);
},
cache: false
});
});
3) back.php
<?php echo $result = $_POST['name']; ?>
Now use this, your files will work out. Please let me know if you have any queries.
Puh, lot of mistakes. First, your index.html contains PHP - Code which won't be executed because this is not a PHP - Skript (ending with php).
Second you are saving the value of your request to back.php in a variable, which won't be existing after the request is finished. You can either:
rename index.html to index.php, exchange your statement to
<?php echo $_POST['name']; ?>
and change your request to
$.get('/index.php', {name: "Bob"}, function(data) {
});
which would cause a continously reloading of the site,
or store your result in a $_SESSION (see PHP Session Handling), and retrieve that in your index.php (you got to rename the file).
I am new in jquery. I was trying to use Jcombo plugin but that one wasn't working for me. Here what I did :
<!doctype html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.prodiven.com/jcombo/jquery.jCombo.min.js"></script>
<script type="text/javascript">
$(function() {
/* simple combos */
$("#state1").jCombo("getStates.php");
});
</script>
</head>
<body>
<select id="state1"></select>
</body>
</html>
getStates.php file output was like this:
{"1":"Bangladesh","2":"Arabic"}
Any idea why I can't see drop down selection. Thanks
I got the solution .. It was problem with the plugin. I just noticed that in jCombo.min.js script dataType was "jsonp" I changed it to :
dataType:"json"
now it's working...
I'm new to backboneJS so i have a problem sync the data from PHP server with backbone that i dont even get the json data from the php server to backbone model!Help me
Here is my php code
$data = array('1'=>array('id'=> 1, 'description'=>'Pick up milk', 'status'=> 'incomplete' ));
echo json_encode($data);
and the backbone js code
<html>
<head>
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({});
var todoItem = new TodoItem();
todoItem.url = '/backboneJS/todo.php';
console.log(todoItem.fetch());
</script>
<body>
</body>
</html>
I cant get the json data from the php to the backbone.What wrong with my code ?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">
var TodoModel = Backbone.Model.extend({
urlRoot: '/backboneJS/todo.php',
initialize: function(){
// Place init message or else
}
});
var todoItem = new TodoModel();
todoItem.fetch({
success: function(todoResult){
console.log(todoResult);
console.log(todoItem.get(1));
}
});
</script>
</html>
Sticking to design pattern also, if you call your todoItem outside of nested function its likely to be executed before the actual fetch() is performed. Tested locally.
index.php
<html>
<head>
<script language="JavaScript" src="lol.js.php"></script>
</head>
<?php
//grab product id's who need to be showed
$pids = '1,2,3';
?>
<body onload="update_timers();">
lol.js.php
<script type="text/javascript">
function update_timers()
{
alert('hi');
}
</script>
I'm not sure what I'm missing, but this isn't poping up the alert window. Why is that?
Remove
<script type="text/javascript">
</script>
from the JS file.
The JavaScript error console in your browser should show these tags as syntax errors.
Also, as #Jared points out, you should send a content type header:
<?php header("Content-type: text/javascript"); ?>