I have 2 scripts that are working fine.
One updates a db by posting an artist title and album via url.
The other pulls the last row and displays it on a joomla site.
Id like to have this update in the browser without a full page refresh. Everytime a new song loads or the table is updated, it should show the latest table on the page. Alternatively, I'd be fine just having it check every minute or so for a new song.
I'm totally new to this so any direction to how I can learn how to do this would be appreciated.
There are tons of how tos with drop downs or querys, I just want to update this automatically with no user interaction. Thanks...
You need to use AJAX technique and periodical update your page, here described the easiest and simpliest way to do things as you wish with Prototype javascript library.
Here's a working example (works in Chrome) using jQuery. The #data div will be updated with the contents of /pull_last_row_from_db.php every 10 seconds.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
<script type="text/javascript">
$(document).ready(
function() {
setInterval('update_data()', 10000); // Called every 10 seconds
}
);
function update_data() {
// Do AJAX call
var params = { foo: 'bar', example: 2 };
$.get('/pull_last_row_from_db.php', params,
function(response) {
$('#data').html(response);
}
);
}
</script>
</body>
</html>
Related
Jquery Mobile auto-refresh every X second
Porting to JQM and having trouble getting page that automatically refreshes content every X seconds to display properly. Have read dozens of related threads but not finding a clear solution with code example. The purpose of this page is to display arrival and departure information on something similar to what you might see in an airport.
Previous approach was as follows with javascript in the header. PHP content (a styled table) would load to named DIV after one second then refresh every ten seconds automatically and worked great:
Controlling Page:
<head>....
<script type="text/javascript">
function Refresh_My_DynamicContent(){
$("#id_My_DynamicContent").load("NewContent.php");
setTimeout(function() { Refresh_My_DynamicContent(); },10000);
}
</script>
<script type="text/javascript">
setTimeout(function() { Refresh_My_DynamicContent(); },1000);
</script>
</head>
<body>
<div data-role="page">
<div id=” id_My_DynamicContent”></div>
</div>
When I use this same approach with JQM the content displays but without JQM, pop-ups all expanded, etc. Could anyone please help direct me to the proper approach with JQM to have a “hands-off” display that refreshes on its own with code example?
I think your code should be like
<script type="text/javascript">
$(function(){
setTimeout(function() {
$("#id_My_DynamicContent").load("NewContent.php",{'reload':true});
},1000);
});
</script>
also check that after the first call is working
I am not sure if jquery moble also relaces the all head if that is the case you should also
echo the js from the PHP
<?php
echo '<script type="text/javascript">
$(function(){
setTimeout(function() {
$("#id_My_DynamicContent").load("NewContent.php",{'reload':true});
},1000);
});
</script>';
?>
This would be a common question but what I'm looking for is:
My PHP Script does:
Read a remote page using cURL
Update every 20 Seconds
I want to auto update a div(Not whole page), (Which is populated using cURL) every 20 seconds.
I've read many solutions but that doesn't show updated data in source code (Crawl-able form).
Pls suggest me a solution how to update a div with cURL updated data, and that should populate/include in my page's source code.
Let me know if anything is unclear. sorry for bad english :(
Copy your cURL PHP codes into a new file named "reloader.php", in your main page, also put the source codes which reads the data(cURL stuff) in a div "id = to_be_reloaded", in your main page add these:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#to_be_reloaded').load('reloader.php').fadeIn("slow");
}, 20000); // refresh every 20000 milliseconds(20 seconds)
</script>
I know you need it for commenting system and
The workaround is use setInterval like this:
<script type="text/javascript">
setInterval(function(){
$.ajax({
url:'PUT YOUR URL',
success:function(data){
$('#comment').append($(data).fadeIn());
}
});
}, 20000);
</script>
Anything else ...
good luck
I have a query which I make to get live prices.. and the value is assigned to a variable.... I want to refresh that query say every 5 seconds and automatically assign the returned value to the variable... so if the variable is called by repeatedly I get new values... in PHP
$requestUrl = http://mmm.com?c=sss;
returns me a value.. which I assign to $price
so when I call $price say every 5 sec it should return fresh values...
Meaning the request url should be run say every 5 sec and values assigned every 5 sec...
Pls guide...
Try this post which is an excellent guide on how to achieve this -
How to Refresh/Reload Page or Part of the Page Automatically. It show a full meta refresh using specified time or a partial refresh. Another good example on how to do this -
Auto refresh webpage every 5 second with PHP,HTML and JavaScript
Not tested, something like this will do,
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#myDiv").load("mypage.php");
var refreshId = setInterval(function() {
$("#myDiv").load("http://mmm.com?c=sss");
}, 5000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
I'm building a website that prints the content in it's Mysql database to the page for the user to see. The database's content is going to be constantly added to, and I want to show those changes in real time on the page without the user having to reload. I'm using PHP to echo the contents of the database to the page right now and it works great, it's just that to see any new changes, the page has to be reloaded. So my question is, how do I make the page update itself in real time? I'm guessing this is going to involve Ajax but I'm rather new to javascript...
Would you guys mind pointing me in the right direction?
Here's what my database looks like:
id author body
----------------------------------------
1 jim sample content
2 bob more content
3 fred some more!
I'm using the following PHP code to print the above data to the web page:
$query = mysql_query("SELECT * FROM log order by id desc") or die(mysql_error());
while($row = mysql_fetch_array($query)) :
echo $row['author'];
echo $row['body'];
endwhile;
Thanks!
If you want to use the jQuery library, you can use this example I wrote.
Its pretty daunting at first, but ill explain the best I can.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var shownIds = new Array();
setInterval(function(){
$.get("test2.php", function(data){
data = $.parseJSON(data);
for(i = 0; i < data.length; i++){
if($.inArray(data[i]["id"], shownIds) == -1){
$("#log").append("id: " + data[i]["id"] + "<br />");
shownIds.push(data[i]["id"]);
}
}
});
}, 2000);
});
</script>
</head>
<body>
<div id="log">
</div>
</body>
</html>
test2.php
<?php
$result[0]["id"] = "id1";
$result[1]["id"] = "id2";
echo json_encode($result);
?>
So basically, it checks if the document is ready and everything is loaded.
After that is makes a new array called shownIds. This variable will keep the id (primary index from your sql table) to make sure it doesn't show the same data twice.
SetInterval just makes it call that function every two seconds.
$.get this function gets the page source of test2.php which has the json data.
It parses it with $.parseJSON and then loops through each.
To make sure that no two rows are shown twice, it checks with $.inArray to see if the id is already in the shownIds array.
If it isnt, it appends the data (just id for now) onto the only div.
Then it pushes the id into the shownIds array so that it doesnt get shown again.
test2.php makes an array. Sets the ids, and echos the data in the json format (not needed but keeps it organized)
Use jquery ajax http://api.jquery.com/jQuery.ajax/ its simple and easy and call ajax method after every second...so that after every second u will get new data.
Using Javascript (or Ajax) I want to connect to a page (a .php page) every 10 seconds. This will be done in user-side (browser) within a web page. Just, I'm trying to see the online users. I have about 1-2 visitors daily, in my personal web site.
Using jQuery's $.post() method:
setInterval(function(){
$.post("getCount.php", function(result) {
// do something with result
}, "html");
}, 10000);
I'm assuming you have a good reason to query your own local script. If you want detailed information about who is visiting your site, when, and from what types of environments (machines, browsers, etc), I'd suggest you look into implementing something like Google Analytics.
This Javascript will read the page usersonline.php every 10 seconds and place the contents onto the current web page.
<html>
<head>
<script>
var xmlrequest;
function gotnewdata()
{
if(xmlrequest.readyState == 4)
{
document.getElementById("output").innerHTML = xmlrequest.responseText;
setTimeout("loadpage();", 10000);
}
}
function loadpage()
{
xmlrequest = new XMLHttpRequest();
xmlrequest.open("GET", "usersonline.php", true);
xmlrequest.onreadystatechange = gotnewdata;
xmlrequest.send(null);
}
</script>
</head>
<body onload="loadpage();">
<h1>My Page</h1>
<p>USERS ONLINE:</p><p id="output"></p>
</body></html>
<html>
<body>
<form target='userCountFrame' action='http://www.google.com'></form>
<iframe name='userCountFrame'></iframe>
<script>
setInterval(function(){
document.getElementsByTagName('form')[0].submit();
}, 10 * 60 * 1000);
</script>
</body>
</html>
change the url accordingly, save the above code as count.html on your desktop, and open it using Firefox