Calling a python method to fetch data, from a javascript function on the html page - Stack Overflow

admin管理员组

文章数量:1405586

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:

1. 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>
   

2. 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 bination 
        $.post("/AjaxRequest", { 
            selected_country_name: $users_country,
            selected_city_name: $users_city         
        })

     });

</script>

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:

1. 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>
   

2. 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 bination 
        $.post("/AjaxRequest", { 
            selected_country_name: $users_country,
            selected_city_name: $users_city         
        })

     });

</script>

• javascript
• python
• google-app-engine

Share Follow edited Apr 17, 2011 at 20:13 bhavesh asked Apr 16, 2011 at 22:43 bhaveshbhavesh 45711 gold badge99 silver badges2020 bronze badges 6

• What values do user_reported_country_get and user_reported_city_get have? None? – Matt Ball Commented Apr 17, 2011 at 16:36
• Inside the eclipse debugger, i see the values as "unicode:" which to me means that the values are None. I use the "alert" box inside javascript and printed the values for "document.getElementById('id_country_name').value" and "document.getElementById('id_city_name').value " and this printed the correct value. – bhavesh Commented Apr 17, 2011 at 17:23
• 1 Your $.post() is possibly executing before your $(function(){...}). Try moving it inside the document ready function as the last step. If any of the functions preceding it have a callback/pletion function, you'll need to put it in there. – hyperslug Commented Apr 17, 2011 at 19:45
• @hyperslug thanks for your response. I moved the $.post inside the function that sets the users country and city variables. This successfully passes the items to python code. The code i tried is in [EDIT#4] section of my main post. Can you please check the code and see if the modification is the same as you suggested ? – bhavesh Commented Apr 17, 2011 at 20:16
• 3 @bhavesh You clearly put a lot of work into your questions, but I think the way you structure them hinders, rather than helps you. Your questions would be much easier to read and understand if you put your exact question first - rather than expecting people to read and understand a lot of context without knowing what the problem is first - then supporting details later. You could also remove redundant information (such as the list of technologies, which are also in the tags), and restrict the code to sections that are likely to be relevant to the question at hand. – Nick Johnson Commented Apr 18, 2011 at 2:59

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

You need to use ajax. jQuery gives you a nice set of interfaces for this.

---

Re: OP edit - try this code instead:

$.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");
});

Create a page to act as your request handler for the country/city data then POST the country and city fields to the page using Ajax. Have the handler output the data you want based on the form fields. Use javascript to insert the returned data into your tab.

Example request handler:

class GeoData(webapp.RequestHandler):
    def post(self):    
        country = self.request.get('selected_country')
        city = self.request.get('selected_city')
        data = retrieve_my_data(country,city)            
        self.response.out.write(data)

本文标签：