I'm trying to refresh a part of my web, a div, I found code about this, but It doesn't works. It seems it's correct but doesn't works. I don't understand what happens, I tried other jQuery codes and doesn't work too.
This is the html file:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var timer;
var seconds = 1;
$( document ).ready(function(){
startActivityRefresh()
});
function startActivityRefresh() {
timer = setInterval(function() {
$('#div1').load('prova.php');
}, seconds*1000)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
And this the php file:
<?php
echo "prova";
?>
When I go to the browser and reload the page doesn't show anything. It should show prova. (the php file is only a test)
[RESOLVED]
The problem where in my browser, firefox blocked the content. There was a shield in the url bar to unblock it.
As mentioned, you never actually called startActivityRefresh()
Try this.
<script>
var timer;
var seconds = 1;
$( document ).ready(function(){
startActivityRefresh()
});
function startActivityRefresh() {
timer = setInterval(function() {
$('#div1').load('prova.php');
}, seconds*1000)
}
</script>
Until it is called, the function is just hanging out, waiting for some other piece of code to need it.
I should also mention that there are at least two ways to call a function on page load. $(document).ready and $(window).onload. Here's a discussion on the difference.
EDIT:
Here's a fiddle that demonstrates the basic idea.
Resolved! The problem where in my browser, firefox blocked the content. There was a shield in the url bar to unblock it.
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>';
?>
When the JQuery function tries to open a new page in firefox, the message "firefox prevented this site from opening a pop-up window" is presented. As I understand based on Is window,open() impossible in firefox and Links to local page do not work this is a local problem that only happens because I am trying to access a file in my server from the "localhost". However, when this site will be realy working, other people will not have the same problem just because they are not accessing their own server. Does this interpretation make sense? Or I am wrong and I have to deal with this problem? By the way, it is easy to solve locally this problem since I have only change the preferences of firefox. My worries are related with the other people accessing my web site.
For reference, this is my code:
<?php
$theUsernameDaniel = "danielcajueiro";
$theUsernameMarcelo = "marcelopapini";
?>
<html>
<head>
<meta charset="utf-8" />
<title>ControllingHiperlinks</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("a.peoplePage").click(function(event) {
event.preventDefault();
var theUsername = $(this).data("username");
// alert(theUsername);
// event.preventDefault();
$.post('callmpeoplepage.php', {theUsername: theUsername}, function(data) {
var thePeoplePage = window.open("about:blank");
thePeoplePage.document.write(data);
});
});
});
</script>
</head>
<body>
<a class="peoplePage" data-username="<?php echo $theUsernameDaniel ?>" href=""> Daniel Cajueiro</a>
<a class="peoplePage" data-username="<?php echo $theUsernameMarcelo ?>" href="">Marcelo Cajueiro</a>
</body>
</html>
callmpeoplepage.php is
<?php
$theUsername = $_POST['theUsername'];
echo $theUsername;
?>
You cannot open a popup except in response to a direct user action. Since you delay the window.open until the post reply finishes, it is no longer directly in response to the user's click, and therefore the popup blocker will stop it.
This will happen for everyone, and you cannot change the behavior. You could try opening the window before you submit the post, and only filling it in when the post returns - just move the window.open line up one to just before $.post
you can write like this
let win = window.open("about:blank", "_blank");
$.post('callmpeoplepage.php', {theUsername: theUsername}, function(data) {
// if data is a valid url
win.location.href = data;
});
Good day guys. So I'm trying to work on this simple jQuery program that triggers a function whenever and only whenever a select value has been changed. I plan to use this simple function in a more complex program once I make it work.
This is the code (it came from jQuery API website, and I modified it slightly to try what I wanted to happen):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<select id="selector" name="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$( "#selector" )
.on('change',(function () {
$( "select option:selected" ).each(function() {
<?php header("Location:jcue.php")?>
});
})
.change();
</script>
</body>
</html>
What I want to happen is that, the page should only redirect to jque.php once the select input value has been changed. But what's happening in the program is that it automatically redirects to another page without even loading the current page itself. What's the problem? jQuery and Javascript are the unexplored foreign lands for me in web programming, and I know this is pretty basic to many web programmers, but I just need it (and I really have to start learning Javascript, AJAX, and jQuery when I get to have free time haha).
The complex program I'm going to use it to is a search results filtering program. But before I can do that, I have to make this simple program work.
Can anybody help me? Thank you. Answers will be greatly appreciated.
Try this instead::
$(function() {
$("#selector").change(function() {
location.href = "jcue.php";
});
});
This will fix your issue.
The problem is because your PHP gets executed as soon as the page loads - you cannot incorporate it as you have into javascript. Also, you don't need the each() within the handler. Try this instead:
$("#selector").on('change',(function () {
window.location.assign('jcue.php');
});
JavaScript is client-side script, while PHP is server-side. You are trying to trigger a PHP header redirect which should happen at server-time before it's sent to the client's browser. So this will not be working in that on change event.
Simply use:
$("#selector").change(function() {
window.location = "jcue.php"; //this can be URL as well
});
P.S. I noticed you have two "selected" options, mind tell why?
Not so good practice: to redirect using Javascript, since JS can be blocked
There were some syntax errors, here's a fix, just replace your code.
$( "#selector" ).on('change',(function () {
var str = "";
$( "select option:selected" ).each(function() {
window.location.replace("http://stackoverflow.com");
});
}));
Good Practice: use jquery ajax requests Jquery Ajax or redirect using standard php header function(which has to run before your html/js is loaded)
Good luck, learning programming. It's fun!
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.
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