Passing a value from html template to views.py in Django using AJAX

Question

Can someone please assist me with this issue? I am new to Django and I've been trying to create a web-based application which gets the user location and displays the shops around them from the tutorial I followed online. However, the initial values were hard-coded in the views.py in order to change the user's location. I've asked a question before in order to find the best solution to this, and the kind people advised to use AJAX. I've been trying to come up with a solution for few hours now and its driving me insane. I have never used AJAX before so I apologize for this.

This is what I have so far, no issues or errors when running the application, however, the values are not changing for user's location

Please see attached code

views.py

user_location = Point(0, 0, srid=4326)

def process_loc(request):

    lat = float(request.GET.get('lat'))
    lon = float(request.GET.get('lon'))
    global user_location
    user_location = Point(lat, lon, srid=4326)
    return render(request, 'shops/index.html', {'lat': lat, 'lon': lon})



class Home(generic.ListView):
    model = Shop
    context_object_name = 'shops'
    queryset = Shop.objects.annotate(distance=Distance('location',
    user_location)
    ).order_by('distance')[0:15]
    template_name = 'shops/index.html'

As it can be seen I'm declaring the user_location is located outside the function and then changing it inside the function, so it can be used in Home class

index.html

<head>
        <meta charset="utf-8">
        <title>Shops</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

<body>
<script>
    $(document).ready(function() {

                     var lat, lon;

                     lat = 100.347541;
                     lon = -87.321;

                        $.ajax({
                    type: "GET",
                    url: 'process_loc',
                    data:{
                    'lat': lat,
                    'lon': lon,
                            },
                dataType : "json",
                success: function(stores) {
                    // do whatever in here for success, errors
                }
                })

                    })
</script>
</body>

I am using this code for AJAX, at the moment I just hardcoded the values in HTML just to get it working first as I am desperate to find a solution for this.

urls.py

urlpatterns = [
                path("admin/", admin.site.urls),
                path("", views.Home.as_view()),
                path('', include('pwa.urls')),
                path("search/", views.SearchResultsView.as_view()),
                path('process_loc', views.process_loc, name='process_loc'),

            ]

Output when the server is ran

[06/Dec/2019 12:00:57] "GET / HTTP/1.1" 200 11312
[06/Dec/2019 12:00:57] "GET /process_loc?lat=100.347541;&lon=-87.321 HTTP/1.1" 200 6621
[06/Dec/2019 12:00:58] "GET /manifest.json HTTP/1.1" 200 342
[06/Dec/2019 12:00:59] "GET /serviceworker.js HTTP/1.1" 200 3228

I will appreciate any response on this and I apologise for the messy code, thank you.

Thanks for the reply guys, @NalinDobhal what part would you like to see exactly? — vgmda
– vgmda, Commented Dec 6, 2019 at 13:06

juancarlos · Accepted Answer · 2019-12-06 13:32:07Z

1

i think values not change, because are hardcoded in the ajax request definition just here:

<script>
    $(document).ready(function() {

                     var lat, lon;

                     lat = 100.347541;
                     lon = -87.321;

                        $.ajax({
                    type: "GET",
                    url: 'process_loc',
                    data:{
                    'lat': lat,
                    'lon': lon,
                            },
                dataType : "json",
                success: function(stores) {
                    // do whatever in here for success, errors
                }
                })

                    })
</script>

then you could have a form with two inputs a take the inserted in there and put in the request

    $(document).ready(function() {
                     //here get values from inputs
                     var lat, lon;

                     lat = 100.347541; //set here
                     lon = -87.321; //set here

                        $.ajax({
                    type: "GET",
                    url: 'process_loc',
                    data:{
                    'lat': lat,
                    'lon': lon,
                            },
                dataType : "json",
                success: function(stores) {
                    // do whatever in here for success, errors
                }
                })

                    })

answered Dec 6, 2019 at 13:32

juancarlos

6314 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vgmda Over a year ago

Hi, thanks for the reply, I intend to use the GeoLocation in HTML5 that loads the position once the page is loaded without having the user to click anything. w3schools.com/html/html5_geolocation.asp, I was looking at this example here, would it be possible to add this without a button?

juancarlos Over a year ago

yes, if you browser support Geolocation, just with the example you can, change the function showPosition, to it send the request with thi position obtained

vgmda Over a year ago

Would you mind showing me the right way to get this working correctly please, at this stage I'm not thinking straight to get this done sorry

Collectives™ on Stack Overflow

Passing a value from html template to views.py in Django using AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related