I have a php page that takes some time to load because it fetches data from third party APIs. How do I show a loader message while the page loads?
Jquery or Javascript is not an option because I am getting the data from a class call from within the body of the page and not through an AJAX call.
You can use window.load to show loader till page load completes.
$(window).load(function() {
// Animate loader off screen
$("#loader").fadeOut("slow");;
});
Related
I have a really simple question; I'm developing a wordpress site that uses a filtering plugin. This plugin loads the results using ajax. The goal is to open the results in a lightbox (I'm using colorbox). I can get it to work on the first page, but after the results are dynamically added, it doesn't work anymore.
I know I have to reinitialise my colorbox after the ajax load, and the plugin also provides a code (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/), the thing is I'm not exactly sure where to place it.
I've added the following to the page's footer:
<script>
//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
console.log("ajax start");
});
//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$('.colorbox-link', context).colorbox();
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
//so load your lightbox or JS scripts here again
$('.colorbox-link', context).colorbox();
});
//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
console.log("S&F JS initialised");
});
</script>
Thanks!
I'm using the jquery cluetip plugin and it is working fine. The problem is that when page is loaded from ajax and I want to use cluetip on any element of this page then it is not working.
I already call .cluetip() function on ajax loaded page.
Thanks
You'll have to initialise the plugin when you load the page via AJAX. Put your initialization code in the AJAX success callback.
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 want to add a progress bar before my web page's content loads, so I thought of loading it dynamically via javascript. This content has embedded javascript in its html. I tried using jquery.load() which works perfectly besides the fact that it does not support the js that doesn''t work on the returned content
just to make it clear, what i'm doing is something like this to load all the content:
$("#contentid").html("progressBar.gif");
$("#contentid").load(script.php #content)
$("#contentid").show();
and inside the content returned from script.php there are js calls such as:
jquery.load (to crawl for data and displaying it when ready)
document.getElementById('some_div') (for chart api)
snippets that load widgets
I've been trying to work around with using jquery.ajax though not sure if\how its possible with it yet. would love for some input on that.should i be able to achieve that with it?
Any other idea that might show a progress bar till the script's content is loaded will be great. I'm trying to reduce changes in the code structure, since this long load happens only sometimes.
Thanks.
You may add a div with the progress bar, covering all the page, and remove it after the page is loaded, using:
$(window).load(function() {
$('#progressbar').remove();
});
JQuery's load method takes a callback function as an argument. That function will get called when the load is completed, so you can hide your progress bar at that point. Here is an example from their API docs:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
In your case, it would be something like:
$("#contentid").load(script.php, function(){
$("#contentid").hide();
});
I have been loading content with ajax and all works fine. Here is my code
$(document).ready(function() {
//Load a-z.php
//Timestamp resolves IE caching issue
var tsTimeStamp= new Date().getTime();
$.post('../../includes/categories/a-z.php',
{action: "post", time: tsTimeStamp},
function(data){
$('#moviescontainer').html(data).slideDown('slow');
});
return true;
});
My data inside a-z.php requires Javascript for it's content and when I load a-z.php onto my page the javascript doesn't work.
I am quessing that I need to link the relevant files to a-z.php and then load it via ajax.
Doesn't this kind of defeat the object of ajax?? That means that I will be loading the js files on the main page and then loading them again when I ajax a-z.php
I hope I made some sense.
EDIT: The A-Z.php page references external javascript files that I have already included on my main page (example: the jquery library, That will mean i am loading it twice.
When I mean requires javascript for its content I have a few modal boxes etc that open when content is clicked. These use the Jquery library)
Your problem is most likely that you need to add the defer attribute to the script tag, which defers executing the script until the content is loaded.
see here
you should not have to load the scripts a second time.
EDIT: The A-Z.php page references
external javascript files that I have
already included on my main page
(example: the jquery library, That
will mean i am loading it twice.
Simply omit them from the a-z.php page then. If they're already included on the main page, they'll be available to the a-z.php script when it's loaded in via ajax. However, I suspect any onload or $(document).ready() calls won't work quite right. I'd try to remove as much JS as possible out of the a-z.php page.