jquery .load with python flask

Question

I am trying to use jquery .load in my flask app to add a div every time the user presses a button to add a new div, but it can't find the html file.

The function in question.

$(document).ready(function(){
        $("#add").click(function(){
            $("#form").load('/templates/info.html');
        })
});

The info.html file only hold a short div section of html.

index.html the code, where I want to load the info.html div after the form.

  <form id="form" action="{{ url_for('get_data') }}" method="post">
        <input type="button" name="add" value="Add" id="add">
        <input type="submit" id="submit" value="To XML">
    </form>

/templates/info.html

 <div id="info">
     <label>name</label>
     <input type="text" name="name">
     <br>
     <label>asfd</label>
     <input type="text" name="asfd">
      <br>
 </div>

I keep getting this 404 error.

127.0.0.1 - - [04/Mar/2014 19:55:50] "GET /templates/info.html HTTP/1.1" 404 -

I am running the flask app locally, and /template/info.html is the correct path. I just don't know why it doesn't load in that html. I am able to make it work when I use the jquery function and .append() and put the long html string into the append function, but add the info.html gets longer I just want to be able to load the whole file.

Any help would be great thanks.

templates is just a folder. Flask doesn't serve the contents unless you explicitly ask it to. Setup a route (@route('/info') or something similar), render the template, and request /info instead of that URL. — Blender
– Blender, Commented Mar 5, 2014 at 1:05
But won't jquery look in the template folder, and load the html file? — Greg Brown
– Greg Brown, Commented Mar 5, 2014 at 1:06
Folders are for file systems. jQuery sends a GET request to the webserver and requests the resource at /templates/info.html. From there, it's entirely up to Flask to determine what /templates/info.html actually means. It could just send back the URL in reverse as a response. Flask doesn't serve the contents of /templates/ the same way it does for /static/, which might be a better choice for you (although I would suggest instead to make a route that actually renders the template, as in the below answer, and use jQuery to load it). — Blender
– Blender, Commented Mar 5, 2014 at 1:09
I edited my question I think I understand what you are saying, but I don't know if that is what I am trying to do. — Greg Brown
– Greg Brown, Commented Mar 5, 2014 at 1:18

shaktimaan · Accepted Answer · 2014-03-05 01:07:14Z

8

Your view definition within the flask app should return the info.html. In other words, you should have a route and a method in your flask application as:

@app.route('/info')
def info(name):
    return render_template('info.html')

Now in your jquery code you can load the url /info. Flask by default looks for templates in the templates folder, so no need to explicitly mention that in the URL

answered Mar 5, 2014 at 1:07

shaktimaan

12.1k2 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blueDroid Over a year ago

It worked for me! Just what I was looking for. Thanks so much!

Collectives™ on Stack Overflow

jquery .load with python flask

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related