i want to refresh a page in php(which is executing the sql statements) to p refreshed every 10 seconds. I load the page in a div like:
<div id="test"> <?php echo showPage() ?></div>
So how can i just refresh this duv that will make the data fetch by the sql refresh..
thank you
You can include a <meta http-equiv="refresh" content="10"/> tag in the head tag, or, if you do not have access to the head tag, you can insert a script tag anywhere in the page like this one:
<script type="text/javascript">
setTimeout(function() {
location.reload();
}, 10000);
</script>
<script type="text/javascript"><!--
$(document).ready(function() {
setTimeout('$(\'#test\').load(\'abc.php #test >* \' )', 10000)
});
//--></script>
Write your script in the below way
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#test').load('test.php');
}, 10000); // refresh every 10000 milliseconds
</script>
<body>
<div id="test"> </div>
</body>
Related
i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});
<html>
<head>
<script src="js/jquery-1_9_1_js.js"></script>
<script>
$(function() {
$("#mainDiv").load("two.php");
});
</script>
</head>
<body>
<div class="main" id="mainDiv"></div>
</body>
</html>
Hi, I have above code in one.php. It loads data from two.php into mainDiv.
The contents of two.php are overlapping out of the div instead of the scrolling inside the div in one.php. Please help me insert a script/code that will scroll the contents inside mainDiv instead of overlapping.
try this :
<div id="" style="overflow-y: scroll; height:'your height';">
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#mainDiv').load('home.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
it will refresh every 5 seconds
hello here i have i script but this dont work i caant update chat every second can you help me to update chat every second from database (pleasee no uppate div only text)
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
read.php
<?php
include("config.php");
$Data = "SELECT * FROM chat ORDER BY Time ASC";
$Result = mysqli_query($Connection, $Data);
while($row = mysqli_fetch_array($Result,MYSQLI_ASSOC))
{
echo '</br>' .$row['name'];
}
mysqli_free_result($Result);
mysqli_close($Connection);
?>
this is my code but my code when insert data in database my code not update data in html
Option 1:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat()
{
$.get("read.php")
.done(function(data)
{
//You can do futher checks here....
$("#Show_Data").html(data);
setTimeout(function() {updateChat();},1000);
})
.fail(function()
{
//error 404 or 500
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
Int the code above, when something wrong with the call it stops and it does not continues the executions.
Option2:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setInterval(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
The code aboce executed every 1000 miliseconds the ajax call regardless if it is sucessfull the call or not
You need to use setInterval instead of setTimeout (it runs only once).
If that doesn't help, please post any PHP/JavaScript errors that you are getting.
To make sure PHP errors are set to display, add error_reporting(E_ALL) to the top of your script.
To see JavaScript errors, open the Developer Tools (F12) in your browser and go to Console.
I have a php page and I am trying to scroll user to section automatically after entire page is loaded. Right now it takes directly to that section on page load, I want entire page to be loaded and then scroll the page to that div. What I am doing is.
<script type="text/javascript">
<!--
function gotoit()
{
window.location="#gohere";
}
//-->
</script>
<body onload="gotoit()">
some code here
<a name="gohere"><div class="I want to scroll to this div"></a>
Please help me what should I do to scroll smoothly to that section automatically after page load.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var theHash = "#go-here";
$("html, body").animate({scrollTop:$(theHash).offset().top}, 800);
});
</script>
</head>
<body>
<p>Lots of content here...</p>
<p>More content...</p>
<p>etc...</p>
<p id="go-here">Scroll down to here automagically</p>
<p>Some more content</p>
</body>
</html>
$(window).load() ensures the page starts to scroll after all your other assets have loaded (images, for example).
Here is a jQuery function I use to achieve this:
function scrollToStart(){
$("#scrollToStart").click(function (){
$('html, body').animate({
scrollTop: $("#startHere").offset().top
}, 2000);
});
};
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>