I have written a code to refresh two divs at regular intervals of time. Here it is
<script language="javascript">
$(document).ready(function() {
$("#autorefresh_1").load("content1.php");
var refreshId = setInterval(function() {
$("#autorefresh_1").load("content1.php");
}, 9000);
$("#autorefresh_2").load("content2.php");
var refreshId = setInterval(function() {
$("#autorefresh_2").load("content2.php");
}, 9000);
});
</script>
Is there some other best way of writing this code? prehaps merging the two? Sorry for the simple question, I am new to jQuery.
I would do it like so:
$(document).ready(function() {
var refresh = function () {
$("#autorefresh_1").load("content1.php");
$("#autorefresh_2").load("content2.php");
}
setInterval(refresh, 9000);
refresh();
});
Related
I ask you for help. Namely, struggling with the tooltip in ajax. Everything works beautifully when the page is load or after such as F5. However, in the part web I use refresh div every 60 seconds by ajax
<script type="text/javascript" >
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#loaddiv').load('refresh_clusterdx_2.php');
}, 60000);
</script>
The code of my tooltip
<script type="text/javascript">
$(document).ready(function(){
function showProfileTooltip(e, id){
var top = e.clientY -45;
var left = e.clientX + 25;
$('.p-tooltip').css({
'top':top,
'left':left
}).show();
//send id & get info from get_prefix.php
$.ajax({
url: '/Info/get_prefix.php?id='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide();
}
$('.profile').mouseover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip(e, id);
});
$('.p-tooltip').mouseleave(function(){
hideProfileTooltip();
});
});
</script>
All beautifully and looks ok until the div is not refreshed. When a div to be refreshed, the tooltip no work :( I can not find a solution to the problem, whether it is at all possible to solve.
Thank you for any help.
Regards
tjakob
To ensure that your functions work after ajax loaded content, you'll have to modify them a little:
$(document).on('mouseover', '.profile', function() {
var id = $('.profile').attr('data-id');
showProfileTooltip(e, id);
});
$(document).on('mouseleave', '.p-tooltip', function() {
hideProfileTooltip();
});
You should always use .on with dynamically loaded content - I'm in the habit of doing this for all my functions now.
I have a page that the function is to refresh div tag.
Div tag function is refresh the data will receive.
So far that's ok.
When I block the text using mouse, that's will clear the block text based on timing "20000". This below the JS script function.
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function()
{
$("#content2").load("post_rf.php");
var refreshId = setInterval(function()
{
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
$.ajaxSetup({ cache: false });
});
</script>
What I want to do is, how to keep the block text in div refresh function ?
Because some user maybe want to copy the text. In this case, user must quickly copy the text before div refresh.
Maybe the example like facebook post live update.
You want to assign your interval to a variable, when user mouse overs your DIV then use clearInterval, when mouse out setInterval again.
var interval;
$(div).bind("mouseout", function() {
interval = setInterval(refresh, 1000);
});
$(div).bind("mouseover", function() {
clearInterval(interval);
});
EDIT
Sorry I posted that on a phone and it's hard to write code that way, try this:
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function() {
$("#content2").load("post_rf.php");
// set your initial interval to kick it off
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
// bind an event to mouseout of your DIV to kickstart the interval again
$("#content2").bind("mouseout", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval);
});
$.ajaxSetup({ cache: false });
});
</script>
I need to run the function createChartControl every minute. Each time the function is executed, the content of the DIV container GanttDiv should be updated. The problem is that the function createChartControl is executed only once. How to correctly add the timer?
<script type="text/javascript" language="JavaScript">
function createChartControl(htmlDiv1)
{
// ...
}
(function(){
createChartControl('GanttDiv');
})();
</script>
<script>
$(document).ready(function() {
$("#GanttDiv").(function(){
createChartControl('GanttDiv');
})();
var refreshId = setInterval(function() {
$('#GanttDiv').fadeOut("slow", function () {
$(this).(function(){
createChartControl('GanttDiv');
})().fadeIn("slow");
});
}, 60000);
$.ajaxSetup({ cache: false });
});
</script>
<div style="width:100%; height:350px; position:relative" id="GanttDiv" class="GanttDiv"></div>
Your setInterval seems to be correct but you're having an error in the first execution. Try this:
var refreshId = setInterval(function() {
$('#GanttDiv').fadeOut("slow", function () {
createChartControl('GanttDiv');
$(this).fadeIn("slow");
});
}, 60000);
Also if you're already passing the id to the createChartControl function, you don't need to do this (that, with an unmodified jQuery also it's not valid):
$("#GanttDiv").(function(){
createChartControl('GanttDiv');
})();
You could just do
createChartControl('GanttDiv');
Hello I have this snippet of jQuery code
jQuery(document).ready(function($) {
$.get("<?echo $site['url'];?>modules/tuitting/tuitting_core/classes/count.php", function (data) {
var resultDiv = document.getElementById('count');
resultDiv.innerHTML = data;
});
});
Now what I need is to make this function continuosly checking the data, even when the page is not refreshing. I think I should use a jquery timing function, but I do not really know jQuery at all, and I am lost. Who is so nice to provide the code to me? That would be VERY appreciated. Thanks!
put it in a function with setTimeout:
function repeat_get()
{
$.get("<?echo $site['url'];?>modules/tuitting/tuitting_core/classes/count.php", function (data)
{
var resultDiv = document.getElementById('count');
resultDiv.innerHTML = data;
setTimeout(repeat_get, 2000); //2 seconds
});
}
What you should do is put this on an interval:
setInterval(function()
{
$.get("<?echo $site['url'];?>modules/tuitting/tuitting_core/classes/count.php", function (data)
{
var resultDiv = document.getElementById('count');
resultDiv.innerHTML = data;
});
}, 2000);
This will invoke the callback defined every 2000 milliseconds. In your read event, you simply start the interval:
$(document).ready(function()
{
setInterval(...);
});
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in your JS, you can easily refresh the table by using the load() method:
HTML
<div id="tableHolder"></div>
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
Use ajax, following example is in jQuery:
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.
You should have a page that return the information and pull data using Ajax / jQuery.
<div class="result"></div>
setInterval(function() {
$.get('table.php', function(data) {
$('#result').html(data);
});
}, 5000);
Here is another option for you to use. This solution is using an IIFE which is preferred over setInterval. You can read more about IIFE at the link above.
JAVASCRIPT:
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
<div id="results"></div>
setTimeout(function(){
jqueryFunction(Args);
},100);
will work...
100 = 100 milliseconds
The following works with JQuery Datatables 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`