I want to add a loading spinner while my remote script is running and my frontend page is in "waiting for ..." state.
I only have 1 php page and one CSS . ( for the moment still in tests so I have not split script page and html page yet).
I have the following css for the loader :
Style.css edited to replace the "." with "#"
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
My page looks like this ( after cleaning it ) :
EDIT with webbm comments
<!DOCTYPE html>
<html>
<head>
<title> BETA APP HOME PAGE </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="loader"></div>
<?php
if (isset($_POST['STARTVISUREC']))
{
echo '<script>console.log("End loader spinner")</script>';
// making appearing the spinner before the call to remote server.
echo '<script language="javascript">';
echo 'document.getElementById("loader").style.display="inline"';
echo '</script>';
// calling remote APP in BE server.
$remotstarter = file_get_contents('http://192.168.56.154/WEBAPP/wa_start.php');
echo '<script>console.log("End loader spinner")</script>';
// making disappearing the spinner after the call to remote is finished.
echo '<script language="javascript">';
echo 'document.getElementById("loader").style.display="hidden"';
echo '</script>';
}
if (isset($_POST['STARTFACEREC']))
{
// calling local script for other usage.
shell_exec("sudo python AppPy/cgi-bin/test.py");
echo("Off");
}
?>
<form method="post">
<button name="STARTVISUREC">START VISU REC</button>
<button name="STARTFACEREC">START FACE REC</button><br><br>
</form>
<script>
</script>
</div>
</div>
<div style="margin-left:15%;padding:1px 16px;height:10px;">
</div>
</body>
</html>
still not OK The loading spinner is not appearing
For your case specifically, you could echo a script tag.
<?php
echo '<script language="javascript">';
echo 'document.getElementById("loader").style.display="inline"';
echo '</script>';
?>
Note that I switched around the usage of " and '. Check out the echo documentation for why this is useful https://secure.php.net/manual/en/function.echo.php
I recommend you look into ajax queries which can allow you to perform the javascript actions inside of javascript based on the server response.
Here's a basic example: https://www.w3schools.com/php/php_ajax_php.asp
Related
I have this php file which I am using to control relays attached to the gpio pins of a Raspberry pi. I works well except that the icons do not update as desired when the gpio pins change state. THey do update as desired if I click the RELOAD button on the browser. I have tried using:
location.reload(true) but it only works if I put it in the html portion of the page code as its own button. I want the location.reload(true) to execute whenever I click one of the gpio icons. Can someone help me with this? Thanks in advance from a newbie.
Here is the php code I am using:
<!DOCTYPE html>
<!--TheFreeElectron 2015, http://www.instructables.com/member/TheFreeElectron/ -->
<html>
<head>
<meta charset="utf-8" />
<title>Antenna Relays</title>
</head>
<body style="background-color: black;">
<h1><p style="color:white"><font size="7">
ANTENNA SELECTOR
</p>
</font></h1>
<!-- On/Off button's picture -->
<?php
$val_array = array(0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<4; $i++) {
//set the pin's mode to output and read them
system("gpio mode ".$i." out");
exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 4; $i++) {
//if off
if ($val_array[$i][0] == 0 ) {
echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
}
//if on
if ($val_array[$i][0] == 1 ) {
echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
}
}
?>
<!-- javascript -->
<script src="script.js"></script>
</body>
</html>
I am working on notification system. So I am following this blog (http://www.phptutorials.club/ajax-notification-in-php-with-example/).
Please see the code.
It's working fine and it's giving me a notification, but the problem is if I include the page in another index.php page, then it's giving me (error (Not Found).
I renamed the index.php as notification.php and I am including it on my website index.php page. So after including it's giving me an error but without including it's working fine.
Please suggest I know PHP but don't know about ajax and jquery,js.
Please see my code below.
notification.php
<style>
#notification_count {
padding: 0px 3px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -1px;
font-size: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function addmsg(type, msg) {
$('#notification_count').html(msg);
}
function waitForMsg() {
$.ajax({
type: "GET",
url: "select.php",
async: true,
cache: false,
timeout: 50000,
success: function(data) {
addmsg("new", data);
setTimeout(
waitForMsg,
1000
);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg,
15000);
}
});
};
$(document).ready(function() {
waitForMsg();
});
</script>
<span id="notification_count"></span>
Notifications
<div id="HTMLnoti" style="textalign:center"></div>
<script>
</script>
select.php
<?php include "../../includes/db.php" ?>
<?php
$sql = "SELECT * from comments where comment_status = 'unapproved'";
global $connection;
$select_comments= mysqli_query($connection, $sql) or die('Could not look up user information; ' . mysqli_error($connection));
$count = mysqli_num_rows($select_comments);
echo $count;
mysqli_close($connection);
?>
So after including the notification.php file in index.php.it's giving me an error.
But without including this file. it's working fine.
<!-- Notification panel-->
<?php include "../includes/notification.php" ?>
First check if your include path is correct. Try:
<?php include "../../includes/notification.php" ?>
Additionally, check the path to select.php in your ajax call
$.ajax({
type: "GET",
url: "select.php",
...
Second, you should think about splitting notification.php into three parts:
put CSS into main .css file
JavaScript code should be in notification.js
HTML code you can leave in notification.php
Then include notification.php in the index.php after you have included .css and .js files.
I have a button that allows authentication from twitter, everything works properly, but the only issue is that i wish to open the login-twitter.php page on a different tab, i tried using window.open in place of header but it didn't work. can anyone tell how it can be done
<?php
ob_start();
session_start();
if (isset($_SESSION['id'])) {
header("location: u_tasks.php");
}
if (array_key_exists("login", $_GET))
{
$oauth_provider = $_GET['oauth_provider'];
if ($oauth_provider == 'twitter')
{
header("Location: login-twitter.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<?
echo "<div class='col-md-9'>";
echo "<a href='?login&oauth_provider=twitter'><button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button></a>";
echo "</div>";
?>
</body>
</html>
i think it is helpful to you.
<button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button>
using header("Location:..."); can only do redirects. As far as I know, you'll have to do some amount of javascript or html to achieve your goal. Another problem is that browsers like to block automatically opened popups because 99% of the time automatic popups are used only by spammers. However, I'll show you a way to attempt to do this anyways:
<?php
$usingTwitter=0;
ob_start();
session_start();
if (isset($_SESSION['id'])) {
header("location: u_tasks.php");
}
if (array_key_exists("login", $_GET))
{
$oauth_provider = $_GET['oauth_provider'];
if ($oauth_provider == 'twitter')
{
$usingTwitter=1;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
<?php
if($usingTwitter){
echo "window.open('login-twitter.php');";
}
?>
<script>
</head>
<body>
<?
echo "<div class='col-md-9'>";
echo "<a href='?login&oauth_provider=twitter'><button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button></a>";
echo "</div>";
?>
</body>
</html>
Make sure you turn off popup blocking in your browser for this to work though!
I have a client who needs to output pages that are referenced by ID in a database. The pages must be output one after another (like a slide show), and there must be a slider transition effect. To make it "fun", the database will be changing as new pages are added, so a portion of the script to do all this must be run repeatedly to check the database.
I've got the pages to load, and I've got the transition working. The problem is, I can't get the polling to work because there's such a mess. That is, if I add a new page, I must manually reload the script - I need the script to detect new pages added to the database. I know that all I really need to do is just re-run the database query to generate the array, but with all the other stuff going on, I'm lost. I've tried setInterval() and even a while loop to no avail. At this point I'm sure I'm just missing something (hopefully) trivial, so I humbly ask for help. My code is VERY sloppy as I test, but here it is:
<?php
$community_id = 89;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<?php
$con=mysqli_connect("localhost","username","password","db_name");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// get all the pages that pertain to the community
$uid_query = "SELECT uid FROM pages WHERE pid=" . $community_id;
// build the javascript array by grabbing all results from above query
$result = mysqli_query($con,$uid_query);
$counter = 0;
$baseURL = "http://www.website.com/index.php?id=";
echo "var frames = new Array;";
while($row = mysqli_fetch_array($result)) {
echo "frames[" . $counter . "]='" . $baseURL . $row['uid'] . "';";
$counter++;
echo "frames[" . $counter . "] = 5;";
$counter++;
}
mysqli_close($con);
?>
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#iframe_container
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="iframe_container">
<iframe src="" name="frame" id="frame" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
... and then any given page looks like this:
javascript:
$(document).ready(function(){
$('.hidden').slideDown(1000);
});
css:
.hidden{
display:none;
}
html:
<div class="hidden">
CONTENT GOES HERE
</div>
I'm using the following code in one of my WordPress plugin files:
else if($filetype == 'swf'){
print
<<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>[kml_flashembed movie="$img" /]</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT;}
But instead of parsing the [kml_flashembed] block, it gets spit out as it is. I manually put it in my header.php file and there it rendered fine, so the problem is in the way the JavaScript is injecting it into the HTML.
Can someone shed some light on what I should change to get the tag to parse instead of getting rendered literally?
(The tag is for the WordPress Kimili Flashembed plugin.)
You can't expect PHP to replace the [kml_flashembed movie="$img" /] if you place it inside of a heredoc block
else if($filetype == 'swf'){
print <<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>
EOT;
[kml_flashembed movie="$img" /]
print <<<EOT2
</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT2;}
Try using the do_shortcode function to expand the shortcode.