Loading display while uploading file - javascript

So I got a loading screen when loading a page. That works great. My issue is when i upload files I don't want my user to be able to trigger any other events that may reload the page as the file is uploading.
Can I re-use my loading div whilst the files are uploading.
My javascript is very novice.
Any help would be greatly appreciated.
<div id="loading"></div>
<!-- Loading -->
<script>
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('loading', false);
});
</script>
Got some source code here: http://xeroharm.com.au/Test.html

Related

How to execute code on page that is not reloading

On a page eg .../something/jonas.dk there is a button when clicked goes to .../something/frank.dk but the page doesn't reload. I am trying to run a javascript code on .../something/frank.dk
if (window.location.href.indexOf("frank") != -1) {
(function () {
//Check ready state
function ready() {
console.info("DOM loaded");
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", ready);
} else {
ready();
}
// my code goes here
setTimeout(run, 1000);
ready();
})();
}
The code works fine when I manually reload the page, but how do I get the code to execute when the url changes?
(I only work with vanilla javascript 'cos we don't use jQuery at my job.)

How to check if iframe(loaded from CDN script) content has loaded

I'm adding an external CDN script in my react application, application has an id="iframe-content" and the script embeds an iframe in that id. Now I need to perform some functionality or update a state when this iframe's content has fully loaded. At the moment I'm using
window.addEventListener('load', (event) => {
callReady()
});
function callReady() {
// Get a handle to the iframe element
var iframe = document.getElementById('i_frame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == 'complete') {
iframe.contentWindow.onload = function () {
alert("I am loaded");
};
afterLoading();
return;
}
window.setTimeout(callReady, 100);
}
function afterLoading() {
alert("I am here");
}
I have also tried
iframe.onload = function(event) {
console.log('loaded')
};
Nothing actually works, actual iframe content loads after every load function. I need to be able to know when the actual iframe content has loaded. Can you please help me out here?

How to stop my scroll function once MySql has fetched all the data

This script is working fine. But, how to stop my scroll function and the scroll loader .gif (to hidden) once MySql has fetched all the data.
Or, if there is a better way to do it.
Thanks for the help!
Javascript
<script>
$(document).ready(function(){
var limit = 20;
var start = 0;
var action = 'inactive';
function load_city_data(limit, start)
{
$.ajax({
url:"ps_load_data.php",
method:"POST",
data:{limit:limit, start:start},
cache:false,
success:function(data)
{
$('#load_data').append(data);
if(data == '')
{
$('#load_data_message').html("No Data Found");
action = 'active';
}
else
{
$('#imgLoader').html('<img class="animated-gif" src="img/ajax-loader.gif">');
action = "inactive";
}
}
});
}
if(action == 'inactive')
{
action = 'active';
load_city_data(limit, start);
}
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
action = 'active';
start = start + limit;
setTimeout(function(){
load_city_data(limit, start);
}, 3000);
}
});
});
</script>
There wasn't anything involved with the 3rd party scripts and CSS (Google API script, CDN CSS and CDN script) which I thought initially.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I downloaded them all and run them locally. (Only Google API was involved, nothing to do with any CDN script)
This code is running fine. Stops the scroll and also hides the ajax-loader.gif now.
What is figured out was the problem in my url:"ps_load_data.php"
Actually I was trying to run two sql queries, and hence it wasn't hiding my gif image. When, I put the script in different file, it was working fine.
It took a lot of time and effort to understand that it was conflicting with my earlier script. Since, it didn't gave me any error, it took so long. Thanks!

Detect connection issues in iframe

this questions is related to an html file calling out different pages in different iframe tags. Is there a way, using JavaScript probably, to check if there was a connection issue to the page? If so, to try reloading this frame until the connection is established.
To be a bit clearer, if you have a look at the following link (http://tvgl.barzalou.com) (even if the content is in French, you will notice how different parts of the page load, and more often than not, loads correctly). But once in a while, during the weekend, a slight connection issue to the net arrives and for some reason, the frame gives out this ridiculous grey / light grey icon saying that there was a connection issue. Of course, when the page is manually reloaded, the frame comes back to life.
Please check the updated code that will check and reload the iframe after the max attempts have been reached...
<script language="javascript">
var attempts = 0;
var maxattempt = 10;
var intid=0;
$(function()
{
intid = setInterval(function()
{
$("iframe").each(function()
{
if(iframeHasContent($(this)))
{
//iframe has been successfully loaded
}
if(attempts < maxattempt)
{
attempts++;
}
else
{
clearInterval(intid);
checkAndReloadIFrames();
}
})
},1000);
})
function iframeHasContent($iframe)
{
if($iframe.contents().find("html body").children() > 0)
{
return true;
}
return false;
}
function checkAndReloadIFrames()
{
$("iframe").each(function()
{
//If the iframe is not loaded, reload the iframe by reapplying the current src attribute
if(!iframeHasContent($(this)))
{
//reload iframes if not loaded
var $iframe = $(this);
var src = $iframe.attr("src");
//code to prevent cache request and reload url
src += "?_" + new Date().getTime();
$iframe.attr("src",src);
}
});
}
</script>
You can schedule a code which will check whether the iframes are loaded properly or not
Consider a sample
<script language="javascript">
var attempts = 0;
var maxattempt = 10;
var intid=0;
$(function()
{
intid = setInterval(function()
{
$("iframe").each(function()
{
if(iframeHasContent($(this)))
{
//iframe has been successfully loaded
}
if(attempts < maxattempt)
{
attempts++;
}
else
{
clearInterval(intid);
}
})
},1000);
})
function iframeHasContent($iframe)
{
if($iframe.contents().find("html body").children() > 0)
{
return true;
}
return false;
}
</script>
This simple code snippet will check whether iframes in the document have been loaded properly or not. It will try this for 10 attempts then it will abort the checking.
When the checking is aborted, you can call iframeHasContent() for each iframe to shortlist the ones that have not been loaded and reload them if required.

Autosave using javascript issue

The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>

Categories