Passing variable to Flask from Javascript and then loading template

Question

In my Flask app--I'm pretty new to Flask--, I'm getting the values for client's latitude and longitude with Javascript and then passing a formatted string to a flask view. The view is supposed to pass the string to an online API and obtain a JSON object. It then converts it to a dictionary and displays certain values on a new page. I'm having trouble with loading the page from the view after I pass it the variables from the Javasctipt function. I know that it returns a result (I tried using Javascript's alertto display the resulting html), but return rendered_template() doesn't load the new page for some reason. I wonder if that's even possible to achieve. Thanks.

Javascript:

function getLocation(){ 
    if("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(transferFile);
    }
}   

function transferFile(position){
    var start = 'lat=';
    var result = start.concat(position.coords.latitude, '&lon=',     position.coords.longitude, '&format=json');
    $.get(
    url="phony",
    data= result, 
    success=function(data) {
        ;
    }
);

}

And here's the Flask part:

@app.route('/phony')
def phony():
    query = request.query_string
    url = <link to API> + query
    location_dict = requests.get(url).json()
    return render_template("phony.html", location_data = location_dict)

Check "location_dict" is getting converted into dict as context obj for template without any issues. — Murali Mopuru
– Murali Mopuru, Commented May 4, 2015 at 7:01
You are making the request using Ajax. You have to update the page's content in the success callback. If you want the new page to load automatically you need to let the browser submit the form. — dirn
– dirn, Commented May 4, 2015 at 12:28
Murali, it does, I've checked that. @dirn could you explain how to do that with a code snippet, I'm pretty new to web development. — Денис Балобин
– Денис Балобин, Commented May 4, 2015 at 13:04

dirn · Accepted Answer · 2015-05-04 14:12:40Z

1

Your current call to $.get doesn't do anything with the result in the success callback

success: function(data) {
  ;
}

data contains the output from render_template('phone.html', location_data=location_dict). You need to add it to the page.

success: function(data) {
  $('#some-selector').html(data);
}

That will replace the contents of an element matching #some-selector with the output. If the output contains a new HTML document (i.e., it's wrapped in an html tag), you'll want to replace the entire DOM. You can do that with something like

success: function(data) {
  $('html').replaceWith(data);
}

answered May 4, 2015 at 14:12

dirn

21.1k7 gold badges75 silver badges76 bronze badges

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

4 Comments

dirn Over a year ago

What does data contain?

Денис Балобин Over a year ago

It contains the html page I'm trying to display, I checked with alert

dirn Over a year ago

Does it contain the html tag?

Денис Балобин Over a year ago

yes, it contains the tags. I found somewhat of a solution. I use replaceWith() to insert the target page within one of the current page's <div>'s, which accomplishes what I need. I'd love to figure out why $('html').replaceWith(data); doesn't work.

Collectives™ on Stack Overflow

Passing variable to Flask from Javascript and then loading template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related