I would like to refresh only one section of the website. It is only one value that I get from Siemens PLC. I receive actual current value, which I want to update on my website.
HTML looks like this:
<table class="tablePowerCurrent">
<tr>
<td>
<p class="Current">:="Var".Point_1.CurrentNow: A</p>
</td>
<td>
<p class="Power">:="Var".Point_1.Power: kWh</p>
</td>
</tr>
</table>
Right now I'm doing it with iframes. The table here is placed inside another html, which I use with the iframe in my main html. The iframe has meta refresh.
But now I would like to use script or something similar, to refresh the value.
The easiest solution is to place a JS script that will call the Siemens PLC server and get
setInterval(function()
{
// Update the Current value
$('.Current').load("https://siemens.com/api/call");
// Update the Power value
$('.Power').load("https://siemens.com/api/call")
}, 100000) // Repeat the refresh every 10sec
Remember that the API call must return a string or a single value because the code will replace the div value in the HTML with the response that will get by that API call (data). Jquery is required
Related
I have two pages: index.php and app.php
on first page (index.php) are placed elements for which I want to change css style value like font size. so on first page is located: .options-parameters-inputelement.
on the second page (app.php) is my options panel with inputs where i can input font size value for the desired element. in this case input is textarea #heretype
please see the code:
<div id="one">
<div class="options-parameters-input">
This is testing
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td>Type font size</td>
<td><textarea id="heretype"></textarea></td>
</tr>
</table>
$("#heretype").on("keyup",both);
function both(){
$(".options-parameters-input").css("fontSize", this.value + "px");
}
jsfiddle example: http://jsfiddle.net/gxTuG/106/
My problem is how to transfer new css style value from one page (app.php) to another (index.php) ? because inputs are located in app.php page while desired elements are in index.php.
I hope you can help me
Thank you
You can achieve two ways:
Server side:
You can stored the value in database(permanent). Then next page you can apply in css.
Client side:
You can stored the value in query parameter, cookie or local storage(temporary). Then next page you can apply in css.
As James Monger said, this isn't directly possible. However you can save the changes via PHP (to session or to database). Then when the user opens index.php a different <style>...</style> will be generated based on the saved setting. The setting can be saved by using a form or an ajax call (more complicated).
You can also write to a cookie directly from JavaScript and read it on another page
You can't update css of one page using javascript code from another page. Although what you could do is have an identifier to be shared between the pages. That could be lets say a url param saying index.php?fontsize=10 and app.php?fontsize=10.
Then you can get the value of the param fontsize in your code on either pages and set it to the desired value and pass it around using javaScript.
You can have a default value for the fontsize at starting of the app or have a check saying if param fontsize exists or not in your javaScript code.
Follow this answer of mine.
Alternatively you can make use of localStorage -> Window.localStorage() or cookies -> Document.cookie().
I would suggest going by either the URL param method or setting a localStorage object fontSize and update it whenever needed if you don't want to go with server side code and push the value of fontsize in db.
I use a tool called "webiopi" to control a wellness device via a Raspberry pi and a relay board. This tool connect buttons on a webpage with a Python script.
I can read the state (low/high) from the GPIO pins on the buttons i've created.
What i want is to show values from the script in the browser.
(Like ' temperature_measured' or. 'Calculated_time')
Is there a way i can show output from the python script to the webbrowser?
button = webiopi().createMacroButton("macro", "Normaal", "Prog1");
$("#top").append(button)
<div id="content" align="center">
<td>
</td>
{{print here output from script.py}}
<div id="top"></div>
</div>
</div>
You could use PHP to call the script and echo the output to the page. You'll need PHP installed and enabled, and the file must end with .php. If you know the webserver you are using, I can give you some additional help. Also note that the script should print all information it wants on the web page into standard output.
button = webiopi().createMacroButton("macro", "Normaal", "Prog1");
$("#top").append(button)
<div id="content" align="center">
<td>
</td>
<?php exec("python myscript.py", $out); echo $out; ?>
<div id="top"></div>
</div>
</div>
In a this forum [Wpio forum][1]https://groups.google.com/forum/#!topic/webiopi/DreW_74gm0o
gives Pete Dudash the answer to this question, which i copy here
Yes, this is possible. What you’re looking to do is add a callback routine to your javascript. First you execute some action in javascript (either from a button press or a timer) and call a python macro. This time, you specify a call back routine when calling the macro. The call back routine receives data from the macro and then you can do whatever you want with it.
Javascript:
function getPythonResponse() {
// "sendData" is the name of the macro you specify in your script.py
// "[]" is an empty list. If you want to send data for the macro to use, you would include that here
// "handlePythonResponse" is the name of the callback routine that will execute once the python macro is finished
webiopi().callMacro("sendData", [], handlePythonResponse);
}
var handlePythonResponse = function(macro, args, response) {
// "response" is the variable that holds the data from script.py
// Now we can apply those results to the webpage by assigning the value to the "pythonResult" id. This is the element in your HTML where you want to print the info.
$("#pythonResult").text(response);
}
Python:
#webiopi.macro
def sendData():
HTML:
<div id="content" align="center">
<td></td>
<span id="pythonResult">{{print here output from script.py}}</span>
<div id="top"></div>
I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!
Code block 1 (head):
<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????
;}, 2000); } </script>
Code block 2 (div 1):
<input type='button' value='UPDATE' class="btn" onclick="auto()"/>
Code block 3 (div 2):
<tbody id="doRefresh">
<c:forEach var="sensor" items="${listSensors}" varStatus="status">
<tr class="listData">
<td>${sensor.fileName}</td>
<td>${sensor.date}</td>
<td>${sensor.time}</td>
<td>${sensor.channel1}</td>
<td>${sensor.channel2}</td>
<td>${sensor.channel3}</td>
<td>${sensor.channel4}</td>
<td>${sensor.channel5}</td>
<td>${sensor.channel6}</td>
<td>${sensor.channel7}</td>
<td>${sensor.channel8}</td>
</tr>
</c:forEach>
</tbody>
I have been to the following pages for inspiration (and more):
1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript
Thank you
Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().
Method replaces all the html within the selector with new html from server by simply passing in a url.
/* within interval function */
$('#doRefresh').load('path/to/server/script', function(){
/* new html has been inserted, can run any html related code here*/
});
Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>
Reference: load() Docs
I'm developing a project of "prettifying" of a part of an existing web application. There is a need of putting the existing code: search criteria form in one div, and search results in another div (forming a kind of tabs, but that's another story).
Using jQuery I was able to manage that, but right now I am struggling with the results page, which by itself is yet another form that auto-submits to another file (using document.form.submit()), which is the final search results view. This auto-submit causes that the final view quits the destination div and loads as a new page (not new window).
So, the flow is like that:
First file, let's call it "criteria.html" loads the search criteria form (inside of a div) + another div (empty) destined to be filled with search results.:
<div id="criteria">... form with search criteria here...</div>
<div id="results"></div>
On submit, using jQuery's "hide()" method, I hide the first div (surrounding the search criteria form), and make Ajax call to the second file, let's call it "results.php":
<script>
$("#criteria").hide();
$.ajax({
...,
url: "results.php",
success: function(data){
$("#results").html(data);
},
...
});
</script>
results.php searches according to given criteria, and displays an "intermediary form" (which returns as a data result of the ajax query above) with a lot of hidden fields, and at the end executes:
<script>document.form.submit();</script>
which submits to another file, let's call it "resultsView.php"
This line causes that a result page shows outside the div "results", as a new page.
As there is a lot of logic in those files (more than 700 lines each), the idea of rewriting this monster just gives me creeps.
And now the question: is this a normal behavior (opening the result outside div)?
I tried removing the document.form.submit() code and everything works fine (well, without showing the results from "resultsView.php"). It's this line that causes the viewport to reset. I also tried with empty pages (to eliminate the possibility of the interaction with contents of the pages) - still the same result.
I hope there is not too much text and the problem is clearly stated. Every suggestion of how to fix this will be greatly appreciated.
If I understand your question correctly, you need to process the final submit using ajax instead of <script>document.form.submit();</script> so that you can handle the results on-page. Traditional form submits will always reload/open the action page. If you want to avoid that you'll have to control the form submit response via ajax and handle the results accordingly... like you are doing with the first submit.
The only alternative I can think of is to make div id="results" an iframe instead, so that it contains the subsequent form submit. Of course, that unleashes further restrictions that may cause other troubles.
I am not sure if I understood your question, but maybe u can do something like this.
This is my JQuery script: [I just wait for the submission search. When it happens, I use the $.Post method to call a function that should return the Html results (You can include somenthing to hide any field you want using JQuery or css)].
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#searchForm").submit(function() {
var theCity = $("select#chooseCity").val();
var theName = $("input#searchInput").val();
$.post("callProvideSearchResults.php", {theCity: theCity, theName: theName}, function(data) {
$("div#searchResults").html(data);
});
return false
});
});
</script>
This is my Body: {it consists of the choice of a city, the a form to provide the name of the person you are lookng for and the place to provide the results.
<body>
<FORM id="searchForm">
<h2>Select the city: </h2>
<select id="chooseCity">
<?php
$theCitiesOptionsHTML = "cityOptions.html";
require($thePathDataFiles.$theCitiesOptionsHTML); / A large list of cities
?>
</select>
<h2> What is the name of the person </h2>
<P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>
<P><INPUT TYPE="submit" VALUE="search"></P>
</FORM>
<div id="searchResults">
<!-- Here: Search results -->
</div>
</body>
// Function callProvideSearchResults.php // Just call the function that makes all the job and echo the $Html page
<?php
include "provideSearchResults.php";
$theName=$_POST['theName'];
$theCity=$_POST['theCity'];
echo provideSearchResults($theName, $theCity);
?>
// provideSearchResults.php // Database connection and search
<?php
function provideSearchResults($theName, $theCity) {
include "databaseConnection.php";
//database Queries
// Generate $theHtml using strings or ob_start, for instance
return $theHtml;
}
?>
I have a table of 10 rows which has an image of a user in first column:
<table>
<tr><td><img src='images/35067.png'/></td></tr>
<tr><td><img src='images/35089.png'/></td></tr>
.... <!-- more rows -->
</table>
the image file name is generated by the [id] of its data record within mysql.
some users have no image assigned to them and the file dose not exists in the [images/] path.
i would like to replace the invalid images with a default existing image like
src='images/default.png'
i have some conditions that the action must be done on the client side, not on server-side and it could be done aether with CSS or java-script.
This would work
<img src='images/35067.png' onerror='this.src="images/default.png"'/>