I have a problem with animated number effect when grabbing data from json.
Animated number effect works correctly if it loads from html, but if I load it from json it doesn't work.
html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.animateNumbers.js" type="text/javascript"></script>
</head>
<body>
Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)
<div id="display_time"></div>
<script>
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
}
});
});
</script>
</body>
</html>
data_time.php code:
<?php
if(isset($_POST['get_time']))
{
$time[] = 'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
echo json_encode(array('time' => $time ));
}
;?>
preview: click
I think the problem is with callback. Try this,
<script>
function runCallback(){
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
}
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
runCallback();
}
});
});
</script>
Use $time instead of $time[]. There's no need for it to be an array.
Take out dataType:'json'. You are not SENDING json.
Related
Page1.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<input type="hidden" value="valuetest" id="idinput">
<div onclick="myfunction()" style="height: 30px;width: 30px;background: gray;">
<div id="receive"></div>
</div>
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: function(data) {
$('#receive').html(data);
}
});
function myfunction2(){
}
}
</script>
</body>
</html>
Page2.php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "return";
?>
This code is working perfectly! Page1 sends the value valuetest to page2 without the need to refresh the page. The echo of page2 returns the value return to page1 inserting this into div="receive". So far so good. I want instead of having a div="receive" receive a value, it triggers the function myfunction2 or any other method that allows me to style the page1 (css).
In short: the return of page2 should only serve to call a method of page1.
You can just pass your function as a success callback.
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: myfunction2
});
function myfunction2(){
}
}
</script>
And if you want to return a string that trigger a function, you can return the name of the function and pass it to the eval() function which evaluate a string.
// In your php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "myfunction2()";
// In your js
success: function(data) {
eval(data); // Call the function returned by your PHP
}
I have simple code with html, JavaScript and PHP. I am trying to pass a variable from HTML to PHP through ajax.
A text box appears on screen with button, user inputs in the text field and clicks the button. The field text should appear before the field. But in my case, nothing happens when clicking the button. I am posting my code below. These are the three files I have made:
index.html
<!doctype html>
<html lang="en">
<body>
<input id="name" type="text" /> <input id="button" type="button" value="Load" />
<div id="content"></div>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>
ajax.js
$('#button').click(function() {
document.write("this is javascript");
var name = $('#name').val();
$.ajax({
url: 'page.php',
data: name,
success: function(data) {
$('#content').html(data);
}
});
});
page.php
<?php
if(isset($_GET['name'])) {
echo "lllllllllllllllll";
echo $name=$_GET['name'];
}
?>
Add CDN as mentioned above. Also make sure you load the jquery CDN or jquery.lib.js before including external js file, ajax.js in index.html.
There is an issue in your $.ajax code:
$.ajax({
url: 'page.php',
data: name,
success: function(data) {
$('#content').html(data);
}
});
change this to:
$.ajax(
{
type:'GET',
url: 'page.php',
data:"name=test"
},
success: function(data) {
$('#content').html(data);
}
);
only add before axaj.js
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
add this in your javascript ajax: type : 'GET'.
In your php code :
$name=$_GET['name'];
echo $name;
I tried all the stackoverflow posts about this, I spend two days and still no success 😔, I am trying to pass a JavaScript variable to a PHP variable, I tried this for example and still not succeed, it does not print noting on the screen, here is a full code:
here cc.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
});
});
</script>
</body>
</html>
and here cc.php:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What should I do?
You don't do anything with the result of the AJAX call. Add a callback function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
}).done(function (result) {
alert(result); // <--- do something with the result
});
});
</script>
</body>
</html>
And your PHP code remains unchanged:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What you do in that callback function is up to you. You can alert() the value, log it to the console, write it somewhere on the page, etc.
If you want to print it on the screen you should use success: function(data)$('#result').html(data)} here is code example:
$(document).ready(function() {
$('#sub').click(function() {
var $my_variable = "something";
$.ajax({
url: 'cc.php',
type: 'POST',
data: { x: $my_variable },
success: function(data) {
$('#result').html(data)
}
});
});
});
You can try $.post too
$.post( "cc.php", { x: $my_variable} );
I viewed so many post aboit this but still cant get my code to work.
I want to get a php array of my checked checkboxes values.
heres my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<?php
echo'<form method="post">
<input type="checkbox" name="cim" value="valami">';
echo'<input type="checkbox" name="cim" value="valami2">';
echo'<input type="checkbox" name="cim" value="valami3">';
echo'<input type="checkbox" name="cim" value="valami4">
<input type="submit" value="Felvisz" name="feladat"></form>';
if (isset($_POST['feladat'])) {
?>
<script type="text/javascript">
var checkedValue = $('.messageCheckbox:checked').val();
var myJSON = JSON.stringify(checkedValue);
$.ajax({
type: "POST",
url: "proba.php",
data: { tomb : myJSON },
success: function(){
alert("OK");
}
});
</script>
<?php
var_dump($_POST);
$array = json_decode(stripslashes($_POST['tomb']));
foreach($array as $arr){
echo $arr;
}
}
?>
</body>
</html>
Massages i got:
Notice: Undefined index: tomb in D:\programok\xamp\htdocs\SZAKDOGA\Dropbox\proba.php on line 48
Warning: Invalid argument supplied for foreach() in D:\programok\xamp\htdocs\SZAKDOGA\Dropbox\proba.php on line 49
Please someone can help me to solve this?
To get an array , you must convert the name to accept multiple so change the input's :
name="cim"
to
name="cim[]"
Also your jquery ajax function should be this :
<script type="text/javascript">
$(function(){
$("form").on("submit",function(e){
e.preventDefault();
var checkedValue = $(this).serialize();
$.ajax({
type: "POST",
url: "proba.php",
data: checkedValue,
success: function(){
alert("OK");
}
});//end ajax
});//end form submit
});
</script>
in php the cim will be the array example
var_dump($_POST["cim"]);
hope it helps
currently, you are testing for checked boxes with class messageChecked. assign your checkboxes that class, give your form an id, then test for checked condition on each checkbox,
$('#yourForm').each(function() {
if($('.messageChecked').is(':checked')) {
checkedValue.push($('.messageChecked:checked').val());
}
}
now send it to your php script via ajax,
$.ajax({
type: "POST",
url: "proba.php",
data: { tomb : (checkedValue) },
success: function(){
alert("OK");
}
});
if done like this you can remove json_decode and stripslashes from your $_POST statement
So I am able to get my php value into javascript variable but I don't think my script.js is finding it. There of course are alot of files missing for the sake of keeping this question clean but my problem is that script.js get schoolId as undefined instead of the actual value but when I console.log schoolId i get a value of "1"(first page has id 1 so that works).
Header.php :
<?php
//gets current page id
$schoolOfficialId = $specificSchool[0]["id"];
?>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
</body>
script.js: ajax call here NOTE: in the ajax i know the data is having trouble finding schoolId from the header.php to send to php file.
// execute an ajax query to push id of page to load_more.php
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
console.log("working");
}
});
my load_more.php:
if (isset($_POST['schoolId'])) {
echo "yes";
}else {
echo "nope";
}//keeps echoing nope because the schoolId is not received
The problem is that you have the script running before the declaration.
<script type="text/javascript" src="js/script.js"></script> is in head, but var schoolId = $('#schoolOfficialId').val(); is at the bottom of the page.
Include the script after declaring schoolId.
<head>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
P.S. despite other answers, data: {schoolId:schoolId}, is perfectly fine unless the keyname conflicts with a reserved word.
Load ajax code after defining var schoolId and also check source code whether php printing value for schoolId correctly or not and also do not forget to use $(document).ready()
<script type="text/javascript">
$(document).ready(function(){
var schoolId = $('#schoolOfficialId').val();
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
alert(data);
}
});
})
</script>
PHP:
if (isset($_POST['schoolId'])) {
echo $_POST['schoolId'];
}else {
echo "nope";
}
By running the following i can see yes in alert ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
var schoolId = $("#schoolOfficialId").val();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {schoolId: schoolId},
success: function (data) {
alert(data);
}
});
});
</script>
</body>
</html>
Ajax file (ajax.php) :
if (isset($_POST['schoolId'])) {
echo "yes";
} else {
echo "nope";
}