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);
});
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 am stuck again with a problem, let me explain it to you.
Inside the div I have fetched data with HTML SIMPLE DOM from other site. Like
<div id="data">.....</div>
It will refresh each and every time user will refresh the page. But I want something extra. What I wanna do is, refresh the div (inside which external data is fetched and added) periodically after 5 seconds.
Both the PHP SIMPLE HTML DOM script and this div is on same page.
Now I only need, any jquery or javascript code to refresh the div with data id after each 5 seconds with new data fron other site and all this without refreshing the whole page.
UPDATE:
I have used this code
$(document).ready( function() {
function getTheTime(){
$.get('http://your-domain/file.php',function(data,status){
$('#data').html(data);
});
}
var refresh = setInterval(
"getTheTime()",
5000
);
});
But the problem is very very strange, why it is not refreshing the div? Infact I have set alert for the interval but it also didn't worked. What the real problem is? Why it is not getting data from file.php and why actually it is not refreshing the div??
I am using latest jquery CDN. http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
$(function() {
setInterval(function(){
$('#data').load('site.php');
}, 5000);
});
Definitely a job for AJAX...
Since you say you're already using jQuery, I'll walk you through the steps quickly to get an AJAX function set up and run it on an interval.
Step 1: Create a PHP file which gets the data you want to put in the DIV...
Just make a PHP file and put the code in to get the data:
<?php echo "The time is " . date('Y-m-d H:i:s');
Step 2: Set up an AJAX function to get the data from that file...
function getTheTime(){
$.get('http://yourdomain.com/ajax/getthetime.php',function(data,status){
$('#data').text(data);
});
}
(It would be possible to use the .load function instead, but it's far less flexible if you want to do anything with the data before putting it in the DIV).
Step 3: Call that function on an interval...
Next, we need to set up an interval to call the new function every 5 seconds.
$(function(){
var refresh = setInterval(
getTheTime(),
5000
);
});
Instead of using setInterval to call the function every 5 seconds, you can use simple long polling technique to refresh your div every 5 seconds. The problem with setInterval is that if the ajax request doesn't complete in specified time (5 secs here) there will be the chain of ajax requests.
function getTheTime(){
$.ajax({
type: "POST",
url: "http://your-domain/file.php",
success: function(response) {
$('#data').html(response); //update your div
},
complete: function(){
setTimeout(
getTheTime, /* Refresh time */
5000 /* ..after 5 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//display you error message
},
timeout: 5000 //Timeout is necessary to prevent chaining of unsuccessful ajax request
});
}
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.
I've got a script in an HTML file that runs a php file every 30 seconds. The php file is intended to change a div's innerHTML. I don't seem to find the way to replace it.
I was using load() but there are several divs I want to keep updating every 30 seconds and I don't want to make the server GET that much requests. So I'm looking for one only php get and then change the innerhtml in those several divs
This is what i've got:
HTML:
<script type="text/javascript">
$(document).ready(function () {
$.get('php.php');
});
setInterval(function(){
$.get('php.php');
}, 30000);
</script>
<div id="foo"></div>
php.php:
document.getElementById("foo").innerHTML = '<?php
// some php code
?>';
I think the problem is I'm not being able to get the element from the parent HTML file. I don't know how to solve this...
Any suggestions will be more than aprecciated!
You are reinventing jQuery's load()
function fetchContent() {
$("#foo").load('php.php');
window.setTimeout(fetchContent, 30000);
}
$(fetchContent);
The server should just return the HTML content that you want to display.
EDIT
Since your comment is different from the original question.
function fetchContent() {
$("#foo").get('php.php', function(data) {
var html = $("<div/>").html(data);
$("#foo").html( html.find("#Section1").html() );
$("#bar").html( html.find("#Section2").html() );
$("#asd").html( html.find("#Section3").html() );
window.setTimeout(fetchContent, 30000);
});
}
$(fetchContent);
You would want to add an onError handler and might want to set the no cache option for the Ajax calls.
what you probably want is for your php.php to return some data, and then you use the success of the $.get to update your #foo; taking an example from http://api.jquery.com/jQuery.get/ and modifying it for your example
$.get("php.php", function( data ) {
$( '#foo' ).html( data );
});
hope that helps :)
Can anyone please tell me how to write a small div container in HTML that refreshes its contents from the data in mysql every 5 min.
This is similar to twitter updates in some webpages which show updates as and when tweeted.
Thanks.
You can use the setInterval function to make AJAX calls:
setInterval(function() {
$('#dynamicDiv').load('DynamicDivData.php');
}, 5 * 60 * 1000); //300,000 milliseconds.
Where DynamicDivData.php connects to the database and returns the HTML to put in the <div>.
To avoid caching issues, you can append a random number in the querystring:
$('#dynamicDiv').load('DynamicDivData.php?NoCache=' + Math.random());
With Jquery
$(document).ready(function () {
$("#live").load("ajax.php");
var refreshId = setInterval(function () {
$("#live").load('ajax.php?randval=' + Math.random());
}, 3000);
});
it calls ajax.php in first load and every 3 seconds to #live div.