I load content (from a php file that get lists from database) to a div. It has a 10 seconds loop. So on every 10 seconds, it checks the file and load content to div to show new lists if added. However, on every run, the div content flashes (appear and disappear). It seems so unprofessional.
setInterval(function(){
$("#messageshere").empty();
$("#messageshere").load("msgs.php");
}, 10000);
My question is, is there smarter way for doing the same thing, but without flashing ?
Use a callback to show your message and empty your div only when you have your response. like this:
$('#messageshere').load('msgs.php', function(data) {
$(this).empty() // also unnecessary
$(this).html(data);
});
Related
I have a section of my site im working on where i have a certain div, the div "comments" needs to be checked for blank comments being posted and remove them, it works fine the first time but after the div is refreshed it stops working. I'm trying to get this script to reload every second along with the div so the results stay consistent. Here are my 2 scripts:
<script type="text/javascript">
function doRefresh(){
$("#comments").load("comment.txt");
}
$(function() {
setInterval(doRefresh, 1000);
});
</script>
<script>
setTimeout(refreshData, 1000);
function parent()
{ $(".comment_name:empty").parent().hide()};
refreshData();
</script>
For future reference you should have a look into websockets. This will enable you to have data refresh as it is entered from one browser to another and will always keep it up to date without refreshing.
Here is a reference for you to get started. https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
It is a starting point and will help you a lot in future for dynamic content on multiple end points.
Following javascript code is used to load the php page:
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.squeeze_overzicht').load('squeeze_overzicht.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds. S
});
In de php script following div is set:
if ($LMS_info['result']['mode'] == "play")
{
echo "<div class=\"squeeze_plays_badkamer\"></div>";
}
Problem: The inserted div is an animated div wich restarts with every load. I want it to keep rotating till the div is not shown. How to set the div without being influenced by the specific loading time set in the javascript?
I have a script that auto-refreshes a certain div on the page (That I got from another post on here)
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').load('index.php?_=' +Math.random()).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
...............
<div id="refresh">
<!-- Some PHP Code -->
</div>
This refreshes, however when it does, I takes the entire html document and puts it into the div. Like this:
As you can see, the refreshed div (the one marked in red) is getting the body shouved into it. Any ideas???
You are loading entire page to the div.
Modify the code to use only part of the document that is fetched:
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').empty();
$('#refresh').load('index.php?_=' +Math.random()+' #refresh').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
First off, you are loading the entire page into the divider, thus causing the file to reload entirely. Instead, you should be having the Recent Posts divider load from a single file, even on the first page load. Then have that consistently refresh over time.
Secondly, you should be transferring as little data as possible from your server to your clients. At most, you should use a minimalistic checksum of sorts (number of messages, for instance) to confirm that the client and server are synced up.
Lastly, if you choose to use this format, aim to transfer your data in something such as JSON or XML and have the client display it on the page. Transferring the styled HTML increases network overhead and is not the best practice.
So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.
After you load the 10 elements on the page, wire up a jquery waypoint that will trigger an action.
The first step of the action will be to disable to waypoint (so it only fires once). Then have it load additional data via ajax and render that on the page. After (via callback) that is done, you'll reactivate the waypoint so that the process will start anew when the user scrolls down to it.
Your application will have to keep track of how many and what elements are loaded, so your ajax requests request the correct numbers (i.e. 10 are loaded, so the next request should start at 10 and fetch 10, next should start at 20 and fetch 10, etc).
The "75% of the way to the bottom" is easily configurable in waypoint. You'll use the "offset" for that.
Check out the waypoint documentation
I put the DOM element that triggers my infinite scrolling underneath of the main grid that I have, so as I load more content, it automatically pushes it down.
I used jquery masonry+waypoint js..But if you dont register waypoint in masonry callback, it will load the items that comes with your ajax call more than once..Here is my solution;
//INFINITE SCROLL
var $loading = $("#itemsloading"),
$footer = $('footer'),
opts = {
offset: '120%',
onlyOnScroll:false
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$loading.toggle(true);
$.get($('.more').attr('href'), function(data) {
var $data = $(data.result[0]);
if($(data.result[0]).length==0){
$loading.toggle(false);
return false;
}
$('#items').append( $data ).masonry( 'appended', $data, true,
function(){
$footer.waypoint(opts);
});
$loading.toggle(false);
});
}, opts);
I have dynamic page which takes about 8 seconds to load searched data.
Problem is, all browsers remain on old page for those 8 secs & show dynamic page only after it
loads completely.
What I want is preloder image to be shown to the customers until second page gets load.
How can I achieve this?
Thanks
I assume you are loading the second page through AJAX. If so, you'll only be able to display the results after the asynchronous call returns.
However, nothing prevents you from making changes to the page before sending off the AJAX request. The basic structure will be:
var preload = $('<div></div>').text('I am preloading!').insertAfter('somewhere');
$.get(..., function() {
preload.remove();
// insert your real content, received from this AJAX request
});
$('<div id="busy">Loading...</div>')
.ajaxStart(function() {$(this).show();})
.ajaxStop(function() {$(this).hide();})
.appendTo('body');
That's all!
You may want to add some style to #busy tag, but this you can do with CSS.