I am using a raspberry pi to pulse a relay (on the below form submit) to another piece of equipment which if successfully pulsed will toggle a relay on/off. The toggled relay comes back to the pi as an input which is being monitored on the status.php page inside of the loading div. If I load the below page, it correctly displays the status.php, but after pressing the form submit button, it does not reload the status.php page. I have tried everything I can think of, please help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alarm Panel</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#loading').load('/status.php');
}, 2000);
});
// ]]>
</script>
<?php
if (isset($_POST['PULSE'])) {
shell_exec('python /usr/lib/cgi-bin/pulse.py');
}
?>
</head>
<body>
<div id="currentstatus" data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed="false">
<h1>Current status</h1>
<div id="loading" align="center">
<H3>Loading Status...</H3>
</div>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4>Change Status</h4>
<form method="post">
<input type="submit" name="PULSE" value="PULSE" />
</form>
</div>
</body>
</html>
status.php
<?php
$status = shell_exec('python /usr/lib/cgi-bin/status.py');
?>
<h3><? echo $status; ?></h3>
<br />
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
have you tried manipulating submit behavior? that may fix it.
$(document).on('click', '[name="pulse"]', function(e) {
e.preventDefault();
$('#loading').load('/status.php');
});
you may also try changing your timeout function... That's a bit tricky because load is an asynchronous function.
var loadStatusTimeout;
function loadStatus() {
$('#loading').load('/status.php', function() {
loadStatusTimeout = setTimeout(loadStatus, 2000);
});
}
loadStatusTimeout = setTimeout(loadStatus, 2000);
also, you're accidentally adding semicolons into your img element:
change:
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
to:
<img src="/img/<? print $status; ?>.jpg" height="250" width="250">
Related
I work on php and javascript. Now I want to call the javascript functionalities in my php code but it is now working. the code of php that execute the javascript code is
echo '<script type="text/javascript">
alert( document.getElementById("popup"));
document.getElementById("popup").style.display = "block";
document.getElementById("popup").classList.toggle("active");
</script>';
but the alert gives a null value and does not execute the code of html. the code of html is
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<!-- <div class="close-btn" onclick="closePopup()">×</div> -->
<div class="row">
<div class="col-lg-12 col-md-9 col-sm-12">
<img width="200" height="200" src="https://cdn.dribbble.com/users/2469324/screenshots/6538803/comp_3.gif">
<h2 id="errorHead">fields are required</h2>
<p id="errorMessage">
All fields are required. fill all fields
</p>
<button style="background-color: darkgreen; width: 130px; margin-top: 5%;" class="btn btn-success radiusChange backgroundChange" onclick="closePopup()"> Close</button>
</div>
</div>
</div>
</div>
how I execute this code, basically it is the popup that I want to run. please give the way to solve this problem.
You have to wait for the document to be completely loaded before accessing its nodes.
May you try echoing the following ? You should get the #errorMessage content, ie you are now able to access the popup node and do your stuff
<script type="text/javascript">
window.onload = () => {
alert(document.getElementById("popup").querySelector("#errorMessage").innerText);
//you can deal with the popup node :)
};
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Call JS Code</title>
<?php
echo '<script type="text/javascript">
alert("Execute Javascript Code");
</script>';
?>
</head>
<body>
</body>
</html>
So I hope I'm asking this correctly.
I have content from a php file being loaded into an html page. The php file contains the info for a collapsible set. The popup does not work for the data sent back from the php file once i change the html of the popup div.
Is this because the content did not exist when the page was initially loaded? If this is the case, how do I go about loading this content. I'm really trying to keep the php off the main html pages if at all possible. Although I'm starting to realize this may not be possible. Any help with this would be greatly appreciated.
Here's my html page (this page is loaded after an initializing page is submitted)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>theClipboard: Count</title>
<link rel="stylesheet" href="../inc/stylez.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">
<div data-role="header" data-position="fixed" class="ui-grid-c">
<div class="ui-block-a">
<a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
<div id="loadCatMenuHere">
<!--<div id="categoryMenu" data-role="popup" data-theme="b">
<p>is it working</p>
</div>-->
</div>
</div>
<div class="ui-block-b">
<p>location menu</p>
</div>
<div class="ui-block-c">
Go Back
</div>
<div class="ui-block-d">
<p>validate counts</p>
</div>
</div>
<div data-role="main" id="countPageContent">
<h3> content goes here</h3>
</div>
<div data-role="footer" data-position="fixed">
<p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->
<script>
$(document).ready(function(){
console.log("page 2 loaded");
getCategoryMenu();
function getCategoryMenu() {
var getCatMenu = $.post('categoryMenu.php');
getCatMenu.done(function (data) {
console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
$('#loadCatMenuHere').html(data);
console.log("#category menu data: " + data);
});
getCatMenu.fail(function (data) {
console.log("failed at getting cat menu:");
});
}
})
</script>
</body>
</html>
here's my php file i'm pulling from
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<?php
include("../inc/connect.php");
session_start();
$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);
$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";
while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
<h3>" .$family ."</h3>
<ul><li>test</li><li>test2</li><li>test3</li></ul>
</div>";
}
echo "</div></div>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference.
I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval.
(some pseudo code):
if (myDiv is not undefined) { do stuff } else
{ setInterval(thisSameFunction, 2000); }
I'm a dummy in HTML.
In my project, I want to use ACE editor to allow the user editing and saving a file.
I succeed to load the file, and to open it with ACE editor.
The problem is how to save it.
For this part, I need your help.
Here is the code I wrote to use ACE.
<?php
if(isset($_POST["save_modification"])){
$file = "./".$_POST["file_name"];
$file_ptr=fopen($file,"w");
fwrite($file_ptr,$_POST["content"]);
fclose($file_ptr);
}?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<title>Test</title>
</head>
<body>
<div class="site">
<div class="header">
<span>Test</span>
</div>
</div>
<div class="clean"></div>
<div class="corp">
<div class="corp_ctn">
<h1>Edit a file</h1>
<div id="content" class="paragraphe">
<?php
$dir=opendir("./");
while($file=readdir($dir)){
if(!in_array($file, array(".",".."))) {
echo '<div style="float:left; margin:0 10px; text-align:center;"><a href="?f='.$file.'">';
echo $file;
echo '</a></div>';
echo '<br/>';
}
}
?>
<br clear="all"/>
<?php
if(isset($_GET["f"])) {
echo "<h1>{$_GET["f"]}</h1>";
$file = "./".$_GET["f"];
$content = file_get_contents($file);
?>
<form method="POST" action="index_select_lua_script.php">
<div id="editor" name="content" style="width:100%;height:200px;">
<?php echo $content ?>
</div>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.getSession().setTabSize(4);
editor.setHighlightActiveLine(true);
editor.resize();
</script>
<input type="hidden" name="file_name" value="<?php echo $_GET["f"] ?>" />
<input type="submit" name="save_modification" value="Save modification" />
</form>
<br/><br/>
<?php
}
?>
</div>
</div>
</div>
</div>
When I save my modification, using the save button, the content is empty.
Please, do you have an idea of how I can do it?
Thank you
The HTML5 Filesystem API handles tasks like this quite well now. There are a few ways of capturing the contents of the editor area, and once you've done that you can save it.
Look at something like:
http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://www.html5rocks.com/en/tutorials/file/filesystem/
Can't remember where, but you can ZIP files together using JS now as well, if you so wish.
I have a simple login form like below, with an attached jQuery script. I'm trying to make some simple client-side form validation using jQuery. I can't seem to get the blur event to fire, however. I can't think of what I'm doing wrong, I've tried using '.on('blur', fn(){})' but that doesn't work either. Please help!
Here's my HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DMIT 222 - Catalogue Project: Admin Login</title>
<link rel="stylesheet" type="text/css" href="../styles/divs.css" />
<link rel="stylesheet" type="text/css" href="../styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="../styles/tags.css" />
<link rel="stylesheet" type="text/css" href="../styles/tables.css" />
<link rel="stylesheet" type="text/css" href="styles/forms.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../scripts/loginFormValidation.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Ship Catalogue</h1>
</header>
<div id="mainContent">
<form id="LoginForm" name="LoginForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="FormRow"><label for="Username">Username:</label><input type="text" name="Username" id="Username" /><p id="userErrors"><?php echo $userErrors; ?></p></div>
<div class="FormRow"><label for="Password">Password:</label><input type="password" name="Password" id="Password" /><p id="passwordErrors"><?php echo $passwordErrors; ?></p></div>
<div class="FormRow"><input type="submit" name="Submit" value="Login!" /></div>
</form>
</div>
<footer>
Site Developed by Logic & Design
</footer>
</div>
</body>
</html>
And here's the loginFormValidation.js script:
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
You need to wrap your events inside jQuery's document.ready function:
$(document).ready(function() {
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
});
Either add your jquery blur code inside
$(document).ready(function() { ...// your blur code here }
OR
at bottom of your page above closing body tag like:
<script type="text/javascript">
//your blur code
</script>
</body>
It works if you add some content to alert. The JS engine threw an error because the alert function was being called with no parameters. I would also recommend binding the event with document.ready()
$(document).ready(function(){
$("#Username").blur(function(e){
alert("something");
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
});
Example: http://jsfiddle.net/PfnGv/
I'm a newbie in Jquery. I'm trying to print text on a document dynamically. I have a JavaScript function that is supposed to display images using the jQuery prettyphoto plugin. My function does not show the images but when I paste the code on a html file it works fine. Please help. A sample of my code is here.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
<script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
});
function showImages()
{
var stringData = '';
stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
'<img id="not-hidden" src="images/sample-album-2.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-3.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></div>';
document.getElementById("content").innerHTML=''+stringData+'';
}
</script>
</head>
<body>
<div id="header"><div id="app-logo-image">
<img src="images/app-logo.png" id="app-logo"/></div>
<div id="header-form">
<input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
<input type="submit" id="search-button" name="" value="Search">
</div>
</div>
<div id="container">
<div id="sub-header-menu">
<div id="music-albums">
<img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
<div id="genres-icon">
<img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
<div id="artist-icon">
<img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
<div id="home-icon">
<img src="images/home-button.png" id="home-icon-image"/></div>
</div>
<div id="content" style="left:0%;">
click me
</div>
</div>
</body>
</html>
Your showImages function isn't executed until the link is clicked, however the prettyPhoto initialisation is only run once when the document finishes loading, and since showImages hasn't been run yet prettyPhotos can't find and enhance those images.
If you add this to the end of showImages everything should work:
$('#content a').prettyPhoto({theme:'facebook'});