Databases
StackOverflow2013
Postsdbo
POCalling a python method to fetch data, from a javascript function on the html page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCalling a python method to fetch data, from a javascript function on the html page
    text
    copied!<h3>Technologies being used</h3> <ul> <li>Google app engine</li> <li>Django</li> <li>Python</li> <li>Jquery</li> </ul> <h3>Details of the code and code excerpts</h3> <p>I have a drop-down list (country) and a text-box (city) { the drop-down list and text-box are generated by a django-form} that get automatically populated by a GeoIp library</p> <p>Image of how these UI elements look on the html page:</p> <p><img src="https://i.stack.imgur.com/jBOsS.png" alt="enter image description here"></p> <ol> <li><p>Code excerpt that fills in the drop-down list and the text-box:</p> <p><br> // selecting users country and users city, // the id for users country drop-down list is "id_country_name" // the id for users city text-box is id_city_name $(function () { $("#id_country_name").val(geoip_country_name()); $("#id_city_name").val(geoip_city()); // at this point the users country and city values are in from the javascript call // now is the time to call python code to get the data values reported by other users for users country and city</p> <pre><code> }); &lt;/script&gt; </code></pre></li> <li><p>Sample python code for querying the database</p> <pre><code>def get_data_for_users_country_and_city(self): query = db.GqlQuery("SELECT * FROM UserReportedCity where county.country_name = country_name and city.city_name = city") data = query.fetch(10) </code></pre></li> </ol> <p>I have to probably package these items in a template and then return back to the html page</p> <pre><code>template_values = { self.__TEMPLATE_DATA_FOR_USER: data } #rendering the html page and passing the template_values self.response.out.write(template.render(self.__MAIN_HTML_PAGE, template_values)) </code></pre> <p>Please note, i haven't tested this python code yet.</p> <h3>Question</h3> <p>Once the values for country and city are filled in by the javascript call, I want to make a call to a python method to get the data for users country and city and populate it in the “Your City” tab.</p> <p><strong>[EDIT#1]</strong></p> <p>Tried the suggestions given by @Fabio Diniz and @Kevin P </p> <p>The following is the html and javascript code:</p> <pre><code>&lt;!-- script snippet to fill in users country and city value by making a calls to the geoip library --&gt; &lt;script type="text/javascript"&gt; // selecting users country and users city, // the id for users country drop-down list is "id_country_name" // the id for users city text-box is id_city_name $(function () { $("#id_country_name").val(geoip_country_name()); $("#id_city_name").val(geoip_city()) }); $.post("/AjaxRequest/get_data_for_users_country_city", { selected_country_name: document.getElementById('id_country_name').value, selected_city_name: document.getElementById('id_city_name').value }, function(data) { alert("hello"); } ); &lt;/script&gt; </code></pre> <p>The following indicates that the requests to "/AjaxRequest/get_data_for_users_country_city" should go to “AjaxRequest” class.</p> <pre><code>def main(): application = webapp.WSGIApplication([('/', MainPage), ('/UserReporting', UserReporting), ('/AjaxRequest/get_data_for_users_country_city', AjaxRequest ) ], debug=False) run_wsgi_app(application) </code></pre> <p>Code in “AjaxRequest” class</p> <pre><code>from google.appengine.ext import db class AjaxRequest(webapp.RequestHandler): def post(self): user_reported_country_get = self.request.get('selected_country_name') user_reported_city_get = self.request.get('selected_city_name') data_for_users_country_city = self.get_data_for_users_country_and_city(user_reported_country_get, user_reported_city_get) self.response.out.write (data_for_users_country_city) </code></pre> <p><strong>Problem:</strong></p> <p>In debug mode i can see that the call from javascript method making it to the "AjaxRequest", "post" method. The problem is that the “user_reported_country_get” and “user_reported_city_get” don’t have the string values given by the javascript code.</p> <p><strong>[EDIT#2]</strong> </p> <p>Based on the suggestion given by @Matt Ball, I tried the following code excerpt in the javascript call</p> <pre><code>&lt;!-- script snippet to fill in users country and city value by making a calls to the geoip library --&gt; &lt;script type="text/javascript"&gt; // selecting users country and users city, // the id for users country drop-down list is "id_country_name" // the id for users city text-box is id_city_name $(function () { $("#id_country_name").val(geoip_country_name()); $("#id_city_name").val(geoip_city()) }); $.post("/AjaxRequest/get_data_for_users_country_city", { selected_country_name: $('#id_country_name').val(), selected_city_name: $('#id_city_name').val() }, function(data) { alert("hello"); } ); &lt;/script&gt; </code></pre> <p>HTML code excerpt for country drop-down list and city text-box. Here the id for the country drop-down list is "id_country_name" and the city text-box is "id_city_name"</p> <pre><code>&lt;div id="userDataForm"&gt; &lt;form method="POST" action="/UserReporting"&gt; &lt;table&gt; &lt;!-- Printing the forms for users country, city --&gt; &lt;tr&gt;&lt;th&gt;&lt;label for="id_country_name"&gt;Country name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;select name="country_name" id="id_country_name"&gt; &lt;option value="" selected="selected"&gt;---------&lt;/option&gt; &lt;option value="Afghanistan"&gt;Afghanistan&lt;/option&gt; &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;th&gt;&lt;label for="id_city_name"&gt;City name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input type="text" name="city_name" id="id_city_name" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p></p> <p>Inside the python debugger the values for “select_country_name” and “selected_city_name” are still empty as depicted by the following image</p> <p><img src="https://i.stack.imgur.com/mu4zB.png" alt="Image indicating unicode values inside the variables returned by javascript"></p> <p><strong>[EDIT#3]</strong></p> <p>I thought that for some reason during the call to python happens before the "id_country_name" and "id_city_name" values are filled in. So rather than trying to give the values of "id_country_name" and "id_city_name", i directly passed the values of geoip_country_name() and geoip_city(). This successfully passed the country name and city name back to python code.</p> <p>Here is the code excerpt i tried. </p> <pre><code>&lt;!-- script snippet to fill in users country and city value by making a calls to the geoip library --&gt; &lt;script type="text/javascript"&gt; // selecting users country and users city, // the id for users country drop-down list is "id_country_name" // the id for users city text-box is id_city_name $(function () { $("#id_country_name").val(geoip_country_name()); $("#id_city_name").val(geoip_city()) }); $.post("/AjaxRequest", { selected_country_name: geoip_country_name(), selected_city_name: geoip_city() }, function(data) { alert($('#id_country_name').val()); alert($('#id_city_name').val()) } ); &lt;/script&gt; </code></pre> <p><strong>[EDIT#4]</strong> </p> <p>Based on the feedback given by @hyperslug, I moved the “$.post("/AjaxRequest" “ piece inside the function which sets the users country drop-down list and users city text-box. </p> <p>This code correctly passes users country and city to python code.</p> <p>Javascript code excerpt:</p> <pre><code>&lt;!-- script snippet to fill in users country and city value by making a calls to the geoip library --&gt; &lt;script type="text/javascript"&gt; // selecting users country and users city, // the id for users country drop-down list is "id_country_name" // the id for users city text-box is id_city_name $(function () { //finding the users country and city based on their IP. var $users_country = geoip_country_name() var $users_city = geoip_city() // setting the drop-down list of country and text-box of the city to users country and city resp $("#id_country_name").val($users_country); $("#id_city_name").val($users_city); //since we have users country and city, calling python class to get the data regarding users country and city combination $.post("/AjaxRequest", { selected_country_name: $users_country, selected_city_name: $users_city }) }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload