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>';
?>
Related
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>
I have a problem with colorbox:
I have a page that would receive part of its content by AJAX. Now within that ajax retrieved content there are Colorbox links as well. Now these links don´t work, or rather said the first click would not work (but would lead to the link within the browser except the link within a colorbox), now after having the first click (which would not work as described before), hitting the back button of the browser all further links would display - as wanted - in a colorbox.
I tried several browsers with all having the same result. So I thought - especially since after having gone wrong once then working correctly - this could probably be a problem of having the colorbox library not in the cache.
So I tried to add this line of code (except for being on the main page anyway) within the ajax retrieved content
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
}
</script>
which leads to the error explained above not happening anymore but rather doubling and trippling the colorbox layers so to say, which means, after having hit 2 different colorbox links one would need 2 clicks to close the colorbox, after having hit 3 different colorboxes one would need 3 clicks to close those third colorbox and so on...
As I was asked to do so, here is the relevant code:
Now that is the main page including that:
<script type="text/javascript">var currentTime = '<? print date("F d, Y H:i:s", time())?>';</script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
});
</script>
as well as in the body then that:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
which would create work out good. But if I have the second part, so that one:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
being placed on the same page by AJAX it would not work any more (while having that AJAX is crucial to me).
It could be that you're using a class to select, $(".cbDetails").colorbox(); would apply to all elements with that class and open up a lot of windows as you're describing. Try to target your clicks more specifically with id's or $(this).
$(document).ready(function(){
$(".cbDetails").on("click", function()
{$(this).colorbox();});
});
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 want to be able to click on a link lower down my PHP page, it send a variable and outputs the result in a <div> tag at the top half of the page.
I've linked to latest jquery, and so far I have this in my <head>:
<script type="text/javascript">
$().ready(function() {
$("#result").load("crimes_result.php");
});
</script>
And in my <body>:
<div id="result"></div>
What I need though, is that the div to be shown and depending on the result of a variable sent by a link the user clicks lower down the page.
like crimes_result.php?id=4334 or crimes_result.php?id=54543
How can I finish my script so it does that?
NOTE: I'm useless in ajax/jquery/javascript
If I understand correctly, simply call .load() from a click event and pass it the href of the link:
HTML:
<a class="loadlink" href="crimes_result.php?id=4334">Click Me<a>
JS:
$(".loadlink").click( function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
Example: http://jsfiddle.net/jtbowden/ueucL/1/
I'm pulling my hair out with this bug, although I'm sure it's something obvious. Apologies if it is.
The following javascript successfully sets my cookie:
<script type="text/javascript">
$(document).ready(function(){
$.post('../setCookie.php',{'region':'test'});
});
</script>
But as soon as I tie the same code to an onclick event, like so...
<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(){
$.post('../setCookie.php',{'region':'en-us'});
});
$("#uk a").click(function(){
$.post('../setCookie.php',{'region':'en-gb'});
});
});
</script>
<ul>
<li id="uk"><a href="http://www.example.com/uk">
<span>Enter UK site</span></a></li>
<li id="us"><a href="http://www.example.com/us">
<span>Enter US site</span></a></li>
</ul>
..it no longer sets a cookie! Even though the same code is called an executed in exactly the same way (I step through it fine, and see everything as it's supposed to be).
Repeat: The javascript is firing fine. I am stepping through setCookie.php and everything is the same... except no cookie at the end of it.
What's going on? I'm guessing it's browser security or something?
For anyone who's interested, here's how I solved it:
<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'en-us'},
function() {
window.location = "http://www.example.com/us";
}
);
});
$("#uk a").click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'en-gb'},
function() {
window.location = "http://www.example.com/uk";
}
);
});
});
</script>
I don't see anything stopping the normal link click going through? If you have nothing preventing the normal a href to go through, there won't be any time to do the $.post request before the page changed already.
Try the following:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'test'});
});
});
It will stop the page change for links, but at least should pass the cookie. Now, if you want the page to be loaded as well, then add a onComplete method to the request, so that once the cookie data has been succesfully sent, you can then continue the page change.
Place this code where the < script > tags is at: (I assume the < head >)
$(document).ready(function(){
$("#us a").click(function(){
$.post('../setCookie.php',{'region':'en-us'});
});
$("#uk a").click(function(){
$.post('../setCookie.php',{'region':'en-gb'});
});
});
If it was a security issue , you will see an error on your console (firebug\webkit\IE dev tools)
I suppose what I would do in this situation is changing the click event and put it here:
<script type="text/javascript">
$(document).ready(function(){
$("#someid > li").click(function(){
$.post('../setCookie.php',{'region':$(this).attr("id")});
});
});
</script>
and then..:
<ul id="someID">
<li id="uk"><a href="http://www.example.com/uk">
<span>Enter UK site</span></a></li>
<li id="us"><a href="www.example.com/us">
<span>Enter US site</span></a></li>
</ul>
I advice not to use JavaScript \ jQuery inside your HTML , just use document.ready() and bind your events (if you use jQuery of course)
Most likely because it's trying to access jQuery ($) before it's created. It would be best to use document.ready from your first example for this.