We Keep Coding

How to redirect to a second page if I visit the application second time

I am trying to create a flask web application where if the user visits my application for the first time, he will be directed to an index.html page, where he will be prompted to enter a name and submit it. Then I save the name in local storage and redirect the user to a second html page channels.html. Now if the user closes the tab and visits the application for a second time, he should be redirected to the second page channels.html, i.e., the "/chanels" route automatically instead of the first page.
Here is the app.py python file I have written so far:
#app.route("/")
def index():
return render_template("index.html")
#app.route("/channels", methods=['GET', 'POST'])
def channels():
if request.method == "POST":
name = request.form.get("display_name")
return render_template("channels.html", name=name)
render_template("channels.html")
Here is my index.html:
<script src="{{url_for('static', filename='index.js')}}"></script>
<h2>Enter your name!</h2>
<form action="/channels" method='Post'>
<input id="displayname" name="display_name" placeholder="Name" autocomplete="off" autofocus required type="text"/>
<input type="submit" id="submitbutton" onclick="store()"/>
</form>
And index.js:
function store(){
var name= document.getElementById("displayname");
localStorage.setItem("displayname", name.value);
}
I tried googling how to do it, but couldn't find a solution.
Any help would be kindly appreciated.
EDIT: On suggestions of #AkibRhast, I tried checking whether localStorage is there or not, and if yes, redirect to channels.html, so I added the following code to my index.js file:
if(localStorage.getItem("displayname")){
window.location.replace("/channels");
}
But now whenever I visit the index page, I get a 404 Not Found error, although the url in the url bar has the link to channels, i.e. http://127.0.0.1:5000/channels.html.

So it seems you are headed in the right direction.
Try this:
In your index.html, add a script at the header of the page/top of the page. You want the script to be loaded 1st
So when a user goes to index.html the script checks whether local storage.getItem("displayName") exists.
If it does, redirect to channels.html
Once you have tried that, and made the appropriate changes to your code, and if it did not work please edit your original post with the things you have now tried, as well as stack trace of any errors.
I am more than happy to take a look at it again and rework my answer.
Updates
So I believe the reason it is not working on your side currently has to do with the fact that in your channels function you need to have a return value for your second render template, like so :
#app.route("/channels", methods=['GET', 'POST'])
def channels():
if request.method == "POST":
name = request.form.get("display_name")
return render_template("channels.html", name=name)
return render_template("channels.html") # This line has been modified
Another change that you need to make in your code for the changes to take effect is to your index.js file. Just add this function.
//This function needs to be added to index.js
window.onload = function(){
if(localStorage.getItem("displayname")){
window.location.replace("/channels");
}
I have implemented the above changes on my end and it seems to work as expected please let me if that works out for you. Also, on a different note, the best way to test this if it is working is using incognito mode.

Python Flask: Return HTML Content

i am trying to put together a makeshift tool for my own personal use, im not experienced with backend development at all. so my methods may be unconventional. although there may be a much better method to go about this
consider the following snippet from my html file:
<tr><td>
<button id="socks.shirt.pants"> dummy text here </button>
</td></tr>
my goal, as simply as i can put it, is to click BUTTON and return the string text within the ID attribute in python using Flask. Below is the code i am working with.
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def index():
#display html file
return send_from_directory('','myfile.html')
#this is the part that needs help
textdata = request.htmlcontent.td.id
i have tried several different ways to extract the html content. including but not limited to:
request.html.tr.id,
request.get_data(),
request.data(),
request.form,
i understand now that request.form returns user-supplied information submitted in a form, which wont work for me because the information that i want to retrieve will be hardcoded into the html file under whichever tag that would allow this process to work. (currently tr -> td -> button).
the other methods either returned None or an some empty string, i believe.
also, i am wondering if maybe there is some piece of javascript code that ill need to use in addition to Flask as well? i hope that this is not an unrealistic expectation to ask this question! any suggestions would help greatly!

You can use ajax with jquery:
In the main filename.py, include a route like this, that access the parameters from the json response from the frontend. Also, provide a route that will render the HTML template:
#app.route('/recieve_data')
def get_id():
the_id = flask.request.args.get('button_id')
return "<p>Got it!</p>"
#app.route('/', methods=['GET', 'POST'])
def home():
return flask.render_template('filename.html')
In your HTML (stored in filename.html), utilize the code below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<tr><td>
<button id="socks.shirt.pants" type='button'> dummy text here</button>
<div id='response'></div>
</td></tr>
</body>
<script>
$(document).ready(function() {
$("button").click(function(event){
var the_id = event.target.id;
$.ajax({
url: "/recieve_data",
type: "get",
data: {button_id: the_id},
success: function(response) {
$("#response").html(response);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
</html>

Use ajax to send image file to python (flask)

I have an image on my website being updated every 5 seconds (using PubNub and a Raspberry Pi. I use JavaScript to update the image source). This works fine. My problem is I am trying to use Ajax to send the source file to python (flask) and store that file in a MySQL database. Then I want to display the file name on the website. I am new to java script/ ajax.
Here is my java script:
<script type=text/javascript>
$(function() {
$('img#imageid').bind( function() {
$.getJSON('/_button', {
proglang: document.getElementById('imageid').src,
}, function(data) {
$("#buttonState").text(data.result);
});
});
});
</script>
The img#imageid is the id of the current image and the #buttonstate is where i would like to have the image file name displayed
Here is my html:
<img id="imageid" src="http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920-800x450.jpg">
<form>
<p>The button is <span id="buttonState"></span></p>
<br>
</form>
I do not want to use GET or POST. I would like to to automatically send to the python file every time the image source changes.
Here is my Flask view:
#app.route("/_button")
def _button():
try:
lang = request.args.get('proglang')
c.execute ("""UPDATE pictures SET file_name=%s WHERE user_id=%s""",
(str(lang), str(session['user_id'])))
return jsonify(buttonState=lang)
except Exception as e:
return render_template("500.html", error = str(e))

Onclick write to database whithout refreshing

I've been working on a Flask application for a while.
Everything going pretty smooth because I was avoiding a problem. When writing to the database I always used a post ( that makes the page reloading ).
Not a big problem when posting forms etc.
Now I want a "i want help" button that makes a value true or false in the db.
Based on this value i would generate html that provides help.
But the button cannot make the page refresh. This is where i got stuck.
I only managed to get it working without writing to the db ( and storing it localy ).
Is there an obvious thing that i miss? or some Flask magic that gets it done.
The solution that I'm thinking about is posting to the db after leaving the page. Haven't got this working though.
Thanks in advance!

This example uses Ajax to send some data to the Flask back-end with jQuery and receive a response. It's very simple, but I marked the place where you'd handle the processing that you want the back-end to take care of after the user clicks your help button.
from flask import Flask, render_template_string, request
app = Flask(__name__)
#app.route('/')
def index():
return render_template_string('''
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#send_data').on('click', function() {
$.ajax({
url: "{{ url_for('data_post') }}",
method: "POST",
data: {
data: $('#data').val()
},
success: function(data) {
$('#response').html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" name="" id="data">
<button id="send_data">Send</button>
<br />
<p id="response"></p>
</body>
</html>
''')
#app.route('/data', methods=['POST'])
def data_post():
# handle your database access, etc.
return 'received'
if __name__ == '__main__':
app.run()
It's a simple index page with a textbox and button. Enter something into the textbox and click the button. You should see "received" on the page underneath the makeshift form, which is the echo from the back-end that the processing (in this example there isn't any) is done.

I'm also working on a Flask app currently, if you don't want to reload the webpage, you'll have to make an AJAX call. This can be easily done via jQuery.post() function. Also, you might need to setup a new route in Flask, so as to provide the required data to which the post function will make a request. To disable auto form submission, you can use:
$('form').submit(false);
And for posting manually and receiving data from server, you can use:
<button ... onclick="submitForm()">Submit</button>
And submitForm():
function submitForm()
{
$.post( url, { "data": "form-data" }).done(function (){...});
}
Hope this helps.

Use AJAX to send html5 textarea directly without html <form>

Recently I am confused about whether it's possible to send input/textarea data directly without being included in html <form>. I thought in web page, if we want to get information from user then send the text to authentication server, we must use <form> irrespective of in which way it's submitted.
But an anonymous reviewer of my paper claims that <html> can be bypassed by using an html5 tag "textarea" and JS AJAX post. While I did lots of experiments trying to implement his way but all failed.
I wonder if there is really some way to submit user info without using <form> tag?
Thank you
Thanks for everyone's reply.
Update: I followed "the_void"'s code and changed the url of AJAX to a ServerSocket (implemented by Java). The server was able to get the POST event, but it cannot read the "data" of AJAX. The following is the html code:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
// information to be sent to the server
info = $('#foo').val();
$.ajax({
type: 'POST',
url: 'http://10.0.0.3:8888',
data: ({ foo: info }),
// crossDomain: true,
// dataType: 'json'
});
return false;
});
});
</script>
</head>
<body>
<label>Text</label>
<textarea id="foo"></textarea>
<button id="submit">Submit via Ajax</button>
</body>
</html>
It seems that the socket server cannot read from AJAX (but it can read from < form > + < action >). Is there any way to fix the reading issue?
Thank you

Ajax (Asynchronous Javascript & XML) is a way to send data from client to the server asynchronously. For that you'd have to write code for sending the data in the client-side using Javascript/HTML and also to process the received data using server-side languages (eg PHP) on the server-side.
And, yes you don't need a <form> tag to do so.
Check out this example.
HTML:
<label>Text</label>
<textarea id="foo"></textarea>
<button id="submit">Submit via Ajax</button>
Javascript:
$('#submit').click(function(e) {
e.preventDefault();
// information to be sent to the server
var info = $('#foo').val();
$.ajax({
type: "POST",
url: 'server.php',
data: {foo: info}
});
});
Server-side Handler (PHP): server.php
<?php
// information received from the client
$recievedInfo = $_POST['foo'];
// do something with this information
See this for your reference http://api.jquery.com/jquery.ajax/

Perhaps your reviewer was referring to the HTML5 textarea attribute "form". It allows a textarea to be part of a specified form without being inside the form element.
http://www.w3schools.com/tags/att_textarea_form.asp
But generally speaking, as long as you can identify an element, say a textarea, you can access the text inside it and send it to the server without submitting any forms using ajax.
From Sable's comment:
http://api.jquery.com/jquery.post
OR
http://api.jquery.com/jquery.ajax/

Yes, you can submit data to a server without putting it into a form. Form's provide a simpler mechanism for sending larger amounts of data to a server without the developer having to tell the browser how to encode the form.
EG:
HTML
JS
var text = $("input[type='text']").val();
$.post("/my/server/url", { userInput : text }, function(data){ /* Success! */});
This would technically post the data to the server without a form.