I would like to place content from another php page in my div and reload this every ten seconds. Currently, I use the following code:
<script>
$(document).ready(function(){
setInterval(function(){
$("#screen").load('https://www.url.com/test.php')
}, 10000);
});
</script>
<div id="screen"></div>
That works great, but I need something that loads the content immediately and then reloads every 10 seconds. Does anyone have any idea? Thanks for your help!
This should work:
<script>
$(document).ready(function(){
function update_screen(){
$("#screen").load('https://www.url.com/test.php');
}
update_screen();
setInterval("update_screen", 10000);
});
</script>
<div id="screen"></div>
Related
I have a table that needs to be updated every time a new entry is made to a database, so I refresh the query (devicesAuto.php) every second.
I have a load function written in JQuery that works fine on its own:
<script>
$('#refresh').load('devicesAuto.php');
</script>
But when I pass it into 'setInterval()' it stops working:
<script>
$(document).ready(function(){
setInterval(function(){
$('#refresh').load('devicesAuto.php');
},1000);
});
</script>
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>';
?>
I've got a certain php code in a div which gets data from mysql.I want this div to refresh every minute without refreshing the entire page.
Currently I'm using this, doesn't work well
<div id="abc">
<?php
?>
</div>
window.setTimeout('location.reload()', 60000);
The ideal way to do this is to use jQuery.ajax to retrieve data from your server, and then use JavaScript/jQuery within your success function to update your page.
You can still use setTimeout or equivalent to periodically issue AJAX requests.
As you want to refresh the div content every minute you need to look at setInterval method and load of jQuery:
window.setInterval(function(){
$('#abc').load('PHPFile.php');
}, 1000);
and your PHP script mentioned in the url part of the load method must be capable to provide the result in HTML format which is going to be placed in the given div (id:abc)
Have the PHP-code on another page (for example; loaddata.php) and have a jQuery timer executing a function which loads the page loaddata.php
Loaddata.php
<?php
echo "Hello World!";
?>
index.php
<div id="data"></div>
<script>
$('#div').load("loaddata.php", function() {
window.setInterval("loadData", 60000);
});
function loadData()
{
$('#div').load("loaddata.php");
}
</script>
Something like this:
function refreshContent() {
$.post(urlHere, { data here...}, success(data) {
//...manipulate DOM here...
}
}
setTimeout(refreshContent, 60000);
Example of jQuery Ajax
file1.php
<?php
echo 'PHP content e.g. from database based on submitted request - '.$_POST['my-value'];
?>
file2.html
<div class="content"></div>
Refresh div
<script>
$(function(){
$(".reload-data").click(function(){
$.post("file1.php", {my-value: "something"}, function(data){
$(".content").html(data);
});
});
});
setTimeout(function(){$(".reload-data").click();}, 60000);
</script>
For these situations I sometimes use jQuery.load()
Example from documentation:
<div id="result"></div>
<script type="text/javascript">
function refreshDiv() {
$('#result').load('ajax/test.html #container', function(){ /* callback code here */ });
}
setInterval(refreshDiv, 10000);
</script>
This does the following:
Checks if the #result element is in the current page
If it is, it makes a request to the ajax/test.html page
Grabs the #container from the response, and dumps it into #result
And it does this every 10 seconds
That's about it. One line of code, although not as efficient as a true ajax request, it does the job.
$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('http://d.com/myphp.php? nice=1149632');
return false;
});
});
Click me to load some HTML with AJAX.
<div id='demo_content'>
</div>
I wanted to know if anyone can give me advice as to how I can load this kind of Effect not by a click, but by an animated "loading" effect.
Let me know if anyone has any suggestions.
This will execute your load() call when the DOM on the page is ready.
$(document).ready(function() {
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
return false;
});
As for your 'loading' request, I suggest you take a look at this StackOverflow question. Nevermind, I just saw you already had something in mind.
$(document).ready(function() {
$.ajax({
url: 'http://example.com/myphp.php?nice=1149632',
success: function(data) {
$('#demo_content').html(data);
}
beforeSend: function(){
//show loading here
$('#demo_content').html("Loading...");
}
});
});
If you want the javascript code to be executed when the page has been loaded, you can also add the script at the bottom of the page, like this:
<script>
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
</script>
I was wondering is there a way I can have my page display a delete message after the php code has done the deletion and then have Jquery fade out the message after about 5 seconds. If so how would my JQuery code look like? An example would help me out.
Yep. If your message has an ID of 'delete-message' then you can use the following code:
$(function() {
setTimeout(function() {
$('#delete-message').fadeOut();
},5000);
});
That will set a timeout of 5 seconds once the page has loaded, and after that 5 seconds, it will fade out the element with the ID 'delete-message'.
you can do this using document ready funtion
$(document).ready(function(){
setTimeout(function() {
$('#delete-message').fadeOut();
alert('test');
},3000);
});