Technologies being used
- Google app engine
- Django
- Python
- Jquery
Details of the code and code excerpts
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
Image of how these UI elements look on the html page:
Code excerpt that fills in the drop-down list and the text-box:
// 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}); </script>Sample python code for querying the database
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)
I have to probably package these items in a template and then return back to the html page
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))
Please note, i haven't tested this python code yet.
Question
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.
[EDIT#1]
Tried the suggestions given by @Fabio Diniz and @Kevin P
The following is the html and javascript code:
<!-- script snippet to fill in users country and city value by making a calls to the geoip library -->
<script type="text/javascript">
// 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");
}
);
</script>
The following indicates that the requests to "/AjaxRequest/get_data_for_users_country_city" should go to “AjaxRequest” class.
def main():
application = webapp.WSGIApplication([('/', MainPage),
('/UserReporting', UserReporting),
('/AjaxRequest/get_data_for_users_country_city', AjaxRequest )
],
debug=False)
run_wsgi_app(application)
Code in “AjaxRequest” class
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)
Problem:
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.
[EDIT#2]
Based on the suggestion given by @Matt Ball, I tried the following code excerpt in the javascript call
<!-- script snippet to fill in users country and city value by making a calls to the geoip library -->
<script type="text/javascript">
// 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");
}
);
</script>
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"
<div id="userDataForm">
<form method="POST" action="/UserReporting">
<table>
<!-- Printing the forms for users country, city -->
<tr><th><label for="id_country_name">Country name:</label></th><td><select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
</select></td></tr>
<tr><th><label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>
</table>
</form>
Inside the python debugger the values for “select_country_name” and “selected_city_name” are still empty as depicted by the following image
[EDIT#3]
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.
Here is the code excerpt i tried.
<!-- script snippet to fill in users country and city value by making a calls to the geoip library -->
<script type="text/javascript">
// 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())
}
);
</script>
[EDIT#4]
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.
This code correctly passes users country and city to python code.
Javascript code excerpt:
<!-- script snippet to fill in users country and city value by making a calls to the geoip library -->
<script type="text/javascript">
// 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
})
});
</script>
