I am working on the basics of learning how to control Raspberry Pi GPIO from a web server. However, I am running into a problem. Here is my current set up.
index.html, the main webpage
<html>
<head>
<meta charset="utf-8" />
<title>Blink</title>
</head>
<body style="background-color: white;">
<!-- Button to call blink -->
<button type="button" onclick="blink()">blink</button>
<!-- javascript -->
<script src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
script.js (where the I call php.php through ajax)
function blink() {
$.ajax({
url:"php.php", //the page containing php script
type: "POST", //request type
});
}
php.php, where I control the GPIO
<?php
exec("gpio -1 write 11 1");
sleep(1);
exec("gpio -1 write 11 0");
?>
Currently, the code works as far as controlling the GPIO works. I have an LED hooked up and it lights up and everything. However, I am receiving a dialog box in Chrome after every time the php file is done running. The dialog box is blank, and I assume it has something to do with either Ajax or Jquery returning an empty value. This is where my knowledge is lacking, and I would appreciate if someone could help me suppress this dialog box. Thank you!
Related
Why I can't reload the same page after I create two cookies by setcookie() function?
The page kept on loading to timeout after reload,no any error message in apache log and nothing in chrome developer tool.
The problem maybe crashed with javascript,because I removed the line in HTML,the page can load,any method to correct this bug?
this is code:
<!doctype html>
<html>
<head>
<?php include "**cookie2.php**";?>
<!--other content in head-->
</head>
<body>
**<!--a button onclick will run cookie1.php-->**
<!--other contents in body-->
<script src="**readcookie1.js**" language="javascript"></script>
</body>
</html>
in file **cookie1.php**
{
**setcookie("login",1,0,"/");**
}
in file **cookie2.php**
{
**setcookie("pageView",0,0,"/");**
}
in file **readcookie1.js**
{
//use **document.cookie** to get cookie2
}
oh,I found the problem.
My function to read cookies in javascript had bug,so process stuck there.I have revised it.
1)test.vbs
Function demo()
msgbox "Welcome to Follow Tutorials"
End Function
2)test1.html
<meta http-equiv="x-ua-compatible" content="IE=10">
<title>Follow Tutorials</title>
<script type="text/vbscript" src="test.vbs"></script>
</head>
<body>
<h2>Placement of VBScript in head section</h2>
<input type="button" onclick="demo()" value="Follow Tutorials"/>
<p>Click to see event </p>
</body>
Above is the code i am trying to run as a simple example .The function demo() is in separate file test.vbs which i want to call fro html page on click of button.
I am using IE11 and vbscript is not supported by IE11.So is there a way i can call a vbs file from javascript in html?
Please note if removed html tag in this post as it dint allow me to post the question
IE11 is trying to remove support for VBScript so adding <script language="vbscript"> will not work. Looking at this question should help you figure out a workaround. Please post your workaround to your question if you come up with one.
My problem seems pretty easy but I'm kinda new to web programming, so here it is :
I want my button to refresh the page, pass some GET parameters to trigger a PHP action and I don't want the screen to scroll on top of the page.
What I'm using at the moment is a mix of ajax and javascript, it does what I want but it's not reliable. Here's what I remember of the code (I don't have the code at hand)
<?php
echo '
<span href="$.ajax(\''.$_SERVER['PHP_SELF'].'?do=dosomestuff\'); setTimeout(function(){windows.location.reload()},100);)> ... </span>';
?>
I have three issues with this implementation :
I feel it's overkill to use ajax when a href would maybe do the job
A friend of mine tested it and he got the firefox pop up ("To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier") everytime he hits the button. I read it comes from POST data passing, but I only use GET data.
On some computers, the button doesn't work everytime. It's random, maybe the delay is not big enough. How big can the delay be so that I'm 100% positive it will work everytime but at the same time it's not noticeable for the user ?
Thank you for your help and advices !
Edit : following Tularis' advice, here's the code I came up with, but I can't manage to make it work
<?php
if (isset($_GET['do']) and $_GET['do'] == 'swap')
{
rename('img1.jpg', 'img3.jpg');
rename('img2.jpg', 'img1.jpg');
rename('img3.jpg', 'img2.jpg');
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#spanLink").click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=swap');
});
});
</script>
</head><body>
<img src="img1.jpg" width="300" height="300" alt="cat">
<img src="img2.jpg" width="300" height="300" alt="dog">
<span style="cursor:hand;" id="spanLink">Some text to click</span>
</body></html>
First of all, don't combine html-links with javascript inside them. That's bad form (and leads to exactly the problem you're having). Instead I suggest using jQuery and linking the onClick event handler to the span element like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$.('#spanLink').click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=somestuff');
});
});
</script>
</head><body>
<span id="spanLink">Some text to click</span>
</body></html>
I suggest you to use ajax and jQuery where you can easily get the new content and update it anywhere you want in page without reloading the complete page.
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
On my site a number of operations can take a long time to complete.
When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.
Ideally I would like to say something along the lines of:
$("#dialog").show("progress.php");
and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).
Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.
This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.
Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox.
In fact I don't even see the "Please Wait..." text.
Here's the code I am using:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
<div id="please-wait">My Dialog</div>
<script type="text/javascript">
$("#please-wait").dialog();
</script>
<?php
flush();
echo "Waiting...";
sleep(20);
?>
</body>
</html>
You'll need to run that piece of code immediately after your <body> tag, something like:
<html>
<head>
</head>
<body>
<div id="please-wait"></div>
<script type="text/javascript">
// Use your favourite dialog plugin here.
$("#please-wait").dialog();
</script>
....
</body>
</html>
Note I omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.
I've done this before and works great, even if the page has not finished loading yet.
EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.