Using Django Variable in Javascript to use with Google API

Question

I am developing a Django Application that takes a location on one page and searches the database for real estate listings in that area and returns the results on the next page. The Second page also displays location entered in page 1 i want to know what is going wrong with my code i am access the value of that variable through 'ghar' object and storing it in a variable called address in javascript My Header scripts and html file are

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type=text/javascript" src="{{ MEDIA_URL }}maps.js"></script>
 .....
 <div id="map_canvas"></div>

My maps.js file is

 var geocoder;
 var map;
 var address ="{{ghar.place}}";
 function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

ghar is the name of the object that has the place attribute stored in the database by django models

I HAVE MADE A FEW CHANGES TO THIS This is what i am currently stuck at

ok...i tried doing this thing... i have placed my Jquery javascript in the HTML file itself the HTML file is

<!DOCTYPE HTML>
<html>
    <head><title>Ghar Nivas</title>
        <link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}searchresult.css" />
    <link type="image/png" rel="icon" href="{{ MEDIA_URL }}gharnivaslogo.png">
    <script type="text/javscript" src="{{ MEDIA_URL }}jquery.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript">


var address = {{ area }};
var geocoder;
var map;

 function  codeaddfunc(){
            geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            geocoder.geocode( { 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                            map: map, 
                            position: results[0].geometry.location
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
        }


</script>
    </head>
    <body class="back" onload="codeaddfunc()">
    <div align="right" ><a href="/">Home</a></div>
    <img height="180" width="500" src="{{ MEDIA_URL }}ghar.png" alt="logo here"/>
        <table >
            <tr valign = "top" >
                <td width="20%" >
            <h3 class="whitecolor">Search</h3>
                    <label class="whitecolor">Price Range</label>
            <form action="/second_search/" method="get" >
                    <div class="whitecolor"  >
                    From: <input type="text" name="fromRange" placeholder="5000" id="fromRange" style="width:100px;" />&nbsp;<br/>
                    To: &nbsp;<input type="text" name="toRange" placeholder="10000" id="toRange" style="width:100px;"  />
                </div>
                <br />
                <div class="whitecolor" >
                    Specify Area: <input type="text" name="txtSearch" id="txtSearch" style="width:100px;" />
                </div>
                <input type="submit" value="Search Again" />
            </form>
                </td>
                <td bgcolor="#FFFFFF"><br/></td>
                <td>
                    <div>
                        <table width="500px">
                            <tr>
                                <td>
                {% if ghar %}
                    {% for g in ghar %}
                    <div class="whitecolor"  >
                                            <a href="/venture/{{ g.id }}/">{{ g.nameOfVenture }}</a> <br/>
                        Location: {{ g.place }}<br/>
                        Price: {{ g.price }}
                        Ownner Name: {{ g.ownerName }}<br/>
                        Owner Contact: {{ g.ownerContact }}<br/>
                    </div>
                    <hr />
                    {% endfor %}
                {% else %}
                    <p class="whitecolor" >No gharnivas matched your search criteria.</p>
                {% endif %}
                                </td>
                            </tr>
                        </table>
           </div>
                </td>
                <td >


                   <div id="map_canvas"></div>  

                </td>
            </tr>
        </table>
    </body>
</html>

even on going to this page and "viewing the source" the value of the variable address comes as the one specified in the previous page as i have created a global variable in django called area

YET the corresponding map does not show up in the HTML page

What do you think is the reason for this? where am i going wrong

code is correct. most probable thing could be that, you are not serving js file through django. i.e, it is sent to browser as static file, without any template related processing. comment? — Narendra Kamma
– Narendra Kamma, Commented May 7, 2011 at 12:20

Andrea · Accepted Answer · 2011-05-07 12:27:12Z

2

Is your Javascript file processed by Django at all? If you are using the staticfiles application, or letting your web server directly serve the static files, your variable will never be substituted.

You have two choices:

either serve JS code which is created dinamically
or declare a global variable.

For the former option, you can do something like this (that reference is for CSV files, but it would work for any other content type). This would have the disadvantage that you have to regenerate your whole JS files each time for that variable.

For the latter option you can do something like this in your template

<script type=text/javascript">var address = "{{ ghar.place|escapejs }}";</script>

As a variant, instead of using a global variable, you can pass it as an argument to a function.

edited May 7, 2011 at 12:27

answered May 7, 2011 at 12:12

Andrea

20.5k25 gold badges117 silver badges187 bronze badges

for the safety you should use quotes aroud variable plus escapejs filter (var address = "{{ ghar.place|escapejs }}";) (docs.djangoproject.com/en/1.3/ref/templates/builtins/#escapejs)

Jerzyk
– Jerzyk

05/07/2011 12:22:15
Commented May 7, 2011 at 12:22
You are absolutely right: if the ghar model is populated by someone not trusted (i.e. you), you should always take care of escaping. And doing that in any case will not hurt.

Andrea
– Andrea

05/07/2011 12:26:43
Commented May 7, 2011 at 12:26
even trusted :) to make sure that quotes, new lines and other special characters will be escaped

Jerzyk
– Jerzyk

05/07/2011 12:29:17
Commented May 7, 2011 at 12:29
I have just re phrased the question...could not show the entire code here

Hitesh D
– Hitesh D

05/08/2011 07:13:58
Commented May 8, 2011 at 7:13

Add a comment |

Collectives™ on Stack Overflow

Using Django Variable in Javascript to use with Google API

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related