CODEWITHSUNDEEP
javascriptpythonajaxflask
Ian McGarry
Ian McGarry

Reputation: 145

Why doesn't my page redirect after the post is submitted?

The below code seems to work correctly. The post goes through and I even see a GET message on the console for the page I am redirecting to. But my browser doesn't switch to the new page saying "Hello". If I browse to /PostTest directly then it works.

I get the "Welcome" message too.

</script>
<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<html>
  <body>
<div class="row"></div>
Any Day Drinking Club's Six Nations Table Generator
<div class="row">
  <div class="input-field col s6 offset-m2 offset-l4 m4 l2">
    <input placeholder="Username" id="username" type="text" />
  </div>
  <div class="input-field col s6 m4 l2">
    <input placeholder="Password" id="password" type="password" />
  </div>
</div>
<div class="row">
  <a class="waves-effect waves-light btn" id="loginbutton">Login</a>
</div>
<script>$("#loginbutton").click(function(){
  $.ajax({
    type: 'POST',
    url: "/loginsubmit",
    success: function(){
      alert("Welcome ");
      }
    }
  )
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script></body>
</html>

from flask import Flask, request, redirect, url_for
import yaTemplates as Templates

app = Flask(__name__)

@app.route('/')
def index():
    return Templates.login()

@app.route('/PostTest')
def test():
    return 'Hello'

@app.route("/loginsubmit", methods=["POST"])
def loginsubmit():
    # + request.json["username"]
    return redirect(url_for('test'))


app.run(debug=True)

Upvotes: 1

Views: 369

Answers (1)

Matt Oestreich
Matt Oestreich

Reputation: 8528

This is because you are using AJAX.. You are programmatically sending a request via the browser, behind the scenes, that is separate and unrelated to what you see on the screen.

In Flask, you'll need to respond with the URL to redirect to. On the client side, you'll need to set the window.location to that URL.

EDIT: as a little demo, you can open up your browsers Developer Tools (right click any webpage, select "Inspect Element"), then select the "Console" tab, and type window.location = "https://google.com" then press enter, and your browser will then change the URL and browse to Google.

enter image description here

from flask import Flask, request, redirect, url_for
import yaTemplates as Templates

app = Flask(__name__)

@app.route('/')
def index():
    return Templates.login()

@app.route('/PostTest')
def test():
    return 'Hello'

@app.route("/loginsubmit", methods=["POST"])
def loginsubmit():
    # + request.json["username"]
    return url_for('test')


app.run(debug=True)

Client side:

<script>
  $("#loginbutton").click(function () {
    $.ajax({
      type: 'POST',
      url: "/loginsubmit",
      success: function (url) {
        window.location = url;
      }
    })
  });
</script>

Upvotes: 2

Related Questions