I use RichFaces to develop some web pages, basically I'd like to display a list of my data with DataTable. But my manage bean will take a long time to obtain resource data, which blocks the web page display.
My goal is to dynamically display them, First display the web page (maybe no data yet), then once my manage bean reads one new data, it displays this as a new row in my DataTable, any idea how can I do that? or maybe a similar example is appreciate.
Load the page then fetch data using JavaScrip via an Ajax call. Ajax is very easy to implement using jQuery.
jQuery Ajax Documentation
Example: Untested!! But its something like this..
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
// Run on page load
$(function() {
$.ajax({
url: "getMyData.html",
type: "GET"
}).success(function(data) {
// My data is in "data", if it is html then
$("#myDiv").html(data);
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="myDiv"></div>
</body>
Related
My company is launching a Marketo campaign landing page to promote a microsite/testing tool I have built. I have a basic understanding of Marketo, but that is it.
We want to include some stats on the page using live data from my app, I can easily build an API to get this data, and based on what I have read I can show it in the Marketo landing page using a custom code filed.
I am trying to find proof that the code field can handle JSONP, but I can't seem to, I am hoping someone here could validate that it does.
Essentially I would want to put something like this in the code block:
<script>
// this is pseudo-code
function show_stats(json){
$("#holder").text("stuff from json")
}
$( document ).ready(function() {
$.ajax({
url: "https://myapp.mycompany.com",
dataType: "jsonp",
jsonpCallback: "show_stats"
});
});
</script>
<p id="holder"></p>
If by code field you mean the custom HTML element in the landing page editor - the docs indicate that you can put any scripts in there. I haven't tried exactly your pseudo-code, but anything I've tried putting in one has rendered as expected.
Also, at the template editor level of a Marketo landing page template, it's just a normal HTML document with some extra classes thrown in, so you can put whatever code you want in there - so I don't see any reason why that wouldn't work.
The only thing that you might run into trouble with JSONP stuff, is possibly cross-domain CORS issues?
I'm totally new to RESTful API and html and was wondering if I could get some advice.
Basically, I've made an application with a restful api using RestX, see picture, that can succesfully retrieve info, like a list of strings with node addresses.
And I want to make a HTML page that looks roughly like this (mockup):
I'm totally unsure how to actually do this however. Also, I'm unsure of how to display, for example, the list of strings I've received. In the mockup, the list of registered nodes should dynamically be made from the list received from the application, for example.
I've made a sample HTML text file (from another overflow post), but that doesn't really do anything...
See code:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.get( "http://192.168.59.130:8080/api/#/ui/api-docs/#/operation/list/GET/___list___nodes", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I'm lost, can anybody help?
Currently you are not using the REST APIs, but the URLs to access Restx UI interface.
The first thing you should do is to update the URL you are using to something like: http://192.168.59.130:8080/api/list/nodes
You'll get back a list of entities (at least, that's what the name of the API method suggests) in json that you can use in your javascript to populate the HTML form.
I need to remotely control a solenoid with an Arduino, from about 2000 feet away. So far, it works: I designed a control circuit that fires based upon a logic-level signal from pin 9.
My problem: the initial Arduino code sent up a web page over ethernet each time the form was submitted, but if the user tried to toggle the state too quickly, the transmission was interrupted and the whole system puked. It was also slow to load.
My attempted solution: I created an HTML document on a local page to do what I need done, and indeed it does: I can control the Solenoid. However once the links which control the commands are submitted, there's no redirect back to the local control page, and after much Google-fu I can't seem to implement it in this way. Is this possible? Is this a good approach?
<HTML>
<HEAD>
<TITLE>Sensor-Cleaning Control</TITLE>
</HEAD>
<BODY>
<H1>Solenoid Remote Actuation</H1>
<hr />
<br />
Turn On Solenoid
Turn Off Solenoid<br />
<button type="button" onclick="location.href='http://192.168.0.88/?sol_on'">On</button>
<button type="button" onclick="location.href='http://192.168.0.88/?sol_off'">Off</button>
<button type="button" onclick="location.href='http://192.168.0.88/?toggle'">Toggle</button>
<br />
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</BODY>
</HTML>
So if the Arduino sees "sol_on" it turns the solenoid on; "sol_off" off, and you can guess what "toggle" does. I'm pretty comfortable coding, but I know nothing of javascript, CSS, or PHP. I'm not afraid of implementing those, it just needs to be clear for me to do so. Note that there's some redundancy in the code above, I left it so that I could test multiple approaches to the UI.
If I'm understanding you correctly, your best approach would probably be to use Ajax, where your web page uses an asynchronous Javascript call to do the toggling/on/off.
Effectively, you have the web page as shown, but instead of links to the Arduino "pages", clicking each link fires off an asynchronous request to the Arudino page, leaving your current page in the browser while still prodding the URL on the Arduino web server.
If you're not that familiar with Javascript, possibly a sensible approach would be to use jQuery, a Javascript library which insulates you somewhat from differences between browsers, and encapsulates things like Ajax requests quite nicely.
Here are some simple steps:
1) Download the latest production jQuery. I'm using 2.0.3 from here for this example.
2) Put it in the same directory as your web page, so we can include it easily.
3) Convert your web page to use Ajax with jQuery. (I've also converted it to something a little closer to the current web standard, HTML5):
<!DOCTYPE html>
<html>
<head>
<title>Sensor-Cleaning Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include jQuery so we can use its simple goodness -->
<script src="jquery-2.0.3.min.js"></script>
<script>
/* This function will be called by the onclick handlers of the buttons */
function solenoid(url) {
// Use jQuery's Ajax functionality to prod the given URL without
// reloading this page or visiting another one:
$.ajax(url);
}
</script>
</head>
<body>
<h1>Solenoid Remote Actuation</h1>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_on');">On</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_off');">Off</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?toggle');">Toggle</button>
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</body>
</html>
The main things to note are:
1) The inclusion of the jQuery library, so we can use its ajax() call and fire off http requests in the background with ease no matter which browser we're on.
2) I've replaced your existing onclick events with a call to a new function called solenoid, that takes a URL as a parameter.
3) The solenoid function, defined in the <script> at the top, takes the URL that was passed in and uses jQuery's ajax() call to poke the given URL. This happens in the "background", i.e. without any page (re)load.
From here, you could expand this in all sorts of ways. This code could, for example, read a short response from the Arduino and handle it in the background, too, perhaps indicating the current state of the solenoid.
(Given the simplicity of what I'm doing here, I'm sure this could be done in a more "lightweight" way in pure Javascript without jQuery, but that would have involved a chunk more slightly scary code in this example to ensure the Ajax stuff worked in many different browsers -- there's some browser inconsistency in how the underlying object (an XMLHttpRequest) used by Ajax is created. I figured for a Javascript beginner, simpler was probably better...)
Well, i don't know your Arduino's based http server, but it certainly shall reply all requests, either with an 200 http status, that means "OK" or with any other error message like 400, that means "Bad Request". While your web application is waiting for a response, you can block (or hide) the page (or some elements) so the user will be unable to start a click-frenzy and mess up everything while he should be waiting the server's (Arduino) response.
You can use an ajax call using JQuery, so you will be able to "do something" after calling the url with your "Arduino code", either in case of success or fail.
Please see the example below:
<html>
<head>
<script src="../scripts/jquery-2.0.3.min.js"></script>
<script>
function callArduinoCode(var code) {
jQuery.ajax({
type: "GET",
url: "http://192.168.0.88/?" + code,
data: dados,
beforeSend: function() {
// Hide links, show loading message...
$("#controls").css("display","none");
$("#loading").css("display","block");
},
success: function( data ){
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
},
error: function (xhr, ajaxOptions, thrownError){
alert("Failed, HTTP Status was " + xhr.status);
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
}
});
return false;
}
</script>
</head>
<body>
<div id="controls">
<!-- your links here -->
<a onClick="callArduinoCode('sol_on'); return false;">Turn Solenoid ON</a>
<a onClick="callArduinoCode('sol_off'); return false;">Turn Solenoid OFF</a>
</div>
<div id="loading" style="display:none;">
Loading, please wait...
</div>
</body>
</html>
You can get JQuery at jquery.com
Good Luck!
No need to add any library / framework to accomplish what you need. Even you can achieve it without javascript at all. Simply add an invisible IFRAME in your HTML file with name attribute set. In following example we'll use "Arduino" as the IFRAME's name, but you can use any valid element name you'd like.
<IFRAME name="Arduino" style="display:none"></IFRAME>
Next, add target attribute on your link element (the 'A' tags) with value specified as the IFRAME's name, i.e.:
Turn On Solenoid
When you click on the link, request sent to your Arduino and resulting response will be directed to the the invisible IFRAME without navigating away from currently viewed page.
For the button element, prefix location.href in onclick handler with the IFRAME's name:
<BUTTON onclick="Arduino.location.href='//192.168.0.88?sol_on';">On</BUTTON>
Ok So I have a div that loads some data and makes the entire page load slowly. Fortunately this data can wait and I would like to load it last. I've seen the other posts like this but need a bit more help getting it to work as I am fairly inexperienced.
So for example I have:
<div id="stuff">
<?php Some PHP Here ?>
</div>
Now I have
$(window).load(function () {
$('#stuff').load('');
});
A few questions...Do I create an empty div and then fill it with the data or can I have the data in there and then specify that to load last, which would be preferred if possible.
I understand I can have a webpage loaded like $('#stuff').load('stuff.php'); but I use a variable inside the div so how would I pass it to that load function and into the php page?
I just don't know how to pass variables up to the javascript everytime that div is loaded as it's in a while loop.
Thanks for the help.
Because javascript processes on client side and PHP runs on server side, you cannot do PHP operations on HTML that have already been loaded (page has already been sent from server to client, so it is not reachable by PHP anymore).
Bacause of this fact you are going to need javascript AJAX for this.
Because you are beginner I suggest you use an ajax function from jQuery javascript framework for this matter. It works the same as javascript function and handles many operations automatically.
As you correctly presumed, you can first display your empty div and then, ... after page is fully loaded, you can call your ajax.
This ajax basically asks PHP script to provide loaded page with data that will be displayed in specified html element.
Code should look like this:
Include this to your PHP file with content that you load:
<script type="text/javascript">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js</script> <!--loads jquery framework-->
<script type="text/javascript">
$(document).ready(function() {
//when page is loaded
$.ajax({
url: "ajax.php" //script with your data selection
}).done(function(data) { //when ajax call success
$("#ajax-element").html(data); //insert data returned from ajax.php into div with id ajax-element
});
});
</script>
<div id="ajax-element"></div>
This is PHP ajax file that will return data for you (just echo everything that you want to have in your "ajax-element" div, for example:
<?php
echo "some text";
?>
For more info you can find jquery AJAX specification here.
In the html form given below, the user posts a value resid1, which is matched with the resid stored in the database.
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<form name="form1" method="post" action="honda.php","tomcat\webapps\blazeds\e2.html">
Now if you will see the action field in the form, i want to post this value of resid to two different forms. Is it possible. Nd secondly, honda.php is in the htdocs folder of the Apache webser thus the value is easily posted, but the e2.html file is stored in Tomcat Blazeds folder. Thus i am unable to post value in this html.
Please if any one can help me ASAP. This thing have stuck me from the last 2 days..
The way you are attempting this is not possible. A browser will only submit a form once, to the URL specified by the action attribute. This is a fundamental browser behaviour that cannot be changed.
However, it is possible to work around the basic behaviour. In all cases you're going to require some Javascript manipulation, so it will only work if the user has JS enabled.
The basic approach would be to handle the form in the onsubmit event and manipulate it so that multiple URLs could be requested. You could utilize Ajax to make multiple requests, or you could even dynamically package the form data into another form element on the page and submit it.
Ajax would be the way I would approach it. There are excellent Ajax tools available that would facilitate this, such as JQuery.
For example, you could do something like this (I'm using JQuery here):
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
function handleForm()
{
$.ajax({
url: 'honda.php',
data: $('#form1').serialize()
});
$.ajax({
url: 'tomcat\webapps\blazeds\e2.html',
data: $('#form1').serialize()
});
return false;
}
</script>
<form id="form1" onsubmit="return handleForm()" name="form1" method="post">
<!-- stuff -->
</form>
You could do something as described here.