Am trying to refresh data stored in a div every 10 seconds using jQuery.
My HTML code is:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
setInterval(function() {
$("#latestData").load("getLatestData.php #latestData");
}, 10000);
});
</script>
</head>
<body>
<div id = "latestData">
</div>
</body>
</html>
And the PHP code I am using (temporarily as I know this won't change due to the same "data"):
<?php
echo "test";
?>
However, it isn't even showing "test" on the html page.. could anyone suggest where I have gone wrong?
Many thanks
jQuery load method works in a different way. Try reading its documentation.
You don't have to specify destination element ID twice, remove the second one, like this:
$("#latestData").load("getLatestData.php");
Here's a way that will solve what you want to achieve, using the $.get method in jQuery:
$(document).ready(function () {
setInterval(function() {
$.get("getLatestData.php", function (result) {
$('#latestData').html(result);
});
}, 10000);
});
If you want to refresh message count just use this code:
$(document).ready(function () {
setInterval(function () {
$("#ID").load();
}, 1000);
});
Related
I am needing to automatically refresh my PHP page. I have a PHP page that is returning the current database time. However, this is requiring me to refresh the page in order for me to update.I need a better way of updating this PHP variable that does not include refreshing the page. Here's what I have so far:
$time = current_time($db);
echo '<p>$time</p>'
How can I accomplish this?
EDIT:
I've changed my code but it still won't auto-refresh:
index.php
<div id="#timeLocation">
<script>
var updateTime = function(){
$.ajax({url: "time.php", success: function(response){
$('#timeLocation').html(response);
}});
setInterval(updateTime, 1000);
}
updateTime();
</script>
</div>
time.php
<?php
require_once('db.php');
require_once('functions.php');
$time = current_time($db);
echo $time[0];
?>
index
<html>
<head>
<meta charset="UTF-8">
<title>Time</title>
</head>
<body>
<div id="time">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
setInterval(function(){
$.ajax({url: "time.php", success: function(response){
$('#time').html(response)
}});
}, 1000);
</script>
</body>
</html>
time.php
<?php
$time = date("g:i:s a");
echo $time;
this isnt the exact answer but it will help you along the way, watch when using ajax the way ive displayed though, sending a request everysecond could eventually slow down your server with enough time
With javascript you can run a function every tot. second:
setInterval(function,60000)
The function that you call should be an ajax request to a PHP page, that return the current hour. In my opinion you can implement all with only javascript, calling a function every second that update the hour field.
While ajax has been told in the comments, here is a pseudo implementation of it:
<div id="#timeLocation"></div>
<script>
const updateTime = function(){
$.ajax({url: "time.php", success: function(response){
$('#timeLocation').html(response);
}});
setInterval(updateTime, 1000);
}
updateTime();
</script>
This will update the timeLocation div with the content of time.php every second.
There are so many posts for this. I have gone through all of those, yet no luck. I'm struggling for so long (Onload event is not working ). I dint find any solution.
I have tried..
1.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
document.getElementById('pdfcontent').onload = function() {
alert("working");
}
</script>
</head>
<body >
<div id="loadingpdf">Loading pdf</div>
<iframe src="http://prodevapp.com/ArmyPublicRelation/pdf/royalthaiarmynews/news_20141103173559.pdf" id="pdfcontent" />
</body>
</html>
2.
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('object').hide();
$('#loadingpdf').show();
},
complete: function() {
$('#loadingpdf').hide();
$('object').show();
},
success: function() {
$('#loadingpdf').hide();
$('object').show();
}
});
var $container = $('object');
$container.load(function(){
alert("Image loaded.");});
3.
<body >
<script>
function my_code(){
alert(" working");
}
var iframe = document.createElement("iframe");
iframe.src = "http://prodevapp.com/ArmyPublicRelation/pdf/royalthaiarmynews/news_20141103173559.pdf";
document.body.appendChild(iframe);
iframe.onload=my_code;
</script>
</body>
4.
$("iframe").on('load', function() {
alert('Image Loaded');
}).each(function() {
if(this.complete) $(this).load();
}); //this worked one time but later it doesn't work it seems some cache problem.
How to fix this?
You might find help here
The selected answer on this thread, interestingly, suggests you cant track a pdf load.
Duplicate of getElementById() returns null even though the element exists and you are also missing the end tag for the <iframe>.
You are using an iframe, not Ajax, so watching for Ajax things won't work
You try to use the iframe variable before you assign a value to it.
After editing it - you try to use a function before it has been defined. While functions are hoisted, they aren't hoisted from later scripts.
After editing it again - it works.
Also a duplicate of getElementById() returns null even though the element exists
I have started learning jquery AJAX. I have run into a problem, and was wondering if you guys could help me. I am trying to pass a php variable back to jquery, but it displays as [object Object]. I will be posting my code below.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function() {
$("p").text($.get("return.php"));
});
});
</script>
</head>
<body>
<p>This is a test!</p>
<button>Click Here</button>
</body>
</html>
return.php:
<?php
$message = "Another test!";
echo $message;
?>
So what is it that I need to do to pass php variable $message into the paragraph using jquery ajax?
I know I could simply do if I changed index.html to index.php, but then if $message later changes, I have to reload the page. I am trying to learn how to make dynamic content without having to reload the page.
Thanks ahead of time for any help you provide! :-)
You'll have to wait until the data is returned before you can use it:
$(document).ready(function(){
$("button").click(function() {
$.get("return.php", function(data) {
$("p").text(data);
});
});
});
Add a callback to get.
$.get("return.php", function(data) {
$("p").text(data);
});
You can use callback function in .get function.
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
});
});
});
Here you can pass the datatype as well in which form you want the response from server.
Suppose you want to return anyother datatype(i.e. json)from server, just use datatype with it like this :
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
},"json");
});
});
For more detail,refer : http://api.jquery.com/jQuery.get/
My question is that how to pass query string variables on same page without refreshing the page in php? My code is given below:
<img src="a.jpg">
<?php
$a = $_GET['id'];
$b = $_GET['pid'];
?>
Please help me to resolve this issue
<html>
<head>
<title>Test</title>
<meta name="" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image_id").click(function(){
var dataString = 'a=10&b=20';
$.ajax({
type:'POST',
url:'foo.php',
data:dataString,
success:function(data) {
if(data=="Something") {
// Do Something
} else {
// Do Something
}
}
});
});
});
</script>
</head>
<body>
<img id="image_id" src="images/bg.jpg" />
</body>
</html>
Then in the 'foo.php' page do this
if(isset($_POST['a'])) {
// DO SOMETHING
}
Remember the things that you want to send to the 'data' of
success:function(data)
must be echoed out in the foo.php page
You can't.
PHP requires execution on the server and so you'd have to either use AJAX and update your page accordingly, or just refresh your page.
You can by sending an AJAX request to the server. Ajax is a way to send asynchronous request via Javascript. Notice that jQuery has a good library about it.
Use jquery to resolve this. By using the $.ajax in jquery you can do the stuff you need without page refresh.
I'm a bit new to Ajax.
I've got a Ajax file which includes a php file and refreshes it every X seconds. That code for AJAX.PHP is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#dataDisplay').fadeOut("slow").load('rand.php').fadeIn("slow");
}
});
</script>
<div id="dataDisplay"></div>
This code is working fine.
Bbut the html of AJAX.PHP page shows as it is code, while I want the output html of rand.php not javascript code given above. How can i do it?
suppost "rand.php" html out put (source) is: < html >< body >this is body <\ body ><\ html >.
I want this html to be shown on the html source of AJAX.PHP.
How can i do it?
If I mess any thing let me know, I'll try to make it more clear.
You need to run it. Not insert only as file.
$.post("rand.php", { },
function(data) { $('#dataDisplay').html(data) });
updated:
SANAjax = function(){
$.post("rand.php", { },
function(data) { $('#dataDisplay').fadeOut("slow").html(data).fadeIn("slow"); });
}
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_rand').load('rand.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_rand"> </div>
Don't forget to add the jquery library