AJAX is not returning a flask render_template, It sends the data but stops just before rendering it

Hi everyone and thanks for viewing my question, I’m trying to build and application using Flask to send html,css and js file paths to flask (after open() & read() the files content) send them to html and view the codes there.

I’m using AJAX to post a data to this url: “/getFiles” ; the data is being sent successfully and printed but the code is stopping just before returning.

I tried Axios but had the same exact results.

I tried to change contentType: “application/json” to contentType: “json” but the code stopped working then.

I tried to render to another page different than index.html but that didn’t help as well.

I tried to return just with return "OK" , 200 but even this didn’t work.

I’ve done a simplified version of the code to let you focus on the problem.

here is my python code:

from flask import *

app = Flask(__name__)

@app.route('/', methods=["GET"])
def homepage():
    return render_template('index.html')

@app.route('/getFiles', methods=['POST'])
def getFiles():
    data = request.get_json()
    print(data)
    htmlFile = data['html']
    cssFile = data['css']
    jsFile = data['js']
    return render_template('index.html', html=htmlFile, css=cssFile, js=jsFile)
    
if __name__ == '__main__':
    app.run("0.0.0.0", port=5500)

and here’s my HTML code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
  </head>
  <body>
    <p>html files :</p>
    <p>{{ html }}</p>
    <p>css files :</p>
    <p>{{ css }}</p>
    <p>js files :</p>
    <p>{{ js }}</p>
    <button id="clickMe">Bring Data</button>
  </body>

  <script>
    $("#clickMe").on("click", function () {
      $.ajax({
        url: "/getFiles",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
          html: "html files",
          css: "css_files",
          js: "js files ",
        }),
      })
        .done(function (result) {
          console.log("message sent!");
          $("#data").html(result);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
          console.log("failed to send! ");
        });
    });
  </script>
</html>

When I’m running my code this is what I get in Python logs

C:Usersz420Desktopsmall test>python views.py
 * Serving Flask app 'views' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://192.168.147.110:5500/ (Press CTRL+C to quit)
127.0.0.1 - - [02/Jul/2021 15:44:50] "GET / HTTP/1.1" 200 -
{'html': 'html files', 'css': 'css_files', 'js': 'js files '}
127.0.0.1 - - [02/Jul/2021 15:44:51] "POST /getFiles HTTP/1.1" 200 -

data is printed but no rendering…

Answer

if you want to show the file names. you have to return the file names in python dict. and use javascript to show them on webpage.

[...]
return {"html":htmlFile,"css":cssFile,"js":jsFile}

replace the p tags with a div with id files <div id="files"></div>

in js(jquery):

.done(function (result) {
      console.log("message sent!");
      console.log(result)
      $("#files").html(`<p>html files :</p><p>${result.html}</p><p>css files :</p><p>${result.css}</p><p>js files :</p><p>${result.js}</p>`)})

this will edit and display the content you want.