I have a report page which dynamically generate the record and saved in the database. From database i need to show the dynamically updated records in the page without reload or load the contents using setInterval time function.
see my question Here
and use setInterval function with it
var refreshId = setInterval(function()
{
$("#yourContainer").load('yourPage.php');
}, 5000);
offcourse Jquery is prereq for this... so download jQuery from here and include it in your page
<script href="yourlink to the file"></script>
this code http://pastie.org/937213 loads ajax.php to #live div every 3 seconds
Related
I have a PHP script (ajax.php) which loads content from a MySQL db. That script refreshes new content every N seconds via AJAX. The AJAX content has three links of which one is to archive the row in MySQL. When a user clicks the archive button, I want a jQueryUI dialog to open confirming deletion. Pressing cancel will abort, while OK will trigger an AJAX submission to delete the row from MySQL. Deleting row from table with modal form confirmation (jQuery UI)? is an example of the dialog half of what I want to do. I need this to work along with the ajax/refresh.
Because of the link itself being loaded by AJAX, I cannot run the dialog (or the delete script). How do I load the dialog script and perform the AJAX delete submission? I'm trying to use the GlobalEval but I do not understand the documentation. The examples I've found seem to be for setting variables only. The following script is what I'm trying to build it from:
var id = $('.refreshN').data('id');
var table = $('.refreshN').data('table');
var rtime = $('.refreshN').data('time');
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn("slow");
var autoLoad = setInterval(
function ()
{
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn(5000);
var script = $(function (){
$('.modalLink').click(function () {
$('#dialog').dialog('open');
return false;
});
});
eval(script);
}, rtime); // refresh page every N seconds
Define the variable script with an normal javascript function and add () to execute it.
Try this instead of your current js:
var id = $('.refreshN').data('id');
var table = $('.refreshN').data('table');
var rtime = $('.refreshN').data('time');
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn("slow");
var autoLoad = setInterval(
function ()
{
$('.refreshN').load('ajax.php?id='+id+'&table='+table).fadeIn(5000);
}, rtime); // refresh page every N seconds
$(document).on('click','.modalLink',function(e){
e.preventDefault();
$('#dialog').dialog('open');
})
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 have a page I'm working on where a user clicks a link and it loads a new php file into an existing div. It works but the page that loads into the div will not function with existing Javascript stuff in the page.
I can include the
<script type="text/javascript" src="js/admin.js"></script>
into the loaded pages but when you flick back and forth between the pages I notice that RAM usage starts to go up and up, so I don't think this is the best way of doing it.
Any ideas how the loaded page can function with the already-loaded javascript from the index page?
Thanks!
bind your events like this :
$(document).on({
"event" : function(e) {},
...
}, "selector");
If you are using bind or click type events change to using something like on (or live or delegate if you are required to use jquery version less than 1.9)
OR/AND
In your function that loads in the page via ajax provide a call back that initiates only what is needed. Example:
$('#myDiv').load('ajax/page.php', function(){
$('#myDiv a').customPlugin('whatever');
$('#myDiv button').bind('click', function(){
window.open('http://www.google.com/', 'some-window');
});
});
I have an AJAX loaded DIV.
When on this page I can make some changes that involve table updates and after I make then I call the following code to refresh the DIV.
It does fadeout/in and ajax loader appears etc but the contents of the page remains the same.
Appears the .load() isn't getting a fresh copy of the php file from the server as it requires a refresh for the updated data to appear.
Any ideas how I can get the DIV to refresh? thx
function reloadDIV() {
var ajaxgifloader = $('img#ajaxgifloader');
var contentwrapper = $('div#contentwrapper');
ajaxgifloader.show();
contentwrapper.fadeOut('fast',
function() {
contentwrapper.load('scripts/php/admin_sitearticles.php',
function() {
contentwrapper.fadeIn('slow');
ajaxgifloader.fadeOut();
});
});
}
my appologies - I had the wrong path to the PHP file - thus no new contect... thankyou for tolerating me!!
i wrote myself a block of jquery codes to auto refresh a div
just want it to reload every 10 seconds . but problem is after the time i specified in my code script going crazy reload every second
<script>
var auto_refresh = setInterval(function(){
$(\'#showDIV\').slideUp(\'300\').load(\'movies.php\').slideDown(500);},10000);
</script>
I think you have to use setTimeout() and not setInterval()
read the difference between the two here.