I have a web page with a switch (html & CSS) and a toggle function (JS) which changes the appearance of the switch as it is clicked. The toggle function has a 'standby' variable which tracks the status of the switch.
I also have a form (JS) which POSTs the value of standby to a cgi script (python) which will control some lights. That all works!
Except, I do not want the cgi file to respond with a new web page or even reload the current web page - I'd like to keep the page as it is - which does not seem possible with cgi!
I'm guessing cgi is the wrong approach (& this is another dumb question!)
Thanks in advance...
You can send your Form using Ajax. The easiest way is to use Jquery.
Here is a nice tutorial:
http://hayageek.com/jquery-ajax-form-submit/
You’ll need to make your request asynchronously using JavaScript.
Have a look at the XMLHttpRequest object or use a wrapper function like jQuery’s $.ajax method (especially if you want to support older browsers).
Please see this answer for an example of how to do a POST request using the XMLHttpRequest object.
Thanks for all the answers - I appreciate you putting me on the right track. I used JQuery and ajax as suggested and it is working - simple when you know how!
This is in index.html:
$.ajax({
type: "POST",
url: "/cgi-bin/standby.py",
data: {status: standby}
});
and in standby.py:
data = cgi.FieldStorage()
data = data["status"].value
Related
I'd like to download the data from a URL (which is just a text file), and then be able to use the data in JavaScript, ideally adding each line of the text file to an element of an array.
I've looked around for a simple way to do this but can't seem find anything appropriate.
You're looking for AJAX! It's a API which allows you to submit a request in JavaScript. An easy library to help you get started is jQuery.
Say you want to fetch the contents of example.com/file.txt and display it in an alert:
$.ajax({
url: "https://example.com/file.txt",
}).done(function(r) {
alert(r);
});
AJAX is great because the request is asynchronous, meaning it doesn't have to slow down the loading of the rest of your page: it runs alongside your other code.
Further documentation on jQuery AJAX.
i'm working on mobile development and developing pure JavaScript, CSS and HTML code, cant use any server side scripting like PHP, Jsp n all since i have to feed it in phone-gap. I just want to know how i can fetch the post parameters through JavaScript(like in jsp we fetch it through request.getparameter) ? please help me out guys thanks in advance.
There is no way to read POST data from the request that generated the current page using client side JavaScript.
In my mind you have the change the way your app will work. But if you really want to send your form on a page, you can use GET method and retreive parameters from the URL
http://css-tricks.com/snippets/jquery/get-query-params-object/
The normal way : on form submit you should have a JS function, and this function has to do the job.
Do not forget to use Google/Stackoverflow.com you should find your answer ;-)
How do you post a form in Phonegap?
First of all: sorry for my bad grammer. English isn't my native language, but i will try to exlpain my problem as simple as i can.
I'm working on a web-application, where user can enter a link. (Question 1) This link should be send to the server/servlet and will be progressed to other things. (Question 2) After the progression, the servlet will send a json-array (?) back to the javascript-part of my app.
I'm completly new to this kind of stuff, but its very important to me, to find out how this works or better, how i can make this work. Its actually very simple, but i used plenty of weeks and cant figure it out.
The application is using the SAP UI5-libs (Question 3), where i would also like to know, if there is any possible way, to parse JSON with the UI5 libs.
I hope, i could explain my problem good enough, so i can get some help. Thanks to all!
The 'sending' of the string to the server/servlet would happen via ajax in either POST or GET form. That is up to you.
I recommend you use a javascript plugin like jQuery (JQuery Ajax API) because the regular ajax code is a bit messy.
As for the servlet/server communicating back to the client is as simple as writing to the page. In a typical servlet context it would be something like
out.print("This is a message");
where Ajax automatically returns the content of the entire page upon callback.
So in conclusion:
Consider test.jsp your servlet. I wish to send "Hi" from the client (being the browser) via GET to the servlet and I want the servlet to say "Hello" back.
I would open an ajax request of type GET to the url "test.jsp?param=Hi". In the servlet I receive this page request and process it. The servlet discards the parameter because it is not used and outputs "Hello" to the page.
In the client the ajax will have returned "Hello" and I can use this to put it into a var or whatever and all of this happened while not refreshing and not navigating in the original document where I did the javascript.
Another way is using websockets where you basically use sockets in javascript to send and receive any kind of data.
Also please check out this possible duplicate question: How to send a string to a servlet from javascript using xmlhttprequest
The clearest example of this I could think of is the Reddit Upvote/downvote buttons how when you click the button, the value for upvotes is updated, the upvote button lights up, and the page DOES NOT reload, you just stay exactly where you are on the page.
I am trying to make a feature similar to this and I can totally figure out how to do it with reloading, but I want it to not reload so the user experience isn't disrupted.
Is it possible to do this with php? or would I need to use javascript or something?
The action I would need it to perform would be a basic update query in the database.
This would be done with an Ajax call to your php script. Ajax is designed for these asynchronous updates and/or reloads.
Another way you can do this is with HTML5 WebSockets. You could have the client send a trigger to the server when the user clicks the upvote, and then the server could update and push back the data. It would, however, be a bit overfill for this.
If what you want to do is to contact a server to either send it some state or to retrieve some state from the server (or both), then you would use AJAX with javascript in order to contact the server without reloading the page. You can then also use javascript to update the state of your page after the operation. That is generally what the Reddit page you refer to is doing.
Conceptually, you'd set up your page like this:
Put the link on the page.
With javascript install an event handler so you are notified of a click on the link.
When the link is clicked, your event handler will be called.
Prevent the default behavior of the link so the browser doesn't navigate to a new page.
Then, in the event handler, send your data to the server using AJAX. You will obviously need a URL on your server and server process that can accept and process the data for you and return a value if you need to.
If you need the response from the server, then set up a callback function for when the AJAX call completes (this will be some indeterminate time in the future).
Then, if you need to change the current page in any way (like show one more upvote), then you can modify the current page with javascript to show that new state.
Ajax is easier to use with a library (like jQuery) that contains some ajax support code, but you can certainly implement it in plain javascript too.
Here's one example of ajax with plain javscript. You can find many other examples with Google.
This MDN tutorial on AJAX seems pretty helpful too to show you how it works.
You could use JavaScript to do this. Here's a quick sample:
Vote Up
Simple solution in JavaScript:
var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);
function onVoteClick(e) {
e.preventDefault();
// do something
}
Here's a fiddle.
NOTE: I see you'd be updating the database. In that case, you would have to use AJAX in the onVoteClick function (or use XMLHttpRequest) for this. JavaScript is a client-side programming language and will not be able to communicate to the server without the use of AJAX or XMLHttpRequest. Using the jQuery library, you should be able to write AJAX pretty easy.
It's called AJAX.
With AJAX you can send a request in the background.
The easiest way is to use the jquery libary for this.
You can also output some data as JSON back to the script if you want to take some other actions depending on the result from that query.
A good tutorial is this one.
It also explains how this requests (called: XMLHttpRequest) work.
You need to use Javascript's XMLHttpRequest
You can use AJAX...
It allows you to use JavaScript (client side) to call server side functions. Here's a good example.
As a side project to learn Web Development, I'm writing a web app in Javascript that allows my fellow classmates type in our Class ID # to a search field. If they enter the correct Class ID, they will automatically be redirected to our Google Groups page. The only problem I'm seeing is that since I'm running multiple Google Groups for different classes that I'm taking, I don't know how to hide the javascript code.
Example in Pseudocode:
If (input === 12345){
redirect to (LinkToClass1GoogleGroupsPage.com)}
Else If (input === 12344){
redirect to (LinkToClass2GoogleGroupsPage.com)}
The problem here is if they right-click and view source code, they will clearly see what inputs I'm looking for. I'm new to Web Development and I would like to know what's the best way to implement something like this.
You cannot hide JavaScript code. If you have a secret, keep it on the server.
Anything on client-side environment is readable unless it is encrypted - what doesn't works with JavaScript. You can use a server-side environment to deal with that without leaving JavaScript with node.js, look this post.
Use an ajax request(jQuery or pure) to a node.js service or any other server-side language of your choice and keep those actions out of user's sight. This is safer, right and maybe only way to do that.
You cannot literally hide the data in JavaScript, unless you use a server-side language to redirect.
What you can do however is obfuscate your code, there are tools to help you do this.
http://javascriptobfuscator.com/
"LinkToClass2GoogleGroupsPage.com"
Results in
var _0x2ec6= ["\x4C\x69\x6E\x6B\x54\x6F\x43\x6C\x61\x73\x73\x32\x47\x6F\x6F\x67\x6C\x65\x47\x72\x6F\x75\x70\x73\x50\x61\x67\x65\x2E\x63\x6F\x6D"];_0x2ec6[0];
Probably the most secure way for this to be done would be to have a Server Side function that can be called via Ajax to return the link.
What type of Server Side code you use depends on your preferences.
For example ASP.NET Web Service, PHP, ASPX Web Methods.
Below is example Ajax Request Code using jQuery :
var o = new Object();
o.ID = input;
var x = JSON.stringify(o);
$.ajax({
url: 'SOME URL', //Path to the Server Side function (i.e. Php / ASPX Web Method / Web Service)
type: 'GET',
dataType: 'JSON',
contentType: 'application/json;charset=utf-8;',
data: x,
success: function (data) {
//Method returned without issue
redirect to (data.d)
//data is a JSON object that contains a "d" property, if your function returns a string then d will be the value of the string.
},
error: function (ajaxrequest) {
//Ajax call received an error.
}
})
This cannpt be done yet. HTML5 might have DRM implementations in the future but this will also depend on browsers opting in for this feature (Mozilla are against it for example).
Disable right click and ctrl button thats all you can do! :D