title: Calling a python method to fetch data, from a javascript function on the html page
body: <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>