I am new to JQuery and facing an issue while refreshing div using following script
< script >
$(document).ready(
function() {
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
<?php
echo '<section class="col-lg-6" id="dbq">';
echo '<p>My Section </p>';
echo '</section>';
?>
The section i am trying to refresh is declared as below
The problem i am facing is that whenever the page loads for the first time, table from "dbqtest.php" is not visible for 1st 10 seconds. and My section stays there even after loading data from "dbqtest.php"
You need a wrapper for reloading section. Somthing like this must work:
<script>
$(document).ready(
function() {
setInterval(function() {
$("#dbq-wrapper").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
And the HTML:
<div id="dbq-wrapper">
<section class="col-lg-6" id="dbq">
<p>My Section </p>
</section>
</div>
Hoever you can use div inside section and reload data to that and use section as parent, anyway you need wrapper.
As you want to the first time load without delay, the solution is somthing like this:
< script >
function dbqLoader {
$("#dbq").load("dbqtest.php");
}
$(document).ready(function() {
dbqLoader(); // for first time.
function() {
setInterval(function() {dbqLoader();}, 10000); // Loop with Delay
});
});
</script>
This has to be it:
<script>
$(document).ready(function() {
$("#dbq").load("dbqtest.php");
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000);
});
</script>
It's very similar to M.Abooali's answer but I've fixed some issues and minimised it.
Related
I would like to use blinking text to signify that data is loading. Then
hide it once the data is loaded.
I'm also using Flask.
I'm a JQuery newbie and found a recipe for flashing text, but it has the side effect, that hide didn't work.
SO answer
setInterval(function() {
$( "#blink" ).fadeToggle();
}, 500);
The I tried to hide after loading data into a div.
$("#data").load("/load_data/", function() {
$("#blink").hide('fast')
});
HTML:
<p id="blink">Loading Data</p>
<div id="data"></div>
Does this not work or am I just screwing it up...?
Is there another simple solution ?
TIA !!
Happy NY's
UPDATE:
Debugging Andrew Brooke's answer customized for a callback on load.
$("#data").load("/load_data/", function() {
$.clearInterval(blink);
$("#blink).hide("fast")
});
Assign your interval to a variable, then clear it in the .load callback with clearInterval. Then you can hide the blinking text with .hide
var blink = setInterval(function() {
$('#blink').fadeToggle();
}, 500);
$('#data').load('/load_data/', function() {
clearInterval(blink);
$('#blink').hide('fast');
});
Here's a working example
var blink = setInterval(function() {
$('#blink').fadeToggle();
}, 500);
$('#hide').on('click', function() {
clearInterval(blink);
$('#blink').hide('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Hide" id="hide">
<p id="blink">
This is blinking
</p>
You forgot some quotation marks.
("#data").load("/load_data/", function() {
$("#blink").hide('fast')
});
https://jsfiddle.net/2pf8v0nc/1/
I have a fancybox that is loaded in a iframe.
<script type="text/javascript">
$(document).ready(function () {
$("#prodacom_aerohivebundle_aerohivessid_ssid_inschakelen").fancybox({
type: "iframe",
href: "http://localhost/aerohive_ap/web/app_dev.php/queue"
});
});
</script>
This is working fine but now i want to refresh the iframe every 5 seconds without closing the iframe/fancybox.
Is this possible ?
Thanks!
You can use:-
setInterval(function () {
document.querySelector('.fancybox-wrap iframe').contentWindow.location.reload();
},5000);
As per a related answer on SO
$.fancybox.update(); // update
setInterval(function () {
$.fancybox.update();
}, 5000); // calls update every 5 seconds
I have created a div into my page which i wanted to get load after 5 seconds the page get load. Then I wanted to refresh the div without refreshing the page after every 1 min. How can I achieve this functionality with the use of J query. My code look like this
$(document).ready(
function () {
setInterval(function() {
$('#newsletter').show();
}, 100000);
});
This upper block of code is only refreshing the div after 1 min. But on page load , i want the div to be shown to the user after 5 seconds and then this block of code should executed.
$(document).ready(function()
{
setTimeout(function()
{
// Perform actions you need to
setInterval(function()
{
// Perform them again every minute
}, 60000);
}, 5000);
});
I think what you were looking for is setTimeout
Try it:
$(function(){
setTimeout(function(){
$('#newsletter').show(); // to show div after 5 sec of page load
// To reshow on every one minute
setInterval(function() {
$('#newsletter').show();
}, 60000);
}, 5000);
});
You've already got the base functionality there, so all you'll need to do is add a message to appear after 5 seconds. Something like this should work.
$(document).ready(function()
{
setTimeout(function() {
// show message
},5000);
setInterval(function() {
$('#newsletter').show();
}, 60000);
});
Here is a jQuery solution:
$(document).ready(function () {
var $newsletter = $('#newsletter')
.delay(5000)
.show(function() {
setInterval(function() {
// update the newsletter, e.g. set new text
$newsletter.text(new Date());
}, 60000);
});
});
I'm searching a few hours ago for this, I can't finr anywhere.
I use simple Jquery script to refresh a div. I want to see my PHP output in that div.
$script = "
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></script>
<script type=\"text/javascript\">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."');
}, 6000); // the \"3000\" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
";
My problem is. When it refreshing it go to top position of div scroll. I would like to keep the current position, becouse my users my would like to read all content of the div. I would like to make a simple chat application. But it's bad cos always go to top.
How can I solve this? Anyone has a solution?
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
setInterval(function() {
var div = document.getElementById("uzidoboz").scrollTop;
$('#uziRefresh').load('/modulok/belso_levelezes/refresh.php?a_a=<?php print($kinek[1])?>', function(){
$("div.uzidoboz").scrollTop(div);
})
}, 6000);
});
</script>
This is my full solution. I'm sorry, I missed some div names, but with correct names the last solution not yet worked. This work fine. First I get the current scrolltop, reload the div, and set the scrolltop.
It runs in every 6000 millisecond. It's simple now and work. I have my divs. uzidoboz div have got overflow. My content is in that. But I load it all to the uziRefresh div...
Check this solution. I have removed your comments sorry!.
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
var updateScrollPosition = function() {
var div = $('#uziRefresh');
div.scrollTop(div.height());
};
setInterval(function() {
$('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."', updateScrollPosition);
}, 6000);
});
To be precise use this -
$script = "
<script type=\"text/javascript\">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
var updateScrollPosition = function() {
var div = $('#uziRefresh');
div.scrollTop(div.height());
};
setInterval(function() {
$('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."',
updateScrollPosition);
}, 6000); // ]]>
";
I am having some problems getting my JS/JQ to fire in HTML5 page.
Basically I would like to check if the following ID exists and the following class:
ID: page_blog
CLASS: page current
<section class="page current" id="page_blog" style="z-index: 99; left: -50px;">
...
...
...
If they exist then redirect after 2-3 seconds changing the H1 to say
Loading...
<h1><button data-target="home" data-target-activation="click" class="back backwards"></button>Loading...</h1>
This is what i have so far:
<script type="text/JavaScript">
$(document).ready(function () {
$('li#blogLink.tile').click(function (e) {
e.preventDefault(); //will stop the link href to call the blog page
setTimeout(function () {
alert("this has worked");
//window.location.href = "http://www.site.co.uk/blog/"; //will redirect to your blog page (an ex: blog.html)
}, 2000); //will call the function after 2 secs.
});
});
</script>
I have the following in my page now:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
</script>
<script type="text/JavaScript">
$(document).ready(function () {
if ($(".page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function () {
window.location.href = "http://www.website.co.uk/blog/";
}, 2000);
});
</script>
But the check to see if the class/id exists isnt firing?
Try this:
$('li#blogLink.tile').click(function (e) {
e.preventDefault();
if ($("#page_blog.page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function() {
window.location.href = "http://www.site.co.uk/blog/";
}, 2000);
}
});
Example fiddle
Also it's worth mentioning that your selectors are overkill. There should only ever be 1 unique element with the id #page_blog and #blogLink, so including the tag and classes on the selectors for them is redundant code.