Since mostly a backend guy, I am not sure how can I achieve the following since it
requires some interaction with the browser.
So, I have a the following things so far.
A communication protocol where server is in python and client is in javascript code.
Ultimately, I want my data to reach to that javascript code.
Now, this data is being captured from browser.
As a practice.. what I am trying to do is.. have two radio buttons on my browser and a submit button
*radio A
*radio B
* Submit
Now, when the user presses submit, I somehow want to create a query "user submitted: A (or B)" and this query i am able to capture on python script.
I am at lost on how to do this.
My guess is that "submit" invokes a python script.
But what if my python server is always on .. how do i parse that response from the click of browser to this python server?
This is the way it usually works:
Client (browser) visits webpage and initiates request to server
Server (in your case, Python) handles request and writes HTML response, including the radio-button form
Client fills out form and hits Submit, triggering another request to the server
Server handles the second request and writes another response (e.g. "Purchase successful", "message posted", etc.).
Note that the second request is a brand-new request. You may want some way of linking the first request to the second one unless the second request is anonymous. Some frameworks will do that for you, but if you are making the server from the ground up you'll want some kind of session mechanism to keep track of state.
To get the client to make the second request, the simplest is to add appropriate action and method attributes to the form element in your HTML. action specifies the URL to access for the form request, and method is either GET or POST. (More advanced usage, e.g. on this site, typically uses AJAX to make the submissions instead).
Related
This question already has an answer here:
Firing SQL query on click of button?
(1 answer)
Closed 5 years ago.
I have a page where photos are uploaded, when you see the photos there is a button to give you points to the photo.
To the button I gave an onclick with a javascript function that has this php code
function puntos(){
<?php
mysql_query("UPDATE 'fotos' SET 'relevancia=relevancia+1' WHERE 'id = $id'");
?>
}
This is in photo.view.php in photo.php I have this code that retrieves the id of the selected photo
$id = isset($_GET['id']) ? (int)$_GET['id'] : false;
what am I doing wrong?
You're far from home.
Back to basics first:
Server vs. client
mysql and PHP run on the server
JavaScript runs on the client in their browser.
This means javascript cannot access your database directly, you need to do a lot of work before you get there.
Detecting and reacting on a click is something JavaScript can do (and is quite adept at doing).
Communication
Normally when a page downloads it and the components it refers are sent from the server to the client over HTTP.
Once in the browser, to get something back from the client to the server the only way is to send another query or open up some network connection somehow from the client to the server which then transfers that content, or indicates somehow what happened on the client.
Traditionally this meant a form and a click resulting in a GET or POST HTTP request and a reload of the page in the browser.
That's till we got:
AJAX
Essentially the connection from the client to the server can also be initiated by JavaScript itself and it can talk to a server component (just like the browser can) without having to reload a page or having to submit a form or so). This allows one to create things where a click or even a move of the mouse (or anything else JavaScript can detect -it can detect a lot-) can result into data being sent to the server and answers collected by that JavaScript. If it updates the page (aka DOM) is up to the script to chose.
Server Side
Now having JavaScript on the client communicating with the server still isn't going to let said JavaScript update a database. So you need a sever side component that does stringent validations (the code you have above is a horror story from the security side should that ever get to work) and updates a database behind it as needed.
TL;DR
Suggest you read up more on how to do simple AJAX
Some starting points:
https://www.w3schools.com/xml/ajax_intro.asp
https://www.owasp.org/index.php/AJAX_Security_Cheat_Sheet
But there's much more out there for sure.
What would be the "best" approach to dealing with forms which have to work without and with JavaScript enabled?
Would it be better to create different routes for each, like
AJAX request: route "API/contact" and return res.send("message")
without JavaScript: route "contact"and return a redirect with a query param of "message"
Or in one route and detect xhr and render it depending on this?
Or is there a better way of dealing with the problem of taking the user to the res.send("") when the JavaScript isn't enabled to give the user feedback on the submit?
To clarify:
I have a site which is working with AJAX requests for its forms to avoid full page loads. It lacks the fallback when JavaScript is not enabled and thus when a user clicks submit on a form, he receives the data from the post back with res.send and it replaces the whole page, instead of the desired effect which would be to just update a label with the "success/fail" message. The question then remains as above which would be the neat way of dealing with this?
Probably the best thing to do would be to check the X-Requested-With header and check that it contains XMLHttpRequest (but this might get deprecated as the new fetch API will slowly come into browser.
Based on that value, you might want to return a JSON payload, or eventually trigger a server side rendering, therefore returning an HTML page ready-to-be-consumed.
As an alternative, you can return a redirect response with a particular query string value; once the page is loaded, you will check for that value (using qs for example, or deparam in jquery and manipulate the client side accordingly.
Your server routes have nothing to do with client-side javascript. You don't need javascript to receive a "res.send" message.
How can I pass a javaScript variable into ruby. I want to do something like this but I don't know how to express it.
function save(){
var g = document.getElementById("self").value;
<% #owner.info = g %>
}
Another possible work around is that i would need to be able to extract contents of a text area through rails and not javascript.
Can anyone help me?
What you are attempting to do doesn't make sense with a vanilla rails installation and javascript. Here's a good workflow that accomplishes what you're trying to do along with some details:
1. A page is requested from the server
The ruby code that runs rails and your application is executed on the server. The server receives a request, executes the ruby code, and sends the response as an html document.
2. A user gets the response from the server
The user's browser receives the html and turns it into a pretty web page. It's at this point that any javascript related to your application is executed in the user's browser. The connection with the server has been severed and no further ruby code will be executed until another request is made.
3. The user fills out an ajax form
On the page rendered in step 2, you have a form. Following this guide you can tell this form to submit via ajax. That means instead of requesting a new web page, the browser will send a special request using javascript to the server. The server can save the form values to your database and send a response back to the browser. All the while the user hasn't left the page they are currently viewing.
Alternatively you can skip the ajax and have the user submit the form, but you'll need to redirect them back to the page they were viewing (and probably adding a note the form they submitted was saved).
Is it possible to make the script (phantomjs or casperjs) to stop for manual human input (keyboard typing) before going to the next step?
For example, the script will fill out a form and export the whole screen as .png then wait for user input to fill in the last field before click submit. Captcha is one of the barrier required this. I don't want to deal with Captcha breaker / solver or anything like that since it's only one time thing per run.
Any help?
I've never done it, but, I know the script you write that gets executed in the browser/phantom, can send an ajax request to some local webserver. There's your external communication.
->screenshot
->send to local server
->someones open web browser polls the server for new data entry jobs
->human submits one
->server receives submission
->server routes the response back to that initial ajax request
->that ajax request that got sent from phantomjs finally receives a response.
This workflow can be done using any kind of external communication possible from phantom/casper(I'm just not familiar with them). I'm sure ajax works, so i used it as an example.
How do I design a Django/Javascript application to provide for conditional Ajax responses to conventional HTTP requests?
On the server, I have a custom-built Form object. When the browser POSTS the form's data, the server checks the submitted data against existing data and rules (eg, if the form adds some entity to a database, does that entity already exist in the database?). If the data passes, the server saves, generates an ID number and adds it to the form's data, and passes the form and data back to the browser.
if request.method == 'POST':
formClass = form_code.getCustomForm()
thisForm = formClass(data=request.POST)
if thisForm.isvalid():
saveCheck = thisForm.saveData()
t = loader.get_template("CustomerForm.html")
c = Context({ 'expectedFormObj': thisForm })
(Note that my custom logic checking is in saveData() and is separate from the html validation done by isvalid().)
So far, standard Django (I hope). But if the data doesn't pass, I want to send a message to the browser. I suppose saveData() could put the message in an attribute of the form, and the template could check for that attribute, embed its data as javascript variable and include a javascript function to display the message. But passing all that form html back, just to add one message, seems inelegant (as does the standard Django form submission process, but never mind). In that case I'd like to just pass back the message.
Now I suppose I could tie a Javascript function to the html form's onsubmit event, and have that issue an XMLHttpRequest, and have the server respond to that based on the output of the saveData() call. But then the browser has two requests to the server outstanding (POST and XHR). Maybe a successful saveData() would rewrite the whole page and erase any potential for conflict. But I'd also have to get the server to sequence its response to the XHR to follow the response to the POST, and figure out how to communicate the saveData outcome to the response to the XHR. I suppose that is doable, even without the thread programming I don't know, but it seems messy.
I speculate that I might use javascript to make the browser's response conditional to something in the response to the POST request (either rewrite the whole page, or just display a message). But I suspect that the page's javascript hands control over the browser with the POST request, and that any response to the POST would just rewrite the page.
So can I design a process to pass back the whole form only if the server-side saveData() works, and a message that is displayed without rewriting the entire form if saveData() doesn't? If so, how?
Although you can arrange for your views to examine the request data to decide if the response should be an AJAXish or plain HTML, I don't really recommend it. Put AJAX request handlers in a separate URL structure, for instance all your regular html views have urls like /foo/bar and a corresponding api call for the same info would be /ajax/foo/bar.
Since most views will examine the request data, then do some processing, then create a python dictionary and pass that to the template engine, you can factor out the common parts to make this a little easier. the first few steps could be a generic sort of function that just returns the python dictionary, and then actual responses are composed by wrapping the handler functions in a template renderer or json encoder.
My usual workflow is to initially assume that the client has no javascript, (which is still a valid assumption; many mobile browsers have no JS) and implement the app as static GET and POST handlers. From there I start looking for the places where my app can benefit from a little client side scripting. For instance I'll usually redesign the forms to submit via AJAX type calls without reloading a page. These will not send their requests to the same URL/django view as the plain html form version would, since the response needs to be a simple success message in plain text or html fragment.
Similarly, getting data from the server is also redesigned to respond with a concise JSoN document to be processed into the page on the client. This also would be a separate URL/django view as the corresponding plain html for that resource.
When dealing with AJAX, I use this:
from django.utils import simplejson
...
status = simplejson.dumps({'status': "success"})
return HttpResponse(status, mimetype="application/json")
Then, AJAX (jQuery) can do what it wants based on the return value of 'status'.
I'm not sure exactly what you want with regards to forms. If you want an easier, and better form experience, I suggest checking out uni-form. Pinax has a good implementation of this in their voting app.
FYI, this isn't an answer...but it might help you think about it a different way
Here's the problem I'm running into...Google App Engine + jQuery Ajax = 405 Method Not Allowed.
So basically I get the thing to work using the outlined code, then I can't make the AJAX request :(.