My app is doing large amount of database queries and it holds the loading page blank white while doing it. I was wondering if there is anyway I can show the loading icon during the query.
<?php
//large queries
//if all queries pass
//do the redirect
header('Location: index.html');
//else show login screen.
?>
<html>
//show login screen….
</html>
My question is how to show the loading icon when php query database
Thanks.
redirect user to a loading page 2. make an ajax request to the actual content script (does the heavy lifting) 3. when content is ready replace part of the loading page with actual content
Example of a loading page: (index.php returns content of body -element for the page)
<script>
$(document).ready(function() {
$.get("index.php", function(data) {
$("body").html(data);
console.log("page was loaded");
});
});
</script>
<html>
<body>
page is loading // <- shown while loading the page
</body>
</html>
note: example above expects that jquery is included
Related
I have an iframe that contains an upload.php file in my page. So i want my page to refresh once when an upload in the iframe is complete. However, my page refreshes continuously whether or not i have clicked the upload button..Help please
Here is my code...
<script>
var up = document.getElementById("upload");
function iloaded(){
window.location.reload();
}
up.onload = iloaded();
</script>
and here is the iframe
<iframe style="display:none" id="upload" src="upload.php"></iframe>
the upload is successful though but the page refresh is the issue here..
I have got the answer simply add this code to the upload.php file and leave out all the other js functions.
Here is the code..
if(upload==true){?>
<script>
window.top.location.reload();
</script>
<?php}?>
Does the job.
I am trying to visit a website and log in automatically.
After this, I want to return whether or not this was a success or failure, but I can't get it to work. The page loads blank and nothing happens.
Note: I have deliberately greyed out the URL.
Below is my attempt,
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<TITLE>Login</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<script type="text/javascript">
$(document).ready(function () {
runLogin();
});
function runLogin(){
alert("start");
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").submit();
}
}
</script>
If you want to test your login form, use Protractor or other e2e test framework, but this way does not seem very safe.
http://angular.github.io/protractor/
It's loading a blank page because your back-end script isn't redirecting back to the page you started on. One option is to send the current webpage URL as an extra field to the login form so that it can redirect back after it has logged in. This will require you to refactor your back-end code so that it can handle this extra information (not really possible if you're using j_security_check). Another option is to make an AJAX request to your login page so that it doesn't actually redirect the page, it just submits the form quietly and then JS handles the response.
If you want to add the URL of the current page to the login request, do this:
function runLogin() {
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").append(
'<input type="hidden" name="url" value="'+window.location.href+'"/>'
);
jQuery("#loginForm").submit();
}
}
If you want to use AJAX to send a login request:
function runLogin() {
var $form = $("#loginForm");
$.post($form.attr("action"), $form.serialize(), function(data) {
// login successful/unsuccessful message displays
// depending on what "data" contains
});
}
Im trying to load a html page on a div class on my page, but my html page have just a script src ... but is not loading the page on div class ...
This is my code:
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$(".Ads_Banner").load("/home/funny/public_html/template/ads_template.php");
});
This is in my html page ( what im trying to load ) :
<script type="text/javascript" language="javascript" charset="utf-8" src="http://adspaces.ero-advertising.com/adspace/113423.js"></script>
If in the html i put just "Text" is working but when i try to load the script is show me blank ... hope someone can tell me how i can make this so ads to be loaded after the website is done loading ...
i am creating an ipad app
i have a side navigation, and then a main window. user will click links in the navigation and pages will load up in the main window.
i use ajax to dynamically load my pages in my main window, but when my pages load they do not load with their own css or js files, which i have linked in the page html file.
instead i belive they take on the CSS of the entire site.
i have read i can use 'loadobjs' to load my CSS and my page loads dynamically.
how can i use that with my code?
a reply will be greatly appreciated
thank you
code provided below:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
This doesn't directly answer your question, but my recommendation is for the outer page's CSS to have all the necessary information for each child page you load.
Also, you shouldn't load entire HTML documents via AJAX; your DOM would end up looking something like this (which is bad)
<html>
<head>...</head>
<body>
<div id="ajax_panel">
<html>
<head>...</head>
<body> Content </body>
</html>
</div>
</body>
</html>
Instead, modify your inner documents to only contain the information that should be in your div#main_content_inner.
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>