Unable to display a html file in the div section.

Using Django
1

I want to display a file named Venues_location.html which is in the Templates directory.
I made a button clicking on which it needs display the html file in the div named Analytic area.

 <div class="View_map"> <a href ="" onclick="load_home()"> HOME </a> </div>
            <div class="Analytic_area"> </div>

Here’s the script.

 function load_home()
        {

                    fetch("{% url 'venues_location' %}") 
                    .then(response => response.text())
                    .then(data => document.getElementsByClassName("Analytic_area").innerHTML=data);
        }

Views.py

def venues_location(request):
    return render(request, 'app1/Venues_location.html')

Urls.py

 path('Venues_location', views.venues_location,name='venues_location')

after clicking on the button nothing is displayed on div.In Terminal code 200 is returned.
image

2

What is the name of the variable where you are placing the response text?

What is the name of the variable that you are inserting into Analytic_area?

3

Its the name of the html file actually.
I came here from stack overflow where i was suggested to use this.
Apologies for replying late, had power outage here.

4

Sorry, I was being very explicit here about the code.

You’re doing a GET. You’re getting a response. In your code, you’re calling the function response.text and assigning it to a variable named response.

However, you’re not using that variable (response) to add the data to your HTML - you’re trying to use a variable named data, which isn’t defined anywhere in this function.

1 Like
5

So what do you think i should do here?
i replaced data with response , still nothing changed.

6

Please post the new code.

7 
function load_home()
        {

                   return fetch("{% url 'venues_location' %}") // or whatever url you assign to that view
                    .then(response => response.text())
                    .then(data => document.getElementsByClassName("Analytic_area").innerHTML=response);
        }
8

Ahh… I think I see it now.

getElementsByClassName returns an array, not a singular element. You either need to select which element from the array, or iterate over the full list.

1 Like
9

Oh no, does that mean it return every single tag in that html as element of an array ?

10

It means it returns every tag that has that class name assigned to it. So even if you’re only assigning that class once, you’re still getting back an array. It’s just that that array only has one element.

11

so what should i do to display the venues_location.html in the div?

12

As I answered earlier -

The referenced docs provide examples.

13 
 <div class="View_map"> <a href ="" onclick="load_home()"> HOME </a> </div>
            <div class="Analytic_area"> </div>

Well this means the whole approach of mine is wrong. Since I named the div “Analytic_Area” where I wanted to display the html and I am using it in getElementsByClassName.

14

No, your basic approach is ok. (I wouldn’t have used the class attribute for this, but that’s a personal preference and not an indication that anything is technically “wrong”.)

1 Like
15

well

        async function load_home() {
             let url = "{% url 'venues_location' %}"

            Analytic_area.innerHTML = await (await fetch(url)).text();
          }

was able to load the data of html file but still unable to display on the div.
Well

image
image1003×556 207 KB

but I tried for basic html file it worked.
i just wrote div with a pen.

I believe Since the file i wanted to load had scripts , it was displayed as scripts weren’t rendered somehow.

16

image